Changing a widget's background colour the quickest and easiest way ever!

Live demo of this is the "Talking Avatar" widget on this blog in the left hand column.

From time to time we all have widget's that we want to add a background colour to and we don't want to spend even 5 minutes doing it. So much time is wasted editing one's template to add this or that to it that after a while even you will get sick of changing the way your blog looks because it takes up too much of your time. Or worse, a whole lot of code is needed to get the same effect as we want just for one widget.

This tutorial takes you less time to apply the code than it does to read the above first paragraph. Your main delay will be deciding what colour you want the background colour to be for a particular widget.

Instructions:
Click on the "Edit" link or spanner icon and open up a widget to edit it. This will only work on the widgets that actually display content within that edit section. On a new line above all the code for the widget's content copy and paste in:

<div style="background: black; padding: 5px;">

At the very bottom of the widget content's code copy and paste in:

</div>

Change the background colour "black" to whatever colour you want. You can change "black" to "#ff1199", for example, to display hex colour codes. You do not necessarily have to type in a word for the colour.

If the padding for your widgets is already perfect then delete this bit of code:

padding: 5px;

Once you have typed in the colour you want the background to be select "save".

You are done! Couldn't be easier if you tried.