Hello all,
I'm using the bluemarine theme for a website i cretae and i need to replace the menu links with icons.
The rendered HTML shows something like the following output:

  • access control

    • I need to change that to something like:

  • Only local images are allowed.

    • The problem is I'm no coder. I've managed to get to menu.inc file in /includes where most of the relevant functions reside (like theme_menu_item_link) but i'm stuck there.
    I can't find where the actual text is created in order to replace it.
    Could someone help me on that?

    Thanks in advance

    Comments

    or1onas’s picture

    or1onas commented

    Sorry about the first post's wrong exmples. Here's the correct ones:
    This is the rendered HTML i see:
    <li class="leaf14"><a href="/drupal-4.7.3/admin/access" title="">access control</a></li>

    And this is what i want to do:
    <li class="leaf14"><a href="/drupal-4.7.3/admin/access" title=""><img src="image.jpg"></img></a></li>

    Thanks once again in advance

    m3avrck’s picture

    m3avrck commented

    Best way to do this is with CSS. Don't hard code the image. But use a CSS image replace technique. Google for more info on how to do that.

    If you need a specific class for a specific link and it doesn't work, might have to wait till 5.0 where this has been fixed.

    or1onas’s picture

    or1onas commented

    Thanx a lot for the tip. I'll try that :-)

    or1onas’s picture

    or1onas commented

    I tried it but i have a problem cause the text link is displayed in front of the image.
    If i set a display:none in .css, the hyperlink disappears?
    Any tip on this?

    quicksketch’s picture

    quicksketch
    he/him
    commented

    Try something like this in your CSS:

    li.leaf14 a {
  /* Set to replacement image dimensions */
  width:32px;
  height:16px;
  display:block;
  background:url('path/to/image.gif') no-repeat top left;
  text-indent:-9999px;
}

    Despite that ugly -9999px, this is common practice and safe for all browsers.

    or1onas’s picture

    or1onas commented

    I found out about it by googling a bit.
    Thanks a lot for the tip though ;-)

    quicksketch’s picture

    quicksketch
    he/him
    commented
    Status: Active » Closed (fixed)
    xalexas’s picture

    xalexas commented

    Just add overflow:hidden and put smaller indent. That way you will not have ugly dashed line selection that is wide 9999px.