February 27, 2010

My most popular plugin is Fun with Sidebar Tabs and it is easy to see why: it provides functionality that is much in demand. For that reason I have decided to devote a few posts to looking at alternative ways of styling the tabs to help users fit it to their theme more readily.

For the first post I am going to use this site as an example; I use Fun with Sidebar Tabs for the tabbed box on the home page.

I have am using the default WordPress theme and starting with a tabbed sidebar using the default settings.

To change the styling I am only going to use the widget options. To access these click edit on the sidebar widget. There are five blocks of CSS in these options labelled:

• Amend the position of the tabs
• Overide the Tabs CSS
• The Selected Tab
• Tabs Hovered Over
• Tab Content Container

The first change is to create the background for the tabs. For this I will change the CSS in the first box (Amend the position of the tabs). I will add four lines:

background-color:black;
width:1989px;
height:24px;

This alters the sidebar to look like this:

The next change is to Overide the Tabs CSS. Change:

font-size:10px;
line-height:1;
font-family:Arial, Helvetica, sans-serif;
color:#000;
padding:5px;
border:1px solid #ccc;
background-color:#eee;

To:

font-size:12px;
line-height:1;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
padding:6px;
background-color:#000;

This increases the text size, removes a border, and increases the padding to compensate, in order to make the tabs the same height as the background. The background colour is changed to the same colour as the background and the text changed to white.

You also need to alter The Selected Tab from:

border-bottom:1px solid #fff;
background-color:#fff;

To:

background-color:red;

The effect of these change is a tabbed sidebar that looks like this:

The last change is to resolve the problem with the image above. The hovered over tab hides the text, so you can change the CSS for Tabs Hovered Over to:

background-color:#660000;

I will leave you to discover impact of this final change.

This CSS pretty much describes the CSS used on this blog, but with one exception. Instead of the background colours I have used the images shown below.

If you use the Fun with Sidebar Tabs plugin and have modified the styling then please leave a comment. I don’t get to see many examples of it in use and I would love to see more.