Posted by fred van der Ende on July 13, 2008 at 8:51pm
Hi
Just starting off with Zen and I like the CSS functionality.
However one question seems not to be answered in the documentation.
When copying the files to a new subsite there's no mentioning about copy of the tabs.css that's in the original zen folder.
Is it not possible to create tabs for primary links?
Regards
Fred
Comments
Misnomer?
Dude, the tab css isn't for primary links anyway, it's for the "menu task" links, like edit/track etc.
If you leave the old tabs.css where it is, you can use the Zen tabs. If you want to override them, you'll have to copy the css and the images and check the image links are correct - last time I moved the css over and checked through the template.php file, the tabs didn't work properly (cos I didn't override them correctly).
Web Development in Nottingham, UK by Kineta Systems
Web Development in Nottingham, UK by Kineta Systems / Follow me on Twitter! @NikLP
you may want to look at "zen classic"
zen ships with 2 subthemes, "starterkit" and "zen_classic". You should build your site with the starterkit, but if you want to see how graphical tabs can be done for the primary navigation, it may be easiest if you enable classic and inspect how the blue tabs are done in the css and the images. The technique works very well and requires very little css code to make it work. Check it out, and then create your own tabs.png file that works with the look needed on your site.
excess information
that is the best advice. tabs.css is unrelated to the primary navbar which you want to theme...
if you scroll down on this page - there are several "horizontal list" examples, which show CSS to make a list menu look like tabs.
http://css.maxdesign.com.au/listamatic/index.htm
Well, then how can I style
Well, then how can I style stuff like the following:
I can clearly see "tabs primary ul" classes for example on the category edit page, and they are not part of the navbar even though it is a primary class ...Copying and modding the tabs.css file with the images folder to my subtheme did not change much on it...
Also, could an imageless tabs stylesheet be considered for zen? it is just a pain to customize with photoshop and figure out which part was saved in one of the 10 little images...
<div class="tabs"><ul class="tabs primary clear-block"><li class="active"><a href="/drupal5/admin/content/taxonomy" class="active"><span class="tab">List</span></a></li>
<li><a href="/admin/content/taxonomy/add/vocabulary"><span class="tab">Add vocabulary</span></a></li>
<li><a href="/admin/content/taxonomy/export"><span class="tab">Export</span></a></li>
<li><a href="/admin/content/taxonomy/import"><span class="tab">Import</span></a></li>
<li><a href="/admin/content/taxonomy/csv"><span class="tab">CSV import</span></a></li>
</ul></div>
I also went to check the zen classic but there was not much of a tabs.css customization either. On the screenshot of zen classic I am referring to the "view" "edit" tabs next to each other under the "Donec felis eros, blandit non" latin garbage header. The one with the gray background which does is not very aesthetic for a blue theme IMHO.
****Me and Drupal :)****
Clickbank IPN - Sell online or create a membership site with the largest affiliate network!
Review Critical - One of my sites
Primary link tabs
it may be easiest if you enable classic and inspect how the blue tabs are done in the css and the images. The technique works very well and requires very little css code to make it work. Check it out, and then create your own tabs.png file that works with the look needed on your site.
This isn't a good solution if you want rounded tabs like the ones in div.tabs. The primary links don't have the extra span that allows that kind of effect. You'd have to add that span in and use CSS similar to tabs.css.
An answer to the question?
The original question was essentially "how do I override tabs.css in zen in my zen theme?". I'm still working on it but I think I have the answer:
that should do it.
Hey drob, et al. I've managed
Hey drob, et al.
I've managed to get the tabs to show without having zen at all. (yay)
Zen is awesome. Unfortunately, it has a tad too much overhead for my taste. Today I've been experimenting with ninesixty and wanted to implement tabs and messages independently.
Messages
Zen has very attractive message notifications.
This is easy. Copy the
messages.cssfrom the zen style. Add this css file to yourthemename.infofile. Copy to your theme every image prefixed withtabs-from the zen images.Tabs
Tabs are also snazzy.
However, copying these over often stump theme developers. You have to copy
tabs.cssand the corresponding images to your theme course (and adjust those paths relative to your tabs.css location). But there's a bit more.You have to add these functions to your
template.php./**
* Duplicate of theme_menu_local_tasks() but adds clear-block to tabs.
*/
function THEMENAME_menu_local_tasks() {
$output = '';
if ($primary = menu_primary_local_tasks()) {
$output .= '<ul class="tabs primary clear-block">' . $primary . '</ul>';
}
if ($secondary = menu_secondary_local_tasks()) {
$output .= '<ul class="tabs secondary clear-block">' . $secondary . '</ul>';
}
return $output;
}
/**
* Implements theme_menu_item_link()
*/
function THEMENAME_menu_item_link($link) {
if (empty($link['localized_options'])) {
$link['localized_options'] = array();
}
// If an item is a LOCAL TASK, render it as a tab
if ($link['type'] & MENU_IS_LOCAL_TASK) {
$link['title'] = '<span class="tab">' . check_plain($link['title']) . '</span>';
$link['localized_options']['html'] = TRUE;
}
return l($link['title'], $link['href'], $link['localized_options']);
}
Of course, you rename
THEMENAMEto the short name of your theme (the name you used in your.infofile).