Wednesday, 9 April 2008

Unique Background Images for Widgets



I also wanna know, is it possible to assign a different background image to each widget?



Gelo, yes, it is possible! As you can see in the images below. Top is the normal widgets. Bottom is the same widgets with background images in place.

Widget without background image


Widget with background image


To achieve this takes a little sleuth work. Each widget has a unique name. In this example, I have three widgets:
  1. LinkList1
  2. Text1
  3. BlogArchive1
You can find the unique names of your widgets by searching your template for <b:widget id=

My search turned up: <b:widget id='LinkList1' locked='false' title='link widget' type='LinkList'/> So, my unique ID here is LinkList1.

After you find and identify each widget's unique ID, you will do a little work in the CSS Style Sheet. It doesn't make any difference where you actually place this code, but for neatness sake you can make a new group called Widgets.

/* Widgets
----------------------------------------------- */

Of course, you could have LinkList2, LinkList2, Text2, HTML1, etc.

For each widget that you want to add an image to, add the code as I have below to the CSS Style Sheet.
#LinkList1{
background: #fff url(IMAGE URL) no-repeat;
}
#Text1{
background: #fff url(IMAGE URL) no-repeat;
}
#BlogArchive1{
background: #fff url(IMAGE URL) no-repeat;
}
And, that is that.


post signature

No comments:

Post a Comment