I've seen a lot of talk about this in the forums, but no clear answers.

I want to create a couple of tabs on the top left of the page, exactly like the "Drupal Homepage" and "Your Dashboard" tabs on drupal.org.

I am using my own Zen subtheme (I love Zen, by the way!).

I enabled primary links, and created 2 links: Home and My page. They display as simple links.

To style the tabs, I tried copying the primary links styling from tabs.css (which I know is not for primary links) and inserting it into navigation.css. With a few tweaks I can get the tabs to appear, but there is a problem:

(First, I only know enough about CSS to get into trouble, which I have done here)

In some of the elements there is a reference to .tab, which I believe means it is looking for a div class called "tab". I don't know how to apply that class to the navigation region. If I remove the .tab reference, the tabs show up. but the tab-left.png doesn't appear, and the focus and hover functions don't work.

If possible, can someone post simple instructions for styling primary links as tabs? I know I'm not doing it the right way, but I seem to be so close!

Thank you all for continued support.

Mike

Comments

komal.savla’s picture

komal.savla commented

Hi,

You can try out this simple css for styling the primary links as tabs.

#main-menu li {
  float:left;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0 1px;
  padding:0 1px;
}


#main-menu a {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  -moz-border-radius-topleft:8px;
  -moz-border-radius-topright:8px;
  background: #EEEEEE none repeat scroll 0 0;
  color:#333333;
  float:left;
  height:2.4em;
  line-height:2.4em;
  padding:0 0.8em;
  text-decoration:none;
  text-shadow:0 1px #EEEEEE;
  
}

#header {
  background :#48A9E4;
}

#main-menu a:hover {
  background: #c8e5f7;
}

#main-menu a.active {
  background: #FFFFFF;
}
m_i_c_h_a_e_l’s picture

m_i_c_h_a_e_l commented

That works beautifully. Thank you so much.

Now a second question: on the nav-masthead menu above, there are 2 more links. The first (not a tab) says "you are logged in as " and the second says "logout".

I tried adding those to my primary links, but, first, they appear as tabs (which I don't want), and second, they are always visible, regardless of whether you are logged or not.

They seem to involve a "userinfo" class, but I don't know any more than that.

How do I make those items appear, based on context (i.e. login status)?

Thanks again for your help.

komal.savla’s picture

komal.savla commented

Hi,

The above css was for all the primary links that means now all the links under primary menu will pick up those styles.
If you want to add links which should not look like tab, then you have to create the new menu and add links under that menu.

And for "you are logged in as " and the "logout" links can you please provide more details like from where these links are coming?
what are their paths? and also provide the screenshot if possible.

m_i_c_h_a_e_l’s picture

m_i_c_h_a_e_l commented

Thanks Komal.

Sorry I wasn't clear. I'm talking about the links on the drupal homepage (drupal.org -- should be the page you are looking at right now).

Notice the tabs on the top left of the page. The first 2 are "drupal home" and "your dashboard". Those are tabbed, and you already helped me with them. (thanks again!)

The next 2 links, immediately to the right, are non-tabbed: "you are logged in as . . ." and "logout". These last 2 are the ones I'm interested in now. Notice that when you are not logged in, the link says "login/register", and there is no logout link.

I looked at the element with Firebug, and the link seems to have the class "userinfo".

I guess my question now is, whether the links are tabbed or not, how do I make them appear and disappear based on whether you are logged in or not?

If the menu was in a block I would just set the visibility by role. But primary links displays just by enabling the menu.

I hope this is more clear. I really appreciate your help.

Mike

komal.savla’s picture

komal.savla commented

Hi,
For Login/Register link you can simply add a menu in the primary link i.e from here admin/build/menu
Set the path as user/login and menu link title as Login/Register. This will add the login link and will be displayed only when the user is logged out.

For the "Logged in as " and "Logout" link, You can add this in your page.tpl.php after the navigation div ends

<div id="userinfo">
   <?php global $user; ?>
     <?php if ($user->uid) : ?>
        <?php print l(t('Logged in as ') . $user->name,'user/'.$user->uid); ?>
         <?php print l((t('log out')),"logout"); ?>
      <?php endif; ?>
</div>

Also add the following in your css file

#navigation {
  margin: 0;
}

#userinfo {
float: left;
}

And then you can add the styles to these links as required using firebug.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Component: CSS/HTML markup » layout.css
Status: Active » Closed (fixed)