Recent Changes - Search:
Skins /

PukkaFloat

Updates

  • March 31, 2005: new version with no .htaccess trickery required, just PHP.
  • August 30, 2005: Pukka Float is deprecated in favour of Lens. Lens is much, much better! Go get Lens!

Download

pukka_float.zipΔ

About

Pukka Float is a skin carefully designed to work for everyone.

  • Compatible with all kinds of browsers, including elderly ones, mobile devices, and text-based ones. Hi and lo-fi modes are implemented in a way that ensures that you'll automatically get the right one for the browser or device that you're using.
  • Accessible to the disabled (and the rest of us), through:
    • Lo-fi mode.
    • Content comes first in the source order.
    • Internal navigation links.
  • Very, very configurable, even if you don't know any CSS. Many options for fonts, layout, feature integration and more are included, and can be easily toggled via two config files.
    • You can modify the included CSS files or write your own.
    • If you want to have several saved themes, you can do that too, by copying and modifying stitch_linked.css and stitch_imported.css, and then changing the links in skin.tmpl.
    • If you're more of a programmer than I am, you could bang together a script that uses a form, PHP, and cookies to switch themes.
  • Allows you to integrate certain features or turn off access to them.
    • Learn from the included material to create your own feature toggle for a particular recipe.
  • Attractive but neutral default colours and decor.
    • If the colour scheme or decor isn't your thing, it's not that hard to change it.

What I left out

I didn't implement access keys, because I'm leery of overriding the browser's own hotkeys.

Configuration

To change the skin's options, all you have to do is (un)comment the appropriate lines in stitch_linked.css and stitch_imported.css. You'll find both of them in the css subdirectory.

If you write some new CSS files to use with the skin, you'll need to add them to one of those files. Which one you should use depends on what browsers the sheet will work in:

  • stitch_linked.css for simple stuff that's supported by any browser.
  • stitch_imported.css for advanced CSS that requires a modern browser to work properly.

Colour scheme niggles

The skin package includes three colour schemes. This setup would be perfect for having extra colour schemes except that we can't have our cake (colour schemes) and eat it (css tabs with current tab marked) too. The reason why is that the selector used to pick out the current tab has a variable in it ($action). If it's in the .tmpl file, PmWiki replaces it with the current action, and it works as expected. If it's in the CSS file, PmWiki doesn't change it to anything useful, so the rule gets ignored. You have two choices:

  1. Don't bother with the current tab selector (which I think would be a pity)
  2. Copy the relevant selectors (from layout-navlists.css and color-something.css) into the proper spot in the tmpl file when you change the colour scheme.

This also means that a little bit of your configuration gets lost when you update the skin, but so long as you copied, not cut it from the colour file, or also stored it in the colour file, it's only a minor hassle.

Contribute a script

If you are annoyed by the minor hassle explained above, and know PHP, feel free to contribute a script that fixes the problem. I've figured out a basic plan of attack:

  • Check what the current colour scheme is.
  • Search the appropriate CSS file for flagged rules. Putting a comment, like "/* put in template */", before a rule should be a good way to flag it. CSS rules always end with a "}", so that's a natural closing flag.
  • Store the flagged rules (including their closing "}"s) somewhere.
  • In the template, have a placeholder where the flagged rules should go, e.g. <!--Action-dependent CSS Rules-->
  • Wrap the flagged rules in <style type="text/css"> <!-- --> </style>
  • Replace the placeholder with the wrapped flagged rules.

Styling the sidebar

I know that sooner or later someone will want to apply a background colour or border to the sidebar and have it continue down to the footer, even when the content column is longer than the sidebar. You can't do that in the obvious way (#sidebar-inner {background-color:whatever;} or #sidebar-inner {border-color:whatever;}) because the CSS spec says the browser's only supposed to colour the area under the sidebar's content, not the whole space set aside for it. I've applied the border to #content-inner, so you'll get a full-length border while the content's longer than the nav. You can achieve the desired effect through background images, as mentioned at http://www.alistapart.com/articles/negativemargins/ and fully detailed in http://www.alistapart.com/articles/fauxcolumns/.

Browser compatibility

Hi-fi or Columns mode

Works well in:

  • Firefox 1.0
  • Opera 7.54 (wrapping on the command tabs in the titleblock can be iffy in liquid mode)
  • Internet Explorer 6 for Windows

Likely to work well in:

  • Modern browsers with good CSS support (e.g. Gecko-based browsers like Netscape 6 or up, Mozilla, Camino, Galeon, etc.; Opera after version 5 or 6 on a guess, Safari and by extension probably Konqueror)

Buggy but mostly readable:

  • Internet Explorer 5.5 for Windows (though window resizing is visibly jerky)
  • Internet Explorer 5.0 for Windows
    • all: horizontal navigation lists aren't getting all the borders and padding/margins, but seem to be otherwise ok
    • fixed width layout: window resizing visibly jerky
    • liquid layout: seems to be happiest with window maximized. Window resizing not only jerky, but causes browser to become confused over which background colour to apply to what. When you hover over a non-visited link, browser changes to correct background colour, but only for the block element containing the link. Take a look at the zebra shotΔ

Unusable:

  • Internet Explorer 4 for Windows or older -- many display problems, including non-horizontal navlists and misaligned body text
  • Netscape Navigator 4 or older
  • anything as or more obsolete than the above

Won't even guess about:

  • Internet Explorer for Mac

Lo-Fi or Flowed mode

Every browser with any CSS support can cope with lo-fi mode, though there may be minor rendering errors, e.g. in Internet Explorer 4. There are no columns, and more internal navigation links are visible. Browsers without CSS support will see a boring-looking but perfectly functional page, with titleblock first, then content, then sidebar, then footer.

How is it accomplished?

Simple CSS that's widely supported is applied. Then the tougher CSS is applied via "@import 'styles.css';". The precise syntax is important as it determines exactly which browsers can load those sheets (see details at http://www.dithered.com/css_filters/css_only/import_single_quotes_no_url.html).

The internal navigation links in the header and footer are hidden with a method simplified from the example at http://blog.tom.me.uk/2003/09/13/skipadeedoodah.php. (Navigation links do not appear on focus in this skin.)

The modular CSS is stitched together for page serving with the technique from http://www.fiftyfoureleven.com/sandbox/weblog/2004/aug/css-php-organized-optimized/. The skin has two stitched stylesheets instead of just one, so that lo-fi mode has some styling. I tried this technique to improve performance (fewer file requests to the server), and was delighted to find out that it made configuration much easier too!

The hi-fi layout uses the principle from http://www.alistapart.com/articles/negativemargins/. The sidebar is set in ems rather than % because it doesn't break so quickly in Internet Explorer: you can narrow the window to ~400px instead of just ~600px before the sidebar runs out of room and drops. Both columns use double divs because it's so much less hassle when styling.

Contributors

Bronwyn

Category: Skins Obsolete