By Anonymous (not verified) on

Hi!

I'm looking for a way to create same tabs as in the Bluebeach theme (this one on the Drupal website)

The classic html display of the tabs is like that for primary links

<li><a href="/tracker" >all recent posts</a></li>

I'd like to know where to specify two span divs before and after the text, like that :
<li><a href="/tracker" ><span class="a"><span class="b">all recent posts</span></span></a></li>

In that way, I could use graphic tabs with a rollover effect.

Thank you for reading this.
I hope you can help me ;)

Matt

⋅ Categories: Drupal 4.6.x

Comments

gabriella’s picture

gabriella commented

Perhaps you should take a look in the Theme developers guide
"Basic instructions for adding graphic tabs to your Drupal theme" > http://drupal.org/node/31704
(based on the Sliding Doors Technique)

bjornarneson’s picture

bjornarneson commented

In your template.php file, override the following function from includes/menu.inc to customize the local task menu tabs. 

/**
 * Generate the HTML representing a given menu item ID as a tab.
 *
 * @param $mid
 *   The menu ID to render.
 * @param $active
 *   Whether this tab or a subtab is the active menu item.
 * @param $primary
 *   Whether this tab is a primary tab or a subtab.
 *
 * @ingroup themeable
 */
function theme_menu_local_task($mid, $active, $primary) {
  if ($active) {
    return '<li class="active">'. menu_item_link($mid) ."</li>\n";
  }
  else {
    return '<li>'. menu_item_link($mid) ."</li>\n";
  }
}

EDIT:

Well, it may not be so easy. The extra <span> elements are inside the <a> element, so I think you need to override a deeper function. I have no idea where to go from here, but I think it might have to do with this function in menu.inc:

/**
 * Generate the HTML representing a given menu item ID.
 *
 * @param $item
 *   The menu item to render.
 * @param $link_item
 *   The menu item which should be used to find the correct path.
 *
 * @ingroup themeable
 */
function theme_menu_item_link($item, $link_item) {
  return l($item['title'], $link_item['path'], isset($item['description']) ? array('title' => $item['description']) : array());
}
bjornarneson’s picture

bjornarneson commented

UNTESTED:

function phptemplate_menu_item_link($item, $link_item) {
  return l("<span class=\"a\"><span class=\"b\">" . $item['title'] . "</span></span>", $link_item['path'], isset($item['description']) ? array('title' => $item['description']) : array());
}

Just add the extra span elements to the first argument of the l() function?

Anonymous’s picture

Anonymous (not verified) commented

Thanks Bjornarneson for your answers, really nice. I'll test the code today and I'll tell you on this forum if it works :)

It should be something like the last snippet :)

Thanks again

Matt

Anonymous’s picture

Anonymous (not verified) commented

Hi!
The snippet doesn't work but, I think we're not far :)

This one actually displays the classes on the page

like that
<span class="a"><span class="b">Blogs</span></span>

The code is like that

<li class="leaf"><a href="/blog" title="blogs, Forums, Chat etc...">&lt;span class=&quot;a&quot;&gt;&lt;span class=&quot;b&quot;&gt;Blogs&lt;/span&gt;&lt;/span&gt;</a></li>

:D

I still have no idea on how to do becaus e I don't know Php, but I'll keep on playing with that...

Sebastiaan Brozius’s picture

Sebastiaan Brozius commented

Add the following code to your template.php-file:

function l_enh($text, $path, $attributes = array(), $query = NULL, $fragment = NULL, $absolute = FALSE, $html = FALSE) {
  if ($path == $_GET['q']) {
    if (isset($attributes['class'])) {
      $attributes['class'] .= ' active';
    }
    else {
      $attributes['class'] = 'active';
    }
  }
  return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'><span>'. ($html ? $text : check_plain($text)) .'</span></a>';
}

function phptemplate_menu_item_link($item, $link_item) {
  return l_enh($item['title'], $link_item['path'], isset($item['description']) ? array('title' => $item['description']) : array());
}

Works in my case...

Anonymous’s picture

Anonymous (not verified) commented

Thanks a lot ;) It works in my case too.... :)