Changing the Background color of a widget

Do you have a widget on your blog you want people to notice? Want to add a little extra flair to your blog with different background colors? It is really easy to do. In this article I'll show you how to apply a background color to individual widgets using a little css.

First, you need to find the unique id of your widget. Each page element in Blogger has a unique id, usually a combination of letters and numbers like this: Profile1.
Find the widget ID
You can find the unique ID in your Blogger template.

1. Login in to Blogger, Click Layout, and selecting the Edit HTML sub tab.
   
2. Click the "Expand Widget Templates" checkbox.
   
3. Scroll down the template until you see the widget's tag. Here is the profile tag for example:
4. Now that you have the id, you are ready to style it with CSS.

Styling the widget

1. Scroll all the way back up to the styles area of the template. look for the #side-wrapper style, and position your cursor just after the closing bracket } of that style.
2. Create a new div style for your widget. Type the pound sign # then type the widget id Profile1, then an opening bracket. Click the enter key on the keyboard, then add the background-color attribute: background-color:#ccccff; It can be any color you like. Hexadecimal format is the most flexible way to declare a color. This will put a blue background color on your profile. Type a closing bracket }
   
3. You should now have a new div tag style for the specific widget. It should look like the example below:
   #sidebar-wrapper {
   margin-$endSide: 14px;
   width: 240px;
   float: $endSide;
   background-color: $mainBgColor;
   display: inline; /* fix for doubling margin in IE */
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   #Profile1{
   background-color:#3399ff;}
   /* Headings
   ----------------------------------------------- */
4. Save the changes, Clear your browser's cache, (ctrl + f5 on a PC) then view the changes. You can now change the color anytime by editing the style you just created in your template.