Adding A Background Color To Your Gadgets

We've covered how to change and remove borders in your Blogger blog and how to add a background-color to your sidebars. In this example I'll cover how to add a background-color to individual gadgets in your sidebar.

Step #1:
Backup your template or better yet try this first on a test blog before doing it to your blog. The first thing you do is located the id of the gadget/widget you'd like to add a background color to. To find the gadget scroll down your template and find the "div" for the particular gadget. In this example it looks like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='Text' type='Text'/>
</b:section>
</div>

Text1 is the name of the text gadget in my sidebar I want to add a background-color to.

Step #2:
I create an area for these decorations so I know where to place them and find them should I ever want to change or remove them.

/* Decorations
----------------------------------------------- */
#Text1{
background-color: #DDDD99;
}

This is what the example looks like on a blogger template I'm customizing for someone.

The ocher square you see in the sidebar is the Text1 gadget/widget. We can also add borders to particular gadgets/widgets like I did in this example, just find the gadget/widget id and create a style for it. This is what those two decorations look like in the template:

/* Decorations
----------------------------------------------- */
#Text1{
background-color: #DDDD99;
}
#Text2{
border:3px dashed #DDDD99;
}

Text1 just has a background-color, but Text2 has a border around it. You can do this for all the items in your sidebar, just locate the name for them and decorate them however you want. Once you're done preview it to make sure you like it and you have done it correctly and then save.