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

|improve this question
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 */
}
|improve this answer
  • Thanks, but where to add that snippet? – Alexander Farber Jun 29 '11 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 '11 at 16:56
  • Do you mean themes/bartik/css/style.css (I use plain Drupal 7.2, no additional software)? – Alexander Farber Jun 29 '11 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 '11 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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