Drupal tabs customization

mskristinahall - January 18, 2008 - 18:47

Hello.

I am modifying the tabs that drupal produces on certain pages, for example the user profile page where there are tabs for View and Edit.

I have noticed that with my modified template it does not use my CSS, and automatically puts in a class called tabs primary.

Instead of displaying as they should -- which the top and bottom menus are the proper way for it to display -- they show as white and grey as seen on http://kristinahall.net/qwo/?q=user/1

page.tpl.php where tabs

			<div class="tabs">

				<?php print $tabs ?>

			</div>

css for tabs

.tabs primary

	{

		padding: 2px;

	}

.tabs primary ul

	{

		margin: 0;

		padding: 0;

		text-align: left; /*Set to "right" to right align pagination interface*/
		background-color: #a90e5e;

	}

.tabs primary li

	{

		list-style-type: none;

		display: inline;

		padding-bottom: 1px;

	}

.tabs primary a

	{

		padding: 0 5px;

		border: 1px solid #a90e5e;

		text-decoration: none; 

		color: #ffb8e7;

		background-color: #d42781;

	}

.tabs primary a:hover, .tabs a:active

	{

		border: 1px solid #721f94;

		color: #ffb8e7;

		background-color: #a90e5e;

	}

.tabs primary a.currentpage

	{

		background-color: #5a7d9f;

		color: #c48a13;

		border-color: #2e4f6e;

		font-weight: bold;

		cursor: default;

	}

source from page where tabs.

			<div class="tabs">
				<ul class="tabs primary">
                                          <li class="active"><a href="/qwo/?q=user/1" class="active">View</a></li>
                                          <li><a href="/qwo/?q=user/1/edit">Edit</a></li>
                                          <li><a href="/qwo/?q=user/1/contact">Contact</a></li>
                              </ul>
							              
			</div>

» Login or register to post comments

Hi there, I'm also

al_au - January 19, 2008 - 06:47

Hi there,
I'm also encountering the same problem. Anyway you most likely need to override these functions

theme_menu_local_task
http://api.drupal.org/api/function/theme_menu_local_task/5

and
phptemplate_menu_local_tasks
http://api.drupal.org/api/function/phptemplate_menu_local_tasks/5 (This is the one that assigns the css "tabs primary")

You should override them by placing them in template.php (theres plenty of tutorials on overriding theme functions)

Hope this makes sense,
Al

Anyone know why this is so?

al_au - January 21, 2008 - 21:24

I am really struggling with getting the tabs to change color. Anyone know of a solution?

Thanks
Al

I think you can't use those "double" class names like ".tabs primary" in css-files. the parser will expect a html tag called primary in a parent element with a class="tabs", which of course doesn't exist.

the css selectors you'll want to use are:
ul.primary li a
ul.primary li.active a
ul.primary li a:hover

- Andi

Thanks I have no more problems

al_au - January 22, 2008 - 19:46

Thanks Andi for the reply. I just had to modify the following CSS.

/*
** Tab navigation
*/
ul.primary {
border-collapse: collapse;
background-color: #000000;
padding: 0 0 0 1em;
white-space: nowrap;
list-style: none;
margin: 5px;
height: auto;
line-height: normal;
border-bottom: 1px solid #1F1F1F;
}
ul.primary li {
display: inline;
background-color: #050509;
}
ul.primary li a {
background-color: #000000;
border-color: #1F1F1F;
border-width: 1px;
border-style: solid solid none solid;
height: auto;
margin-right: 0.5em;
padding: 0 1em;
text-decoration: none;
}
ul.primary li.active a {
background-color: #000000;
border: 1px solid #1F1F1F;
border-bottom: #fff 1px solid;
}
ul.primary li a:hover {
background-color: #050509;
border-color: #1F1F1F;
border-bottom-color: #1F1F1F;
}
ul.secondary {
border-bottom: 1px solid #1F1F1F;
padding: 0.5em 1em;
margin: 5px;
}
ul.secondary li {
display: inline;
padding: 0 1em;
border-right: 1px solid #1F1F1F;
}
ul.secondary a {
padding: 0;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: 4px solid #1F1F1F;
}

And that got it working. Thanks for your suggestion though :)

What file was the tabs CSS

mskristinahall - January 22, 2008 - 20:45

What file was the tabs CSS in ? :)

Thanks!!

The css seemed to be located

al_au - January 23, 2008 - 00:45

The css seemed to be located in a drupal core css file. I wouldn't worry about changing it there. If you have a style.css in your themes folder just put the code in there and modify it. It should change the look of the tabs.

Best wishes,
Al

i prefer to have my own css

takien - January 26, 2008 - 03:47

i prefer to have my own css by disabling default drupal css.
delete or comment this line in page.tpl.php

<?php print $styles; ?>

and replace by this

<style type="text/css" media="all">@import "/themes/themename/styles.css";</style>

If you want to do that you

mellenger - March 17, 2008 - 22:28

If you want to do that you should do it like this:

<?php
 print '<style type="text/css" media="all">@import "/'.path_to_theme().'/style.css";</style>' 
?>

Andrew Mellenger
Image X Media

This is very handy material,

Summit - March 19, 2008 - 09:03

This is very handy material, thanks!
How can I get the situation that the tabs stay within the content-area of the page?
Now my page is not themed correctly because the tabs are wider than the content-area (middle of the page).
Somebody have a css solution for this?
I am using the purple_beauty theme (http://drupal.org/project/purple_beauty).

greetings,
Martijn

Wonderful!

laperla - December 12, 2008 - 00:15

I've been struggling for ages to figure out how to change the color of the tabs so it wouldn't look so default.

Thank you for your css code :)

Cyn

"Double class names"

grobemo - June 30, 2009 - 17:02

Just for the record, the way to handle "double class names" (i.e., elements that have multiple class names) is as follows:

If you have an HTML element with the attribute class="tabs primary", you can target it in your CSS file as:

ELEMENT.tabs.primary {
  // replace ELEMENT with the element type (e.g., div, li, etc.)
  // style your element here
}

Unfortunately, I do not

brian_c - July 22, 2009 - 17:36

Unfortunately, I do not believe that works with IE6. :(

In situations where I've had to target multiple classes in combination, I add extra containers as needed, so poor IE6 only has to deal with one class per element.

that doesn't matter it's dead

dynamiser - August 28, 2009 - 16:12

that doesn't matter it's dead anyway -> http://iedeathmarch.org/

Ever built a high-traffic

brian_c - August 28, 2009 - 22:12

Ever built a high-traffic website for a large corporation? Try telling them their expensive new website isn't going to look or function properly for the 15-25% of their visitors still using IE6.

By some measures IE6 is still #1: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2. Sad but true. Dying? Yes. Dead? Not yet.

Believe me I wish it were otherwise, I despise IE6 with a passion difficult to express in words, but market share is market share, and frameworks intended for widespread use like Drupal must continue to support IE6 for the time being, thus multi-class per element selectors should not be used.

brian_c is very correct.. I

charlie1234 - November 27, 2009 - 03:14

brian_c is very correct.. I analyze the visitors statistics from a half-dozen of the websites I manage. It's very interesting to see the trends! A site about game console mods gets something like 90% firefox traffic while a more corporate page is getting something like 70% IE (albeit different versions from 6-8).

When it comes down to it, some of the public-oriented sites (which are what I use as a good meter) are averaging 19% of the visitors to be on IE 6. Bummer. I really give it ~ 24 months before this figure drops to something substantially low due to the simple life cycle of Windows XP (vista/7/whatever installations will give the user something higher).