By noraa on

I posted earilier, but perhaps was not clear. I have successfully made my primary links horizontal tabs with images. My css has button_normal.png, button_over.png, and button_current.png. The normal and over are working, but I cannot get the current to show up. I can do it in straight html, but can't get the page.tpl.php file. I cannot seem to get my css code to show up here, so if anyone is willing to help I can email that to them. The id that includes the current button has ids #navcontainer #current and then #navcontainer .currentAncestor

⋅ Categories: Drupal 4.7.x

Comments

markhope’s picture

markhope commented

How are you setting the code for #current ?

Drupal assigns a class of .active to the currently selected link. you should try and use this for selecting in css.

I use a slightly different approach to highlighting my current primary link, depending on which section of the site the user is on.

See:
http://drupal.org/node/44704#comment-149460
http://drupal.org/node/44704#comment-151935

Try posting your code again. Are you wrapping it with the code tag when posting?
<code>

</code>

noraa’s picture

noraa commented

Thanks. It actually worked for the first primary link when I changed the .currentAncestor to .active, but two and three are still not showing up. I did wrap the code in the tags last time. I'll try one more time. The original code is below. I've become to understand, with drupal, it's baby steps one by one. I'm excited that that first link works though. Thanks again.


#navcontainer {
margin-right: auto;
margin-left: auto;
width: 680px;
position: relative;
height: 10px;
font-size: 0.8em;
}

#navcontainer #current {
background: no-repeat url(images/button_current.png);
text-shadow: none;
}

#navcontainer .currentAncestor {
background: no-repeat url(images/button_current.png);
text-shadow: none;
}

/* Parent - Level 0 */

#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 680px;
left: 0;
}

#navcontainer li {
display: inline;
float: left;
}

#navcontainer a{
width: 113px;
height: 34px;
display: block;
background: no-repeat url(images/button_normal.png);
text-decoration: none;
padding-top: 11px;
color: #3c3c3c;
text-shadow: 0px 1px 0px #ffffff;
text-align: center;
}

#navcontainer a:hover {
background: url(images/button_over.png) no-repeat;
text-shadow: none;
}

#navcontainer a:active {
background: url(images/button_over.png) no-repeat;
text-shadow: none;

}

/* Child - Level 1 */

#navcontainer ul ul {
position: absolute;
left: 0;
top: 32px;
width: inherit;
font-size: 0.99em;
}

#navcontainer ul ul li {
}

#navcontainer ul ul a {
background: none;
padding-top: 1px;
width: 9em;
}

#navcontainer ul ul a:hover{
background: repeat-x url(images/submenu_over.png) center top;
}

#navcontainer ul ul #current{
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}

#navcontainer ul ul .currentAncestor {
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}

/* Child - Level 2 */

#navcontainer ul ul ul {
position: absolute;
left: 10px;
top: 20px;
width: inherit;
margin: 0;
white-space: nowrap;
padding: 0px 0px 0px 10px;
}

#navcontainer ul ul ul li {
}

#navcontainer ul ul ul li a {
color: #121212;
text-shadow: none;
}

#navcontainer ul ul ul li a:hover {
text-decoration: none;
background: none;
}

#navcontainer ul ul ul #current {
font-weight: normal;
background: none;
text-shadow: none;
}

#navcontainer ul ul ul ul {
display: none;
}

noraa’s picture

noraa commented 
<div id="navcontainer">
<ul>
					  <?php if (isset($primary_links)) { ?>
						<?php foreach ($primary_links as $link): ?>
						<li><?php print $link?></li>
						<?php endforeach; ?>
					  <?php } ?>
					  
					  <?php if (isset($secondary_links)) { ?>
						<?php foreach ($secondary_links as $link): ?>
						<li><?php print $link?></li>
						<?php endforeach; ?>
					  <?php } ?>
			</ul>
</div>
markhope’s picture

markhope commented

Where is the code outputting html with the id of #current?

try styling the active class instead

#navcontainer ul ul li a.active {
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}

Can you also post the html that your page is outputting (just the menu area). I don't want to make any assumptions but you may be applying your css incorectly, or trying to apply css to an ID that doesn't exist.

Also the css suggests that you are using drop down menus? Do you have a test site online that I can look at?

Mark

noraa’s picture

noraa commented

Oh thank you. You're being so patient. I just added that snippet without changing anything else and NOW I'm getting both first and second links working, but not the third. I don't have this on a live server yet, but think I'll make that my next task. I need to upgrade my 4.7.3 to 4.7.4 I believe. Putting drupal on my live server always gives me anxiety attacks. I fear inviting the entire world into my bedroom (security fears). I'm just so new at this stuff. Here's the html output:

<div id="navcontainer">
<ul>
					  												<li><a href="/drupal/?q=node/1" title="">home</a></li>
												<li><a href="/drupal/?q=node/2" title="">gallery</a></li>
												<li><a href="/drupal/?q=node/4" title="">forums</a></li>
											  					  
					  			</ul>

I'll get back with you when I have a live link. Thanks and wish me luck!

markhope’s picture

markhope commented

Looking at the Nav example you have posted, I can't see where your #current id is. Clicking on a link should add a class of .active to your link. (Drupal applies this class automatically)

Have a look at this example:
http://www.clubmark.org.uk

This site ouputs the following primary links:

  <div id="top-nav">
           <ul id="primary">
              <li id="primnav1"><a href="/" title="">Home</a></li>
              <li id="primnav2"><a href="/about/about-clubmark" title="" class="active">About Clubmark</a></li>
              <li id="primnav3"><a href="/benefits" title="">Benefits</a></li>
              <li id="primnav4"><a href="/news" title="">News</a></li>
              <li id="primnav5"><a href="/clubmark-resources" title="">Resources</a></li>
            </ul>
</div>

This is achieved with the following code that applies an id to each link.

<?php if (isset($primary_links)): ?>
      <ul id="primary">
      <?php 
      $i=1;
      foreach ($primary_links as $link): ?>
        <li id="primnav<?php print t($i) ?>"><?php print $link?></li>
      <?php 
      $i++;
      endforeach; ?>
      </ul>
    <?php endif; ?>

Clicking on each primary link adds a new class and ID to the body tag. This is achieved by replacing the body tag in page.tpl.php with the following.

<?php
/**
*  This snippet creates a <body> class and id for each page.
*
* - Class names are general, applying to a whole section of documents (e.g. admin or ).
* - Id names are unique, applying to a single page.
*/
// Remove any leading and trailing slashes.
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
// Split up the remaining URI into an array, using '/' as delimiter.
$uri_parts = explode('/', $uri_path);

// If the first part is empty, label both id and class 'main'.
if ($uri_parts[0] == '') {
    $body_id = 'main';
    $body_class = 'main';
}
else {
    // Construct the id name from the full URI, replacing slashes with dashes.
    $body_id = str_replace('/','-', $uri_path);
    // Construct the class name from the first part of the URI only.
    $body_class = $uri_parts[0];
}
/**
* Add prefixes to create a kind of protective namepace to prevent possible
* conflict with other css selectors.
*
* - Prefix body ids with "page-"(since we use them to target a specific page).
* - Prefix body classes with "section-"(since we use them to target a whole sections).
*/
$body_id = 'page-'.$body_id;
$body_class = 'section-'.$body_class;
print "<body class=\"$body_class\" id=\"$body_id\"";
print theme('onload_attribute');
print ">";
?>

The code produces the following style of body tag (for a url starting with of /about/)...

<body class="section-about" id="page-about-about-clubmark">

By using the body class as a selector for items within it you can then target each nav item with css.

ul#primary {
	margin: 0;
}

#top-nav {
  margin: 0;
  width: 780px;
}

#top-nav ul#primary
{
  padding-left: 0;
  margin-left: 0;
  background-color: #003596;
  color: #fff;
  float: left;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
}

#top-nav ul#primary li { 
  display: inline;
  /*background: #003596 url('navdivider.gif') repeat-y right;*/
  font-size: 0.8em;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
	}

#top-nav ul#primary li a {
  padding: 0.5em 1em 0.2em 1em;
  background: #003596 url(navdivider.gif) repeat-y right;
  color: #fff;
  text-decoration: none;
  float: left;
  border-right: 0px solid #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

#top-nav ul#primary li a:hover {
  background-color: #00AEEF; /* cyan rollover */
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.section-about #top-nav ul#primary li#primnav2 a,
.section-benefits #top-nav ul#primary li#primnav3 a,
.section-news #top-nav ul#primary li#primnav4 a,
.section-resources #top-nav ul#primary li#primnav5 a,
.section-members-area #top-nav ul#primary li#primnav6 a,
.section-another #top-nav ul#primary li#primnav7 a {
background-color: #00AEEF; /* cyan highlight */
}

the last block of css works in the following way...
take css .section-about #top-nav ul#primary li#primnav2 a

working backwards - style the link (a) within the list item with the ID of primnav2, within the (ul) with the ID of primary, within the div with ID of top-nav.
finally only apply this when the body has a class of ".section-about"
As .section-about will only be applied to the page with a url of /about, the about link (#primnav2) will only appear highlighted within this site section.

Hope this example helps you achieve what you are looking to do. If you do get a live version posted I'll take a look at it.
Mark

noraa’s picture

noraa commented

Wow, still trying to digest this, but I got my site up. It's at www.lifeonilife.com
No content, but it's up. I'm taking this post and studying it now. Thanks for all your help. You're a real gem.

markhope’s picture

markhope commented

One more thing...

Try enabling 'clean url's' if you are following the approach above. (under general settings)
This would allow you to use 'gallery' and 'forums' under the path alias. (instead of ?q=node/2)

This would then give you urls of:
http://www.lifeonilife.com/gallery
http://www.lifeonilife.com/forums

you could then apply the css

#top-nav ul#primary li a:hover {
  background-color: #00AEEF; /* cyan rollover  or whatever style you want*/
}

.section-main #top-nav ul#primary li#primnav2 a,
.section-gallery #top-nav ul#primary li#primnav2 a,
.section-forums #top-nav ul#primary li#primnav3 a {
background-color: #00AEEF; /* cyan rollover  or whatever style you want - always remain highlighted for the section*/
}

Nearly there!

noraa’s picture

noraa commented

Let me start by saying that your help has just amazed me. However, it has prompted a trip to the library for a php book as I just don't understand what's going on enough. I did open the drupal.css file under the misc folder and found some of the primary link ids there. Should I be fiddling with that file or should all this go into the style.css? As you can see, I've not digested all this yet. 1:00am this morning was my brain's limit, and of course, there's all that "normal life" stuff that keeps getting in the way. But you have given enough direction for me to get a grasp on this. Stay tuned, I am confident I'll get this. And then after I get the current button working I want to get that strip of background underneath to change as well. But that's another goal all together. I'm concentrating on the buttons first. Learning is fun when you have a good mentor. Thanks so much again. I used the bluemarine theme to fashion this from, but last nite I noticed that the pushbutton theme seems to have more of the primary link properties that I'm looking for. Anyway, off to the library now.

markhope’s picture

markhope commented

Best not to customise drupal.css as it could cause problems when updating. If you have something in drupal.css that you need to change, just copy it into style.css as it will overide drupal.css.

Customising an existing theme is probably a good way for you to go. You can always make a backup of the style.css file, delete the contents of style.css and then re-introduce blocks of css saving and previewing the site as you go. This will give you a better understanding of how the theme works.

Also try using Firefox with the web developer extension (if you're not already) It has some really handy features like "view style information" that displays the css rules for specific items on a page, just by clicking on them.

noraa’s picture

noraa commented

Hi Markhope,
You do give me hope, but I'm totally stumped by now. I admit that I just do not know enough about this stuff to make sense of it. I am learning a lot as I go though. I have been using Firefox's features. Really good. My page.tpl.php is back to its orignal state. I'll try and recount how I got this far without knowing much. I got my theme idea from Rapidweaver's aqualicious theme. A sample page is at www.memoryflix.info. That's unretouched, uploaded straight from their publishing tool. I then watched dudertown.com's tutorial on custom themes. I copied Drupal's Bluemarine theme for their tutorial and named it aqua. So the style.css and page.tpl.php are originally from Bluemarine. I've tried to keep the naming conventions the same as Rapidweaver's. Eventually, I'd like to have the submenu graphic change colors along with each current tab, i.e., blue with a blue submenu strip, purple with a purple submenu strip. But that is just on the wish list right now. I'm assuming in the end my secondary links can show up in that submenu strip. My current state drupal site is at www.lifeonilife.com. Again, thanks for all your help. I'm sorry to say that your post with all the body changing, etc. just went over my head.

Here's the css from Rapidweaver unretouched:

/* Toolbar Styles */

#navcontainer {
margin-right: auto;
margin-left: auto;
width: 680px;
position: relative;
height: 10px;
font-size: 0.8em;
}

#navcontainer #current {
background: no-repeat url(images/button_current.png);
text-shadow: none;
}

#navcontainer .currentAncestor {
background: no-repeat url(images/button_current.png);
text-shadow: none;
}

/* Parent - Level 0 */

#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 680px;
left: 0;
}

#navcontainer li {
display: inline;
float: left;
}

#navcontainer a{
width: 113px;
height: 34px;
display: block;
background: no-repeat url(images/button_normal.png);
text-decoration: none;
padding-top: 11px;
color: #3c3c3c;
text-shadow: 0px 1px 0px #ffffff;
text-align: center;
}

#navcontainer a:hover {
background: url(images/button_over.png) no-repeat;
text-shadow: none;
}

#navcontainer a:active {

}

/* Child - Level 1 */

#navcontainer ul ul {
position: absolute;
left: 0;
top: 32px;
width: inherit;
font-size: 0.99em;
}

#navcontainer ul ul li {
}

#navcontainer ul ul a {
background: none;
padding-top: 1px;
width: 9em;
}

#navcontainer ul ul a:hover{
background: repeat-x url(images/submenu_over.png) center top;
}

#navcontainer ul ul #current{
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}

#navcontainer ul ul .currentAncestor {
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}

/* Child - Level 2 */

#navcontainer ul ul ul {
position: absolute;
left: 10px;
top: 20px;
width: inherit;
margin: 0;
white-space: nowrap;
padding: 0px 0px 0px 10px;
}

#navcontainer ul ul ul li {
}

#navcontainer ul ul ul li a {
color: #121212;
text-shadow: none;
}

#navcontainer ul ul ul li a:hover {
text-decoration: none;
background: none;
}

#navcontainer ul ul ul #current {
font-weight: normal;
background: none;
text-shadow: none;
}

#navcontainer ul ul ul ul {
display: none;
}

noraa’s picture

noraa commented 
<div id="navcontainer">
<ul>
					  <?php if (isset($primary_links)) { ?>
						<?php foreach ($primary_links as $link): ?>
						<li><?php print $link?></li>
						<?php endforeach; ?>
					  <?php } ?>
					  
					  <?php if (isset($secondary_links)) { ?>
						<?php foreach ($secondary_links as $link): ?>
						<li><?php print $link?></li>
						<?php endforeach; ?>
					  <?php } ?>
			</ul>
</div>
noraa’s picture

noraa commented

Eureka!!! Finally got everything where it's supposed to be for the current tab to show up properly. Thanks for all your help. Now to get the current tab and submenu strip to change colors. Someday I might even get to the point of adding content to this bad boy!

markhope’s picture

markhope commented

Glad you are now getting somewhere, and hope it was worth persevering with.

I think the rapidweaver css was causing some confusion. the #current is an ID and the .currentAncestor is a class meaning you'd need that code in your outputted html. If it isn't in your template then the CSS wont be applied. (but then you probably now know that).

Mark