I'd like to theme $tabs using the following ALA technique:
http://drupal.org/node/31704

Does anyone know how this could be done? I'm using a PHPTemplate theme.

Thanks!

Comments

Dublin Drupaller’s picture

Hi Solipsist..

One quick way of doing it is as follows, using the example of your primary links:

  1. Convert your primary links to an unordered list
  2. Edit the style tags of your unordered list to suit the tab styles you want
  3. edit the theme style.css file and add the necessary styles/image references as desired

I have recently inserted a handbook page for phptemplate based themes that shows you how to convert your primary links to an unordered list

If you know how to use CSS (cascading style sheets) styles, it should be a breeze for you to copy-n-paste that example and edit it for the Alistapart tabs you linked.

I hope that helps.

Dub

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

solipsist’s picture

Thank you for posting!

Primary and secondary links aren't my problem here. It is styling the stuff that is stored in the $tabs variable (<? print $tabs ?>). Now I looked at its markup, which looks like this:

<ul class="tabs primary">
<li class="active"><a href="/admin/block" class="active">list</a></li>
<li><a href="/admin/block/add">add block</a></li>
</ul>

It has exactly the same kind of markup as the one used in that ALA article which means I can use my own stylesheet to apply the Slidings Doors technique. I just need to create the two background images.

So I found the solution thanks to some hints from people in the support IRC channel. Extremely helpful people in there btw!

So anyway, I'm posting this hoping it helps someone else.

--
Jakob Persson - blog
Leancept – Digital effect and innovation agency

solipsist’s picture

I found this function, it does exactly what I need:
http://drupaldocs.org/api/4.6/function/theme_menu_local_tasks

--
Jakob Persson - blog
Leancept – Digital effect and innovation agency