As you may know, I am helping to administer The Woolly Mom. However, the theme we are using doesn’t have a dynamic sidebar. I must correct this! The steps: Decide the layout, Write the CSS, Make it dynamic, Add the Widgets.

Today’s Topic: Expand The Sidebar Width

I know that I don’t want to use h2 tags for the titles due to search relevancy, so I’m just going to use div’s for everything to keep it simple. The first thing I want to do though is to make her sidebar a bit wider so that she may fit side-by-side 125×125 ads in it. I also think that it would be helpful if her navigation were under the top graphic as well, so I’m going to run with that. To that end, I first need to do some image editing in The Gimp in order to expand her right sidebar’s width. Here’s the Before:

And the After:

Editing the images themselves was pretty easy as all it really involved was some copying and pasting, so I won’t go into the finer details there. I’ll make a few points about the CSS changes though. To do this with the CSS I first changed the left hand content CSS from:

to:

Then altered the right sidebar from:

to:

Viola, an expanded Sidebar! Tomorrow I’ll start making changes to the contents of the sidebar and work on new navigation.

Rate this with SezWho :

2.5

Rate this post:

Related Posts

• Wordpress Tutorial: Creating A Sidebar Part Four - Widgitize Your Theme
• Wordpress Tutorial: Creating A Sidebar Part Three
• Wordpress Tutorial: Creating A Sidebar Part Two
• Webmaster’s Edge Tutorials On Tutorialized
• The First Batch Of Wordpress Plugins