Wednesday, August 5, 2009

Tutorial: How to Add Background Color and Borders to Sidebars

This is one thing that is pretty simple but can be a little tricky. However, it is one of my FAVORITE things to do because it looks so classy and sharp!!

If you have no idea what I am talking about, look at my blog. See how my sidebars and area for posts are all different colors? AND they have borders? That is what I want to teach you today.

All of this is done in the HTML editor. So go there. You are also going to need to pull up an HTML color code chart like the one here. And don't forget to backup your blog before making any changes! You don't have to, but I need to say it so if you mess it up, it's not my fault LOL.

Anyway....

There are a few awesome things you can do and I will tell you:
  • If you want your sidebars and posts to have one whole color behind them like this: Then you need to find this line: #outer-wrapper { Underneath it, you need to type: background: #enterhtmlcolorcodehere; Don't forget the ";" or it won't work. So it will look something like this:

#outer-wrapper {

background: #ffffff;

Then you can see what it will look like by clicking "Preview" if you like what you see, hit Save and you are done!
  • Now if you want to add a border to that so it looks like this: Then you need to add one more line under background. This line: border: 5px solid #htmlcolorcodehere; The 5px is how wide you want it. So you can play around with that number too. So now your code should look something like this:
#outer-wrapper {
background: #ffffff;

border: 5px solid #000000;
  • Alright, now if you want all your sidebars and post section to have different colors like this blog. Don't mess with the #outer-wrapper but skip on down to where it says #main-wrapper { this is where your posts are located. You will want to add this line underneath: background: #htmlcodehere; Just like you would have done above. Also, you will enter this under the following as well, with the colors you choose:

#sidebar-wrapper {
#left-sidebar-wrapper {
So it will all look like this:

#main-wrapper {
background: #ffffff;

#sidebar-wrapper {
background: #990000;

and if you have a third column:

#left-sidebar-wrapper {
background: #990000;

Now your blog will look something like this: (2 column template)Tip: if your words touch the side, you will need to change your padding and margins -- see this post for that help: Tutorial: How to change Margins and Padding.
  • Now, if you would like to add a border, it is pretty much the same as above. Just add this line border: 5px solid #htmlcolorcode; under both of the background codes. So it will look like this:
#main-wrapper {
background: #ffffff;
border: 5px solid #990000;

#sidebar-wrapper {
background: #990000;
border: 5px solid #ffffff;

and if you have a third column:

#left-sidebar-wrapper {
background: #990000;
border: 5px solid #ffffff;

Now it will look like this: (2 column)
Notice though, that when you first put the borders on, your sidebar may go to the bottom, mine did. This is where you need to go in and change your widths or margins. I changed my width under #outer-wrapper { and then changed it under #header-wrapper { to match the widths. Now when I previewed it, both columns were there. You can play around with this, and look at it under Preview, before you keep the changes. Don't save it until you know for sure that is what you wanted.

Last Note: If you want, you can also do this to your header. Just place the background and/or border code under #header-wrapper {

Just don't forget the ";" !!

1 comment:

Anonymous said...

Thank you for the help - this was one of the best explanations I have found on the topic I needed help with! Cute blog too :)

Blog Widget by LinkWithin