Icons in the menu Drupal 6
Hi,
I have been struggling for the last 48 hours on this problem and hope someone will be able to help me :)
here is my issue :
I have created a new menu of 5 item links that is displayed in the right sidebar region of my website.
I would like to place icons just before the links like in their menu
I have tried both "menu icons", which did not work for me at all - have not got any support at the moment from the dev team
I have tried "menu attributes" which a css background-image associated to my anchor : did not do the trick either, as the icon cannot appear on the side of the link instead of behind
I have thought of customizing completely my theme by intercepting and overriding functions such as theme_menu_item or theme_menu_item_link, but it would then affect all menus accross my website, which I don't want.
I am quite a newbie to Drupal and theme development. So any help will be appreciated. I run Drupal 6.
Thank you all in advance
To place a background image
To place a background image to the side of the link, give the element left padding (padding-left) that is slightly greater than the width of the image.
thank you for this advice it
thank you for this advice
it does not work for me though, as I can only put the image in the anchor's background and not in the list element's background.
do you see what I mean ?
I guess your solution would be :
li style="background-image=url(image.png);"
a href="home.html" style="padding-left: 20px;" HOME /a
/li
But until now, using "menu attributes", I can only assign styles to the anchor, and so place the background image in the anchor...
so in the best case, what I get is
a href="home.html" style="background-image=url(image.png);"
Should I use another module to be able to assigne style or specific id to the "li" of my menu tree ?
If so, which one ?
Thanks again
...
The problem is your CSS is incorrect, so start there before adding modules or what not. htmldog.com and W3 schools have excellent tutorials and learning material on CSS, as does sitepoint.com.
Every menu list item has a class, use that to target the anchor, and place the styles in the stylesheet, not directly inline.
The CSS is going to look like this:
li.menu-753 a {background: url(image.png) no-repeat left center;
padding-left: 20px;
}
Where .menu-753 is the unique class for the menu list item.
Professional Drupal Design and Theme Services
Thank you Jmburnz, I guess I
Thank you Jmburnz,
I guess I did not express myself good enough, because what you suggest would put the same image next to every link.
And I need a specific image for every single link.
Here is what did the trick for me, adding a unique id to every li item.
I did it by overriding the theme_menu_item() function.
So at the end of my template.php file, I added this :
<?phpfunction mytheme_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
if (!empty($extra_class)) {
$class .= ' '. $extra_class;
}
if ($in_active_trail) {
$class .= ' active-trail';
}
#New line added to get unique ID:s for each menu item (id attribute also added to last line):
$css_id = str_replace(' ', '_', strip_tags($link));
return '<li class="'. $class .'" id="'. $css_id .'">'. $link . $menu ."</li>\n";
}
?>
Then I checked with firebug all the id names given to every "li" item and only then added the css info in my stylesheet with the proper id name. Here is an example for one link :
#__Links{
height: 20px;
background-image: url("elmts/online-extras-links.png");
background-repeat: no-repeat;
background-position: 2px;
padding-top: 8px;
}
Thank you all for helping me. I appreciated it. I hope this post will be helpful to other new drupalers like me :)
...
I thought you were using the Primary menu, not some other menu.
Please wrap your code in code tags (see input formats below the comment reply form) right now your code is useless to anyone because it is broken.
Professional Drupal Design and Theme Services
so much improving...
thank you jmburnz for your help anyway, especially with the wrapping of the code, much better...
No it might be much more useful.