help me with my Maginoo theme and SRG Clean Archives Plugin problem

[athlon24]

i am using Maginoo theme and everything is fine but when I used SRG Clean Archive Plugin, it ruined my sidebar. the good thing is that, it's only in my archive page. can anyone help me to solve this. I can't figure it out. i already contacted the programmer of SRG Clean Archives Plugin but as of know, there is no response yet. i'd be grateful for any help.

here's my archive page (http://thatwashot.com/archives/). My sidebar is distorted.

[sarahG]

Is the Maginoo theme a BloggingTips theme as I can't find the original on the themes section.

Anyhow, your sidebar doesn't look distorted to me in Firefox, however most of it is unreadable as you have white text on a light grey background. But this is the same throughout the site. There is no difference between the Archives page and the other pages.

We need the following to be able to help you

1. What does the plugin actually do (ie. what is it meant to do)
2. A screen shot / example of how the page / sidebar should look like.

[athlon24]

its also distorted on the other page? I think I just got a big problem. I thought it's working fine, only to the archives page that it is distorted. Can anyone confirm this?

This is a screen shot of my sidebar other than the archives page.
http://thatwashot.com/wp-content/uploads/2008/10/ok.jpg

This is what happens when its in the archives page.
http://thatwashot.com/wp-content/uploads/2008/10/notok.jpg

Or does it seems to be all distorted in any page or post?

[sarahG]

Ahh sorry my mistake, I had JavaScript off yesterday, however that should be a concern to you because it means that anyone without JavaScript enabled will not be able to use/see your sidebar as it will appear as it does in the Archives page.

However, that aside. Your problem on the Archives page is just that, a JavaScript problem. The page is loading a load of scripts along with moo tools and prototype at a quick glance (or one or the other), and it's clashing with the jQuery you've got loaded already for your tabs. Too many JavaScript frameworks is the problem.

You can either
1. Remove the plugin
2. Try moving the script for the tabs and the call to jQuery right before it's needed rather than in the header.

Without knowing what this plugin does there's not much else I can say as I don't even know why you've got it running.

Also, you're loading jQuery twice from two different sources on your site, one in your theme and another is being loaded by a plugin. Just load the one that comes with WordPress by default, this way I think a second call to the same JS script should either be ignored or at least cause less bandwidth on your server as it's already been loaded.

[athlon24]

Thank you so much for taking note of the java script. I didn't know that my sidebar won't work on a javascript disabled browser. I think, I need to come up with a backup plan for that.

[sarahG]

The problem with your sidebar is that it's relying on JavaScript to add the background colours. You could add in a background colour to your CSS for the #box-tabs which would then show to non-JS users and make your sidebar readable, however it would also affect your current tabs too.

There are ways around it. You could add the background colour to #box-tabs in the CSS and then remove it with JavaScript so that non JS users would see the background colour but JS users would get the correct colours. Or it could be achieved with just CSS if you can remove the padding from above the tabs. It's worth playing with to at least get it readable for everyone.

[athlon24]

I will try to work around it so it will be readable for both nonJS and JS users. I didn't really recognize that it will be that bad. I was even thinking now to change my theme. Possibly, if I can't get into it. I'll change my theme. Somthing that doesn't use javascript. I liked the tabs though.

[sarahG]

It's possible to keep the theme and the tabs. I have jQuery tabs running on a client site and it can work with and without JS being available.

After a bit of playing, if you add the following in you can fix it be readable.

div.box-tabs { padding-top: 0; margin-top: 19px }
#box-tabs { background: black; }
.ui-tabs-nav { background: white }
.box-tabs li a { color: white }

The first line is overriding a setting in one of your stylesheets so it would be better to change that than add a second style in, however add the other 3 lines in somewhere near the bottom of your stylesheet, on style.css under the imports for example, that way they'll override any other setting.

Those styles will also not affect your JavaScript version.

[athlon24]

I implemented the code you've given and the items are now readable but, it is really disoriented. The headings and out of place. But, I still thank you. It was a great help. As of now, this is the best outcome so far but honestly, I'm not really satisfied. Is the a way to bypass the tabs if JS is disabled and it will show something different?

[sarahG]

Yes, but you need a good working knowledge of JavaScript (jQuery is pretty easy to learn) to really accomplish it well. Ideally JavaScript should degrade gracefully, but the downside with the jQuery tabs is that the tabs are in their own list so that comes first in the markup.

Your best option, if you're prepared to learn how, would be to create a sidebar designed for non JS users, then use JavaScript to hide this to JS users and effectively use JS to create a second version of your sidebar. However, I wouldn't put that much effort into a blog site to be honest. Look at the sidebar and decide what's important to your users, categories are, recent comments are really, and perhaps just use a bit of CSS to hide what isn't essential and is more there additional info rather than necessary info.