0

I would like to add a little icon before the tab item 'Edit'. Firebug shows that the default code looks like this:

<ul class="tabs-primary tabs primary">
  <li class="tabs-primary__tab">
    <a href="/MY_SITE/node/%/edit" class="tabs-primary__tab-link">Edit</a>
  </li>
</ul>

My idea is to add a span before the <a>...</a>:

<ul class="tabs-primary tabs primary">
  <li class="tabs-primary__tab">
    <span class="edit"></span>
    <a href="/MY_SITE/node/%/edit" class="tabs-primary__tab-link">Edit</a>
  </li>
</ul>

where the edit class has the underneath CSS.

.edit {
    background-image: url("MY_IMAGE.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    padding-right: 2px;
    vertical-align: middle;
    width: 16px;
}

Adding the <span> directly with Firebug gives the wanted result, but I don't know how to do this in a template or with a function. What is the correct way to achieve this?

2
  • 1
    Don't agree with the close vote on this. The question is perfectly on-topic. Just because it can be solved in a non-Drupal way doesn't disqualify it. – mpdonadio Jun 27 '15 at 21:42
  • 1
    To add to what @MPD said, the question says also "I don't know how to do this in a template or with a function." The answer should point out which hook should be used, and this makes the question perfectly acceptable. – kiamlaluno Jun 29 '15 at 5:28
2

Instead of adding a <span> element, you could also use the ::before CSS selector. If a combination with :first-child or :nth-child() is not helpful, most likely you have to implement hook_menu_local_tasks_alter() and add a specific class to the desired link(s) (you can add them through attributes in localized_options of the #link property, see https://api.drupal.org/comment/25393#comment-25393) and then you could use the ::before selector. Or you could implement/overwrite theme_menu_local_task() (probably in combination with a theme preprocess or the earlier mentioned alter function) to add your <span> element.

4
  • I suppose you mean that I can use the class tabs-primary__tab. But what if there will be several tabs? I don't want to display the same icon in front of all the tabs. – Jeroen Jun 26 '15 at 22:45
  • Is :first-child, in combination with ::before, a solution for you (w3schools.com/cssref/sel_firstchild.asp)? – Watergate Jun 26 '15 at 22:49
  • I don't think so either, because by default the first child of the tabs is the View tab, which I've hidden (using drupal.stackexchange.com/a/77964/16550). – Jeroen Jun 26 '15 at 22:54
  • 3
    Ok, if :first-child or :nth-child() are not helpful, most likely you have to implement hook_menu_local_tasks_alter() and add a specific class to the desired link(s) (if I'm not mistaken you can add them through attributes in localized_options of the #link property) and then you could use the ::before selector. Or you could implement/overwrite theme_menu_local_task (probably in combination with a theme preprocess or the earlier mentioned alter function) to add your <span> element. – Watergate Jun 26 '15 at 23:35
2

You can paste code below in your theme file template.php and clear cache

function [yourtheme]_menu_local_task($variables) {
  $link = $variables ['element']['#link'];
  $link_text = $link ['title'];

  if (!empty($variables ['element']['#active'])) {
    // Add text to indicate active tab for non-visual users.
    $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';

    // If the link does not contain HTML already, check_plain() it now.
    // After we set 'html'=TRUE the link will not be sanitized by l().
    if (empty($link ['localized_options']['html'])) {
      $link ['title'] = check_plain($link ['title']);
    }
    $link ['localized_options']['html'] = TRUE;
    $link_text = t('!local-task-title!active', array('!local-task-title' => $link ['title'], '!active' => $active));
  }

  return '<li' . (!empty($variables ['element']['#active']) ? ' class="active"' : '') . '><span class="edit"></span>' . l($link_text, $link ['href'], $link ['localized_options']) . "</li>\n";
}

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.