Blog Bling Tip: Create a Custom Sidebar Style

As we start getting ready for the Blog Bling Mixer on the evening of October 23rd, I’ve started to throw ideas around in my head as to what tips I’m going to be sharing with people.

The mixer is meant to help people of all skill levels, so some tips will be geared at beginners (like how to add polls to your sidebar) and some will be aimed at more advanced users. Here I’m going to share one aimed at more advanced users: how to create a custom sidebar style.

What is a custom sidebar style?

Not everyone can go mucking about in their stylesheet directly, but chances are you can. In WordPress, for example, you can actually access your stylesheet right from the dashboard interface.

For those of you that can get at your style.css file, either through the dashboard or through an FTP program, I’m going to show you how to create a cool-looking box around any paragraph element you choose, like the blue box on my site in this picture:

What code do I use and where do I put it?

Blogs are database-driven web sites, which means that the “how it looks” information is kept in a different place than the “what’s on the page” information. We’re going to use CSS to define a “class” that you then put into a file called “style.css.”

If you want to create an exact clone of the blue box in my sidebar, here’s the code you should use in your stylesheet:

/* Creating my own blue box for the sidebars */

.alert {
padding: .7em;
background: #E3F0F2;
border: 1px solid #ADDDE6;
margin-bottom: 1em;}

When you paste that into your style.css file, you are telling your blog that whenever it find any page element with class="alert", it will surround it with a blue box.

If you’d rather not use blue, changing the colors is in fact fairly simple. CSS supports the use of plain English for many colors as well as HEX values, so you could have a color statement like this, and it would work fine (although you would get less fine control over what colors are displayed):

background: blue;
border: 1px solid red;

OK, how do I get it to show up?

Setting the style is only half of the project. Now you need to put something in your sidebar that will activate that stylesheet element.

Here’s what you need to do: attach the “alert” class to a paragraph element, and put your text inside it. In your sidebar.php file, it might look like this:

<p class="alert">This text will appear on my sidebar inside a cool looking box. I learned this neat trick from Jason Preston at the Blog Bling Mixer.</p>

And it would then show up in your sidebar as text in a blue box with a border around it.

Feel free to play around and experiment. Find different color combinations or build a complete set of cool looking boxes for your sidebar.

I’ll be happy to answer questions or elaborate on this tutorial (no doubt I’ll have to) at the Blog Bling Mixer later this month. See you there!

Welcome to our community! If you like what you see, you may want to subscribe to our RSS feed!