By parry.luke on

I am having problems trying to create different styled tabs, which you probably see say when you want to edit an article, or login / register on this forum. The only example I have seen of this working is on the drupal.org website:

ul class="tabs primary">
<li><a href="/user"><span class="a"><span class="b">log in</span></span></a></li>
<li class="active"><a href="/user/register" class="active"><span class="a"><span class="b">register</span></span></a></li>
<li><a href="/user/password"><span class="a"><span class="b">request new password</span></span></a></li>
</ul>

that is the code, they use and similar to a design I am porting the span wraps around the text for the hyperlink. This isn't possible because Drupal's API goes to far, and I am struggling to find where I can insert them like this. Does anyone know a method or the location where the can be wrapped around the text displayed for the hyperlink in the tabs?

thanks Luke Parry

⋅ Categories: Drupal 5.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

This will wrap the anchor in spans, the difference being that in the drupal example the spans are inside the anchor, however this still gives you a lot of selectors to style the tabs, just use the .tabs selector to target your styles at the tabs.

First, put this in your template.php file

//tabs override  - you can replace phptemplate_ with mytheme_ i.e mytheme_menu_local_task
function phptemplate_menu_local_task($mid, $active, $primary) {
  if ($active) {
    return '<li class="active"><span class="a"><span class="b">'. menu_item_link($mid) ."</span></span></li>\n";
  }
  else {
    return '<li><span class="a"><span class="b">'. menu_item_link($mid) ."</span></span></li>\n";
  }
}

your css might look something like this

.tabs span.a a {color:black;}

There may be a better way of doing this, love to hear some other suggestions. I am rather new to drupal so I am still learning to.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
monkeybeach’s picture

monkeybeach commented

Not based on the active tab, but what that tab is?

I want to use icons for edit and view so I either need to replace the link text with image html or add a class to each one to hook a background image under the link in CSS.

Firebug tells me the standard code has no CSS hooks except the active class attribute:

<ul class="tabs primary">
<li class="active">
<a class="active" href="/about-us">View</a>
</li>
<li>
<a href="/node/1/edit">Edit</a>
</li>
</ul>

Any help on this much appreciated. I've been looking for a way to do this for almost a full day of work now which seems ridiculous for such a simple requirement! :)

What I actually need is something like this:

<ul class="tabs primary">
<li class="active">
<a id ="view" class="active" href="/about-us">View</a>
</li>
<li>
<a id="edit" href="/node/1/edit">Edit</a>
</li>
</ul>

Or alternatively:

<ul class="tabs primary">
<li class="active">
<a class="active" href="/about-us"><img src="view.jpg" ... etc ... /></a>
</li>
<li>
<a href="/node/1/edit"><img src="edit.jpg" ... etc ... /></a>
</li>
</ul>
ojay’s picture

ojay commented

Hi,

I'm trying to do something very similar but instead of wrapping the tabs menu in spans i want to wrap a custom menu in spans...

i'm not the greatest PHP coder by a long way but i'm presuming i need to edit these: ($mid, $active, $primary) to reflect my custom menu... the thing is, i haven't got a clue how!

if someone could let me know if i'm going down the right path or offer advice, i'd be very greatful.

thanks,

Mark

artycul’s picture

artycul commented

i'm referring to the first post here ;)

i know that your post was nearly a year ago, but maybe someone else needs it, too... i was standing in front of the same problem as you, i wanted to style the "view/edit/clone"-tabs with a css rollover image. with the help of this post, i have been able to override the template.php like this:

 function phptemplate_menu_local_task($mid, $active, $primary) {
     // Get menu link as array.
        $menu_item = menu_item_link($mid, FALSE);
     // characters to clean for classes. Add as many as needed. regex may be overkill.
        $clean = array(' ', '_');
     // keep lowercase. create classes from title.
        $class = strtolower(str_replace($clean, '-', $menu_item['title']));
     // get active state.
        $class .= $active ? ' active' : '';
  
     return "<li class=\"$class\"><a href=\"" . $GLOBALS['base_path'] . $menu_item['href']. "\"><span class=\"a\"><span class=\"b\">" . $menu_item['title'] . "</span></span></a></li>\n";
}

this renders the span-tags inside the link-tags... i think this is what you asked for?

the rendered source then looks like this (recognize the title of the tab being handed over as class):

<ul class="tabs primary">
<li class="anzeigen active"><a href="news_all/"><span class="a"><span class="b">Anzeigen</span></span></a></li>
<li class="bearbeiten"><a href="news_all/edit"><span class="a"><span class="b">Bearbeiten</span></span></a></li>
</ul>

hope this was helpful at all ;)

...sebi

Makea’s picture

Makea commented

This is exactly what I'm looking for!

However, the active class doesn't work. It seems that the $active variable that is passed is null.

Please help!