By Sougent on

Hi,

I've all but figured out how to do fancy tabs for my primary links except for one thing. I am using 2 tab images, left.gif and right.gif, which combined form the whole tab. This is working ok, but I'm trying to use two different images for the active tab and I've only been able to get the right_on.gif to show and have yet to figure out to get the left_on.gif portion of the tab to show.

Here is the CSS code which works, can anyone give me any idea of what to try to get the left side of my "active" tab to show up along with the right_on.gif portion of the tab?

#top-nav {
  padding: 0;
  margin: 0 0 1.5em 0;
  font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}

#top-nav ul {
  margin: 0;
  padding: 2px 0 10px 0;
}


#primary { 
    border-top: solid 1px #999;
    border-bottom: solid 1px #999; 
    padding-bottom: 15px;
    vertical-align: top;
    text-align:  right;
    font-size: 1.2em;
}

#primary li {
  float: right;
  background: transparent url("images/left.gif") no-repeat left top; 
  margin: 0; 
  padding: 0 0 0 9px;
  list-style-type: none;
}

#primary li a {
  background: transparent url("images/right.gif") no-repeat right top;
  display: block;
  padding: 5px 15px 4px 6px;
  text-decoration: none;
  font-weight: bold;
  border: none;
  color: #000;
}

#primary a.hover { color: #03f; }



#primary a.active {
    float: left;
    background-image: url("images/right_on.gif") ;
    display: block;
    padding: 5px 15px 4px 6px;
    text-decoration: none;
    font-weight: bold
    border: none;
    color: green;
}


#primary a.active:hover {
    color: #03f;
}

Thanks,

Joe

Comments

Sougent’s picture

Sougent commented

Come now, not even an "it can't be done"?

No CSS guru's out there?

If someone helps me figure it out, I'll write it up and post it so it will help out anyone else who wants to know how to do it........

Joe

nevets’s picture

nevets commented

Bottom line, given the css you have it will not work. Depending on the structure of your page there may be a solution but I would need a URL to your site to figure that out.

It is also possible you may need to modify your theme somewhat to get the desired result.

Sougent’s picture

Sougent commented

Hi,

Kind of what I figured, I tried all sorts of variations trying to hit on a combination that would bring it up with the other part of the tab but couldn't find anything that worked.

However, I also know that other sites are able to implement something similar so hoped that there was something that I might have missed.

My site is just a test site, so there's not really any content but you will be able to see the tabs operate as reflected in the CSS that I posted.

It's the box_grey theme, by the way.

Here's the site.

http://www.sougent.com

Joe

Dublin Drupaller’s picture

Dublin Drupaller commented

Hi Sougent..

Can I recommend the following?

http://www.cssplay.co.uk/menus/doors.html

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

Sougent’s picture

Sougent commented

Hi,

Very nice site, explains how to do tabs nicely.

But what I don't see how to do is how to, within the Drupal context, set it up so that the active tab only has the id=current on it so the CSS will work on it.

How do I get Drupal to create the HTML so when the tab is active that list item has the id=current and the others do not?

Joe

nevets’s picture

nevets commented

Basically you have two elements that contribute to the tab images, the li and a tags. The li tag though only has one state while the a tag has two. The code that generates the list from page.tpl.php looks like

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

You code add code right before the
<li><?php print $link?></li>
that looks for the word active in $link (this works as long as one of the links does not contain the word active) and if found output <li class="active"> and otherwise just output <li> as it does now. This way you could have one rule for li and another for li.active

You could also restructure the html output using divs instead of the list but that would probably require tweeking the css also.

Sougent’s picture

Sougent commented

Hi,

I'm afraid I don't know enough php yet to know how to do as you suggest, though I do understand what to do in general I just don't have enough knowledge of proper php syntax and usage to do it at this point.

Joe

nevets’s picture

nevets commented

Here is a replacement for the section in page.tpl.php that formats the primary links. It should start at line 39 with <?php if (count($primary_links)) : ?> and the block ends with <?php endif; ?> Replace those lines with following and you will be able to add a css rule for li.active.

	<?php if (count($primary_links)) : ?>
    <ul id="primary">
    <?php 
    	foreach ($primary_links as $link) {
    		if ( stristr($link, 'active') ) {
    			$class = "class='active'";
    		}
    		else {
    			$class = '';
    		}
      	print "<li $class>:: $link ::</li>";
    	}
    ?>
    </ul>
  <?php endif; ?>
Sougent’s picture

Sougent commented

Hi,

I had to modify your code a bit, but otherwise it did the trick. And as I promised, I will write it all up and post it for future reference for those who are trying to set up tabs.

Thanks,

Joe

sepeck’s picture

sepeck commented

Post your page in the handbook...easier to find :)

-sp
---------
Drupal Best Practices Guide - My stuff Black Mountain

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

jin410’s picture

jin410 commented

i see that you got this to work on your page

can you please post the code that worked for you?
my eyes are bleeding from trying to get this to work

thanks

sepeck’s picture

sepeck commented

his style.css. The sections for #primary should be relavant

-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

jin410’s picture

jin410 commented

yah, i got it to work

it was a mistake on my part.
i was linking to the alias instead of the actuall node.

That's why none of my code was working.

Thanks

venkat-rk’s picture

venkat-rk commented

Yes, please do write it up if possible.

Sougent’s picture

Sougent commented

I've got a rough draft done, just haven't had time to finish it yet. I will try to do so soon.

Joe

Sougent’s picture

Sougent commented

Here's my page.tpl.php modifications, on the off chance I don't get my writeup done soon.

<?php if (count($primary_links)) : ?>
   <ul id="primary">
       <?php foreach ($primary_links as $link): ?> 
          <?php $class = ""; ?> 
          <?php if ( stristr($link, 'active')  ) :  ?> 
              <?php $class = 'id="current"'; ?> 
          <?php endif; ?>

              <li <?php print $class?>><?php print $link?></li>  

       <?php endforeach; ?>

    </ul>
<?php endif; ?>
Sougent’s picture

Sougent commented

Hope this helps.....

http://drupal.org/node/31704

sepeck’s picture

sepeck commented

All handbook pages go into the moderation queue. I approved yours so it is now published.

Contributors listed here:
http://drupal.org/node/14205

Also, you should check the 'I contributed Drupal documentation' in your profile. :)

Thx,
-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

venkat-rk’s picture

venkat-rk commented

Great! Thanks for taking the time to write this up for the rest of us.

SamL-1’s picture

SamL-1 commented

This works excellently!

One additional question - I would like a "home" tab which takes back to the root of my site. Is there any way to set it up so one of the tabs gets the active mark at the root?