By tmp on

Hey All,

I'm having some problems with my theme.

My primary links are setup like this: http://cordoba.sohosted.com/drupal_images/primary_links.gif
This will display like this : http://cordoba.sohosted.com/drupal_images/primary_links_layout_1.gif . So far no problems. :-)

But the second level of the primary links will display like this : http://cordoba.sohosted.com/drupal_images/primary_links_layout_2.gif but should be displaying like this (Photoshopped) image: http://cordoba.sohosted.com/drupal_images/primary_links_layout_3.gif

As you can see the second level of the primary links are taking the same formatting of the first level of the primary links.

How can I make this work ?

This is the code for the primary links in the template.php :

function mytheme_primary($items = array()) {
  $url = 'http';
  if ($_SERVER['HTTPS']=='on')
    $url .=  's';
  $url .=  '://';
  if ($_SERVER['SERVER_PORT']!='80')
    $url .=  $_SERVER['HTTP_HOST'].':'.$_SERVER['SERVER_PORT'].base_path();
  else
    $url .=  $_SERVER['HTTP_HOST'].base_path();
  if ($_SERVER['QUERY_STRING']>' ')
    $url .=  '?'.$_SERVER['QUERY_STRING'];

  $output = '<ul id="nav">';
  if (!empty($items)) {
    foreach ($items as $item) {
      preg_match("/<a\s*.*?href\s*=\s*['\"]([^\"'>]*).*?>(.*?)<\/a>/i", $item, $matches);
      if ($url == $matches[1]) {
	    $output .= '<li class="on">'. $item .'</li>';
      } else {
        $output .= '<li>'. $item .'</li>';
      }
    }
  }
  $output .= '</ul>';
  return $output;
}
⋅ Categories: Drupal 4.7.x

Comments

markdingemanse’s picture

markdingemanse commented

You have posted a snippet from your template.php, but to do what you want, you will need to make changes in page.tpl.php and/or style.css. The code you give above just renders a list of links to pass them on to your theme. Your theme (i.e. in page.tpl.php and possibly other templates) controls how and where the primary and secondary links are displayed.

If you post the chunks of code from page.tpl.php which concern $primary_links and $secondary_links then we can see in which divs they are put and which CSS-styles are applied to them. If we know that, we can probably explain how to style so that they look like your third example.

Hope this helps!

tmp’s picture

tmp commented

Some code out of page.tpl.php :

  <div id="tabarea">	
  <!-- Primary Links START -->
  <!-- Print Drupal Primary Links -->
   <?php print theme('primary', $primary_links) ?> 
   <?php print theme('secondary', $secondary_links) ?> 
  <!-- Primary Links END -->
  </div>

HTML output :

  <div id="tabarea">	
  <!-- Print Drupal Primary Links -->
	<ul id="nav">
           <li><a href="/drupal-4.7.3/?q=frontpage" title="">Start</a></li>
           <li><a href="/drupal-4.7.3/?q=Heren_1" title="" class="active">Heren</a></li>
          <li><a href="/drupal-4.7.3/?q=wedstrijden" title="">Wedstrijden</a></li>
          <li><a href="/drupal-4.7.3/?q=kalender" title="">Kalender</a></li>
          <li><a href="/drupal-4.7.3/?q=leden" title="">Leden</a></li>
        </ul> 

	<ul id="nav">
          <li><a href="/drupal-4.7.3/?q=Heren_1" title="" class="active">Heren 1</a></li>
          <li><a href="/drupal-4.7.3/?q=Heren_2" title="">Heren 2</a></li>
        </ul> 
  <!-- Primary Links END -->
  </div>
<!-- Tab Area END -->
markdingemanse’s picture

markdingemanse commented

As you see, the code you posted earlier (from template.php) just spits out some links embedded in an unordered list. Accordingly, that is what you see in your HTML output.

What you need to do is adjust page.tpl.php so as to give your style.css a way to treat primary_links and secondary_links differently. If you change the snippet you posted to the following:

<div id="tabarea">
	<div id="primarylinks">
		<?php print theme('primary', $primary_links) ?>
	</div>
	<div id="secondarylinks">
		<?php print theme('secondary', $secondary_links) ?>
	</div>
</div>

The primary and secondary links are put in two separate div elements, one of which has the id "primarylinks" and the other of which is called "secondarylinks". Now you have identified them as two distinct elements, and you can go on to your theme's style.css to give the second one a different style. Note that you have used a non-standard font in your third (photoshopped) example; if you really want to use that font you're going to have to use some fairly complex techniques to make sure every visitor sees the same thing. Some examples of CSS just to get you on the way:

#secondarylinks {
	height:18px;
	background-color:#0f253e;
}
#secondarylinks ul.nav li {
	background-image:none;
}
#secondarylinks ul.nav li a {
	color:#fff
}
#secondarylinks ul.nav li a:hover {
	text-decoration:underline;
}

The first CSS declaration says the div#secondarylinks should be 18px high and have a dark blue background-color. The second one talks to the list-items in the list in that div and sets their background-image to none. The third one gives the links in the list-items in the list in that div a white color. The fourth one says that these links should be underlined when one hovers over them.

Hope this helps! Some topics for further reading: http://drupal.org/node/57823, http://drupal.org/node/63601, http://drupal.org/node/44711.

tmp’s picture

tmp commented

Thanks,

I'll give it a go this afternoon.