jameswoon
Member
Posted 4 months 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.
alanft
Member
Posted 4 months ago #
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 4 months 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.
alanft
Member
Posted 4 months ago #
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 4 months 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;
}
