1

The main menu at my Drupal 7.2 site is represented as tabs. I wonder please, how could I add an image to one of the tabs - for example a letter-icon for the last /contact tab?

screenshot

When I look at the HTML code I see that tab as a class="menu-276 last" list item:

<div id="main-menu" class="navigation">
<h2 class="element-invisible">Основные ссылки</h2>
<ul id="main-menu-links" class="links clearfix">
<li class="menu-270 first active"><a href="/" class="active">Преферанс</a></li>
<li class="menu-300"><a href="/help">Как играть</a></li>
<li class="menu-278"><a href="/top20.php">Рейтинг</a></li>
<li class="menu-368"><a href="/forum/1">Форум</a></li>
<li class="menu-392"><a href="/etude">Этюды</a></li>
<li class="menu-276 last"><a href="/contact">Письмо админу</a></li>
</ul>
</div>

How would you be adding an image there, through editing the core Menu module or maybe there is a nicer way? (a CSS-solution would be ok too...)

Thank you! Alex

1 Answer 1

0

You could use CSS:

#main-menu-links li.menu-276 a {
  background: url(path/to/img.png) no-repeat left;
  padding-left: 16px; /* Change depending on icon size */
}
4
  • Thanks, but where to add that snippet? Jun 29, 2011 at 16:53
  • @Alex In your theme's CSS file, a CSS file that is included in all pages of your site
    – Laxman13
    Jun 29, 2011 at 16:56
  • Do you mean themes/bartik/css/style.css (I use plain Drupal 7.2, no additional software)? Jun 29, 2011 at 17:44
  • Yes you can put it there, but if you update, you can lose your changes. Best way to make custom changes is to make a sub-theme, but either way works.
    – Laxman13
    Jun 29, 2011 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.