By ckclarke on

Hello everyone,

I'm attempting to implement graphical tabs for my primary links in a customized theme. I'm using the lastest 4.7 beta, and working off a copy of bluemarine, doing incremental changes to the CSS to achieve what I want.

I have already reviewed:

http://drupal.org/node/31704

But I've run into a couple of problems:

1. The page.tpl.php code it refers to [ if (count($primary_links)) ... etc] that you need to swap out to differentiate the active tab appears to have disappeared from the latest incarnation of the bluemarine theme. Where has this gone?

2. As a starting point for customization, I've copied in the css code at the node referenced above into my stylesheet, and I'm using the the tab graphics from http://www.alistapart.com/articles/slidingdoors. You can see the results here: http://www.whatdoesthatmean.ca which looks absolutely nothing like http://www.alistapart.com/d/slidingdoors/v1/v1.html.

At this point I'm not sure if that's failed because I've been unable to implement the PHP code change that's shown, or for another reason.

3. I'm also not clear, because the documentation hasn't been updated (I don't think - couldn't find it anyway) as to whether I need to download and install a theme engine separately if I'm using 4.7. I gathered from http://drupal.org/drupal-4.7.0-beta that PHP was the default engine and was incorporated into the Drupal core code, but obviously I could be mistaken about that.

Any help that will get me closer to my graphical tabs will be welcome. :)

Chandra

⋅ Categories: Drupal 4.7.x

Comments

sepeck’s picture

sepeck commented

1. How the primary and secondary links are handled has changed in 4.7, see blue marine for example code now. Control of this has been moved to the menu module so let's hope that menu module has active code.

2. haven't tried it yet or looked into it, so it's not surprising that it doesn't work. When someone figures it out, hopefully they'll add a page. As we added versioning to the handbook recently, I've tagged that specific page for 4.6 for future reference. Unfortunatly I don't have time right now to really dig into it, so hopefully someone else will wander by who can.

3. There isn't much on theming yet for 4.7. There is a page with some information on updating theme's, but it's not nearly ready at this point http://drupal.org/node/25297. By browsing th etheme\engine directory, you can see the engine included with a default Drupal install 4.7. That will be phptemplate

-sp
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

rosenblum68’s picture

rosenblum68 commented

This isn't a full solution, but I decided to just hard-code a menu for now, i havn't added the rollover functionality yet. Nor even graphically designed the buttons. You can see results at http://www.bikthehub.org/nehwi.

Here is the code a added to the page.tpl.php file for pushbutton theme in 4.7BETA:

<table><tr><td>
<img name="menu" src="/themes/pushbutton/menu.gif" width="750" height="30" border="0" usemap="#m_menu" alt=""><map name="m_menu">
<area shape="rect" coords="637,0,741,30" href="/node/11" alt="" >
<area shape="rect" coords="530,0,634,30" href="/node/14" alt="" >
<area shape="rect" coords="425,0,529,30" href="/node/12" alt="" >
<area shape="rect" coords="318,0,422,30" href="/node/5" alt="" >
<area shape="rect" coords="211,0,315,30" href="/node/10" alt="" >
<area shape="rect" coords="107,0,211,30" href="/node/9" alt="" >
<area shape="rect" coords="0,0,104,30" href="/front_page" alt="" >
</map>
</td></tr></table>

I put the above code right after the close of the table labeled, "primary-menu".

Hope that helps.

bomarmonk’s picture

bomarmonk commented

I'll wait for a real fix... anyone? Marking this message so that I can follow updates more easily.

colorado’s picture

colorado commented

http://www.bikethehub.org/nehwi will get you to the link posted just above.

grohk’s picture

grohk commented

But there is an easy way to get a <ul> out of the new Menu based Primary and Secondary links. Use this in your theme to generate an unordered list -- theme('menu_links', $primary_links)

see the documentation here:
http://drupaldocs.org/api/head/function/theme_menu_links

and here:
http://drupaldocs.org/api/head/function/theme

I am still playing with it, but it should do what you desire.

---
Code0range: Drink Your Juice

grohk’s picture

grohk commented

Just to clarify my previous comment, theme('menu_links', $links) does return which item is "active" by tagging it with the class="active". You should be able to use this to get what you want.

One problem I found is that it looks like there is no way to override the <ul> class output of this function. As it stands the function outputs <ul class=\"links-$level\"> which does not help with themeing primary and secondary links. Also, overriding this would do so for all the menu links too. To get around issue this I wrote a new function based off theme_menu_links and placed it in my template.php file:

/**
 * Make a nice navigation <ul>
 */

function theme_nav_links($links, $id) {
  if (!count($links)) {
    return '';
  }
  $output = "<ul id=\"$id\">\n";
  foreach ($links as $index => $link) {
    $output .= '<li';
    if (stristr($index, 'active')) {
      $output .= ' class="active"';
    }
    $output .= ">$link</li>\n";
  }
  $output .= '</ul>';

  return $output;
}

calling this in my page.tpl.php file like so:
print theme_nav_links($primary_links, 'main-nav');

Will print out html like this when a link is active:

<ul id="main-nav">
<li><a href="/node" title="Front Page">Front Page</a></li>
<li class="active"><a href="/blogs" title="Blog Ghetto" class="active">Blogs</a></li>
<li><a href="/sections" title="Sections">Sections</a></li>
<li><a href="/topics" title="Topics">Topics</a></li>

<li><a href="/tags" title="Tags">Tags</a></li>
</ul>

Hope this helps, and maybe someone will offer up an improved way of doing this.

---
Code0range: Drink Your Juice

mintLuff’s picture

mintLuff commented

delete

ckclarke’s picture

ckclarke commented

The trick to changing the way links are output as html is to add to the php-template functions for your particular theme, by creating a new file /themes/mytheme/template.php:

<?php
/**
 * Catch the phptemplate_links function
 */
function phptemplate_links($items = array()) {
  if (!count($items)) {
    return '';
  }
//  $output = '<ul id="primary">';
  $output = '<ul>';
  foreach ($items as $link) {
    $output .= '<li';
    if (stristr($link, 'active')) {
      $output .= ' id="current"';
    }
    $output .= '>'. $link . '</li>';
  }
  $output .= '</ul>';
  return $output;
}
?>

I used the CSS from here to complete the job:

http://drupal.org/node/31704

However, it was necessary to change the image urls in the CSS to absolute urls to make it work, for example: url("/images/bg.gif") instead of url("images/bg.gif")

----
www.whatdoesthatmean.com

ckclarke’s picture

ckclarke commented

If you only want to change the one set of links to an unordered list, you can do it by hacking page.tpl.php:

<?php if (isset($primary_links)) { ?><div id="primary">
  <ul>
    <?php foreach ($primary_links as $link) { ?>
    <li<?php if (stristr($link, 'active')) print ' id="current"'; ?>><?php print $link ?></li>
    <?php } ?>
  </ul>
</div><?php } ?>

----
www.whatdoesthatmean.com

mintLuff’s picture

mintLuff commented

Thanks for sharing this snippet! It worked like a charm. I changed the first <ul> to <ul id="primary"> as you had commented out and removed the surrounding <div>, <div id="primary"> to minimize code bloat.

introfini’s picture

introfini commented

Hello,

Do you know how to prevent the image from appearing in the end of the last menu?

<?php if (count($primary_links)) : ?>
    <ul id="primary">
    <?php foreach ($primary_links as $link): ?>
      <li><?php print $link?></li>

      <img src="/drupal4.7/themes/box_grey/menu_sepa.jpg" name="separador" width="1" height="30" id="separador" />

    <?php endforeach; ?>
    </ul>
  <?php endif; ?>

José Fernandes
Bloomidea