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:

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.

Grey Fade

Colour Fade

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.



Wordpress title showing space?
no comment on page 1371

Wordpress fun?
one comment on page 1376

Live blogging plugin?
4 comments on page 1258

Wordpress 3 admin speed up?
4 comments on page 1321

Framework photoshop?
3 comments on page 296

Fun wp plugins?
one comment on page 1376

Habari vs wordpress?
12 comments on page 440

Wp tags vs categories?
12 comments on page 7

Wordpress rss seo?
one comment on page 1361

Photo albums html5?
6 comments on page 1305

Wordpress chat?
no comment on page 1308

Wordpress exif data?
12 comments on page 230

Css sidear tab?
2 comments on page 336

Wordpress theme html5 blueprint?
6 comments on page 1305

Wordpress shortcode in plugin?
no comment on page 236

Html 50 photo album?
6 comments on page 1305

Get the post attachement?
24 comments on page 1065

Wordpress plugin development 30?
one comment on page 1373

Wordpress plugin development 30?
one comment on page 1373

Disqus formatting?
7 comments on page 1175

Html5 photoalbum?
6 comments on page 1305

Html5 photoalbum?
6 comments on page 1305

Wordpress fun?
one comment on page 1376

Fun wordpress plugins?
one comment on page 1376

Url shortener ideas?
4 comments on page 1190

Url shortener ideas?
4 comments on page 1190

Html 5 photo gallery?
6 comments on page 1305

Multiple post navigation?
no comment on page 1147

Html5 photo galleries?
6 comments on page 1305

Adding images to a wordpress 3 post?
24 comments on page 1065

Html5 photo gallery code?
6 comments on page 1305

Wordpress multiple blog master?
one comment on page 1376

Wordpress 3 tableprefix?
2 comments on page 1374

Wordpress 3 tableprefix?
one comment on page 1376

Using wordpress as a framework?
2 comments on page 335

Single post image size?
24 comments on page 1065

Get featured image src wordpress?
24 comments on page 1065

Disqus wordpress mu?
7 comments on page 1175

Image gallery html 5?
6 comments on page 1305

Wordpress theimage?
24 comments on page 1065

Wpgetattachmentimagesrc size?
24 comments on page 1065
  every 1742s, 1s ago, in 0.03s.
 __
(__)
   `
 Andrew Rickmann

It wouldn't be easy. To be honest there are probably better ways of going about that.

You might like to try the replacement for this plugin; http://www.wp-fun.co.uk/fun-with-widget-structu... this has more options that would help but it is all really down to creating the right CSS to get it to work.

 __
(__)
   `
 Glenn

Great little tute! Is there an easy way to have the tabs vertical? e.g. hang off over the edge of the sidebar over the background?

that'd be awesome!


0s