What I wanted is add social icons on the right in the page menu bar, because it's a spacesaver and great spot. The result is like this:


I like it this way. Only problem is it lights up with the same background color as my page menu items, because the code is within <li> items, otherwise it wouldn't work.

How can I solve this? So the image is just like it is and doesn't change bgcolor when hovering? Or how can I avoid LI maybe? I included the used code within bfa_header_config below:

$page_menu_bar .= '<li><img src="/nixel.gif" width="265"></img></li><li><img src="/icons/16/twitter.png"> </img><img src="/nixel.gif" width="10"><img src="/icons/16/linkedin.png"> </img><img src="/nixel.gif" width="10"><img src="/icons/16/rss.png"></img><img src="/nixel.gif" width="10"><img src="/icons/16/email.png"></li></ul></div>'

Thank you guys, final steps in my page!!

(btw, live example of how it behaves on http://www.marced.com)

add a class="foobar" to each of the li's then you can use it in CSS to reset those LI's

Hi JD (again ), thnx for your help again. I added the class but now I don't know how to refer to the li and class and refer to hoover in CSS, got some basic knowledge on CSS but this goes a step too far. Can you tell me how to edit the hoover color for this LI class?

Thnx again (and again)

do a google search using 'css hover pseudo' and read about it at w3schools.com

I did some research, of course I want to look into it myself, but I see no effect in my page uptill now.

I tried a lot. And I referred to background color, background etc.

No effect. The referral to .foobar seems right when I look at explanation, I think something is wroing with li:hover, or maybe the variable but that's a Atahualpa thing how it is arranged.

I already have a CSS thing that IS working:
"div#menu1 ul#rmenu2 li a: hover"

But now I need to refer to this li with the class specifically, and it's an image not a link (so no 'a').
I understand you can't teach everyone CSS and you're not here for that, but I know you got the expertise

Appreciate it if someone could help.

Donation no problem.

your code won't work - all you have is the images. I assume that you want to be able to click on an image and link to twitter of face book or what ever, In that case your code must be

<li class="foobar">
  <a href="http://address_of_where_you_want_to_link_to">
    <img src="/icons/16/twitter.png" />
  </a>
</li>

note: the class 'foobar' can be anything but should be meaningfull so 'menu_social_icons' might be a better name that 'foobar'

With this you can now code your CSS
.foobar a:hover {background: #000000;}