HowToMakeATabbedSkin

Note: The recipes here are for PmWiki versions 0.6 and 1.0 only. For PmWiki 2.0 recipes, see Cookbook.

Why

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 (http://css.maxdesign.com.au/index.htm), and really loved the idea of being able to mark or highlight the tab that's in use.

Problem

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.

Solution

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">
    <ul>
      <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>
    </ul>
  </div>

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 PmWiki/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

Switch IE 6 into standards-compliance mode: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
Tantek's midpass filter: http://www.tantek.com/CSS/Examples/midpass.html
Standalone copies of obsolete Internet Explorer versions: http://www.skyzyx.com/downloads/
Lots more links about web standards: http://www.skyzyx.com/resources/

pmwiki-2.3.38 -- Last modified by {{Bronwyn}}

from IP: 85.171.160.186