By darylsws on

Hopefully this is quite a straightforward question. Essentially I'd like to add a simple user icon to the left of the user name in the "Who's online" block which will replace the standard bullet. I've tinkered a bit with the CSS but without much joy.

If someone has achieved this in 6 I'd really appreciate the help!

(Once I've got that sorted I'd like to show gender based icons - but first things first!)

Thanks!

⋅ Categories: Drupal 6.x

Comments

mikewheaton’s picture

mikewheaton commented

What have you tried through CSS so far? You'll need to find the path to the class of the

that surrounds the list of users. In my case it's: 
div#page div.content div.lsidebar div.defaultblock div.blockcontent div.itemlist

Download and install Firebug for the Firefox web browser if you haven't already, it makes this sort of thing much simpler to track down. Then we need to create a CSS rule something like this:

div#page div.content div.lsidebar div.defaultblock div.blockcontent div.itemlist {
  list-style-image: url("/images/usericon.png");
}

I haven't tried this out, but I think that should be a start in the right direction.

darylsws’s picture

darylsws commented

Thanks a lot for that Mike, my path was slightly different but Firebug helped me out and I've managed to get it to work like a charm :o)

Obviously this will be fine for a generic user icon but can anyone give me any pointers on where to start for gender based icons? I've created a gender field in the user profile but not really sure where to go from there!

Thanks again!

mikewheaton’s picture

mikewheaton commented

Great, I'm glad I could help! Unfortunately I'll have to pass on your next question. I'm still very new to Drupal and haven't a clue how to change the output of the < li > elements based on a field in the user profile. If you can get an output of < li class="male" > then it's just a matter of tweaking the CSS like so:

<<path to the div containing your user list>> li.male {
  list-style-image: url("/images/littleman.png");
}

<<path to the div containing your user list>> li.female {
  list-style-image: url("/images/littlelady.png");
}

I imagine you'll have to override one of the themeable functions (not sure which one) and do a quick if-else lookup to determine what class to place on the < li >. Can someone help out here?