Summary: How to make a tabbed skin
Version: n/a
Categories: Layout, Administration


Given that wikis have several ways to work with the same page -- reading, editing, history -- tabbed skins are a natural interface. So I took a look at Listamatic (, and really loved the idea of being able to mark or highlight the tab that's in use.


I ran into trouble when I tried to do so. I couldn't find the right selector to style the proper tab at the proper time. But I knew that JHSkin accomplished this feat.


I recently dissected JHSkin to find out exactly how he did it. Behold the magic #$action!

  #wikicmds #$action {your style goes here}

  <div id="wikicmds">
      <li><a id='browse' class='cmdbutton' href='$PageUrl'>view</a></li>
      <li><a id='edit' href='$PageUrl?action=edit'>edit</a></li>
      <li><a id='upload' href='$PageUrl?action=upload'>attach</a></li>
      <li><a id='print' href='$PageUrl?action=print' target='_blank'>print</a></li>
      <li><a id='diff' href='$PageUrl?action=diff'>history</a></li>

That #$action selector selects the tab corresponding to the action that PmWiki's currently performing...if the li has been id'ed with the correct action word. I'm pretty sure that the action words come from AvailableActions.

Once I had the magic selector and action ids, the rest was smooth sailing. Well, as smooth as it gets when you're writing a standards-based design for today's world, where people still use Internet Explorer. ;)

Useful tips and tools



See discussion at HowToMakeATabbedSkin-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.