Step 3: Styling Sidebars with CSS

Step 3: Styling the Sidebars with CSS

Now take another look at the first lines of the two sidebars in the sidebar-double.php container. Again, sidebar-double.php holds the registered sidebars named ‘LeftThinSB’ and ‘RightThinSB’. The first line in each of the two sidebars above have class=’leftthin’ and class=’rightwide’.

and

These classes format their respective sidebars to appear a certain way when displayed in Pages and Posts. We will now add our own styles to the Style.css template. Open that template and find (using Ctrl-F) “/* sidebar”. The first item below the comment is “#sidebar {…}”.

Delete the #sidebar {…} and enter these in that space:

Let’s look at the basics of the sidebar-double.php styling we have created. The classes “leftthin” and “rightthin” in the Style.css template has this entry (in part):

Again, a bit of css knowledge is assumed here. With that, you can see that the format will float the ‘LeftThinSB’ sidebar to the left side of the page, and that the width will be a 200px. The ‘RightThinSB’sidebar will be right-justified and have a width of 200px.

A bit of advice. Be descriptive in your class names. I use the following:

• .rightthin (typically 175px or 200px)
• .leftthin
• .rightwide (typically 225px to 275px depending on Content width and Body width)
• .leftwide

Now, and obviously, the Content width is a factor, the section where you do your actual writing. If your page is 960px wide and the sidebar is 275px, a Content width of 700px just won’t fit; and when padding and/or margins are figured in, you might consider a readable 600px.

This brings up the other CSS area, Content. The useability of the Blass2 theme becomes even more apparent as we see that the author has kindly separated format classes into “.content’ for Posts and “.content2” for pages. Without such separation, workarounds exist such as separate stylesheets, but the two classes are quite handy and easily understood.

Making use of the .content an .content2 classes, we can amend to allow for width and placement. Let’s make a couple changes to the Style.css template. Blass2 is set up for a 760px width. We need to change this to 960px.

• Find “#wrapper”. Change the width to 960px. ( To find it, with the Style.css template up, use Ctrl-F and search on #wrapper.)
• Next, find “/* content”. Below that /* content comment, delete the following code:

• In it’s place, add this: