using tabs with zen

public
fred van der Ende - Sun, 2008-07-13 20:51

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

Misnomer?

NikLP's picture
NikLP - Sun, 2008-07-13 22:58

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


you may want to look at "zen classic"

MikeyLikesIt's picture
MikeyLikesIt - Sun, 2008-07-13 23:13

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

heather's picture
heather - Sun, 2008-07-20 14:29

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

giorgio79@drupal.org - Mon, 2008-08-25 06:07

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.