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.
   

Can't Scroll on Blogger Layouts page

Multiple reports of the Layouts page editor not allowing users to scroll have been posted to the Blogger Help Groups recently. Blogger has reported the issue resolved as of today. Clear your browser's cache (ctrl + f5 on a PC), close your browser, then re-open it and login to your blog. Please report any continuing issues to http://knownissues.blogspot.com

There does seem to be an unofficial limit on how many page elements you can stuff into a sidebar or other section of a template before it breaks the visibility of the Layouts tab screen.

Why can't I scroll my Layouts screen?
Blogger code issues - There was an issue with the scrollbars that was fixed today. The knownissues.blogspot.com blog had the following update:
--------------------

Since 2/12, the Layouts page elements editor has not had scrollbars around the wireframe template. Until this is resolved, you can often scroll wide templates by clicking and dragging on empty space.

Nevertheless, we encourage template designers to use the body#layout CSS selector to add CSS styles that adapt templates to the editor.
Update, 2/29: The Layouts editor now expands to the size of the template. — latest update on Friday, February 15, 2008

----------------------------------
Browser updates can cause temporary problems
It can be related to how different browsers display information. IE6 appears to display a full scrollbar, while recent updates to FireFox seem to be causing display issues. Find out how to compress your layout

Custom Templates may break the Layout Editor
Making custom changes to your blog template can cause issues with the layout editor. Blogger controls the layout and look of the administration screens using CSS. Be careful when adding new CSS styles or code to your template.