jameswoon
Member
Posted 3 years ago #
Hi,
I have been searching what I can only assume is everywhere. I usually do not post until I have done this anyway. I was hoping someone could help me with this by maybe suggesting a hack that already exists or by giving me a hand.
Basically I just want to put little icons in the titles of each of my widgets. That means a custom icon for each widget's title. The easiest way I thought of doing this was putting an image on the left of a title
i.e. <img src='RecentPostsIcon.png'>Recent Posts
But ofcourse WP won't allow you to put HTML in the titles of widgets. So yeah, I hope this kind of sums up what I have been trying to do!
Blog is at http://blog.fantomed.org and version 2.8 - Thanks anyone who can help me out.
if it's not in the middle, but at the left or right of the title, you could do this purely with CSS. each widget has a unique id so the heading of a widget can be selected with eg
li#text-133974000 h2 { ... }
and you use ordinary css to set the background image with all the usual css stuff and background-repeat: no-repeat so it only appears the once. inset your text with padding to accomodate the image and so on
jameswoon
Member
Posted 3 years ago #
Where is that unique id? I do not seem to have that in my theme. Is there something I can edit in the theme so that an ID is assigned to each of the widget headers?
Seems like the headers just look like the below:
<div class="sidebarbox"> <h2>Events</h2> <ul>
My site: http://blog.fantomed.org as previously mentioned. Thanks.
i can't remember the right way to set it up off the top of my head, but looking at your site, you have 4 sidebars and only the top one (sidebar_full) doesn't show those unique IDs. so however the other 3 are declared, copy that.
eg your sidebar_right is structured:
div#sidebar_right
ul
li#meta-3
div
h2
ul
li#archives-2
div
h2
ul
jameswoon
Member
Posted 3 years ago #
Ah hah! I found it. It was because the first 'widget box' was manually chucked into the theme and I didn't put in the ID. Thanks tons for this!
In case anyone needs the rough code for it here's an example of how I did it:
#wp-wall h2.widgettitle {
background: url(images/icons/WallIcon.png) top right no-repeat;
}
