Lens, a skin for version 2 of PmWiki, was the most complex web design project that I’ve done to date. It took several months and a lot of swearing to develop. It’s modular, which makes it unusually easy to customize. It is also:
OP really was very serious when he said this theme is highly customizable. Thanks and great job! –RS
Compliment posted on my skin’s page at PmWiki’s official site
My top goal when writing Lens was for ordinary people to be able to customize it without having to learn any programming. XHTML and CSS are a cakewalk compared to a serious programming language like C, but many people still find it difficult to make one or two small changes to an otherwise ideal design without having to dive in headfirst. So Lens stores a lot of itself (for example, the contents of the sidebar) in the wiki rather than in the template file. It has many built-in style options to choose and learn from. And of course you can dig into the guts and tweak the code by hand if you want to. Continue reading
The webpage template I designed for Westciv‘s 2004 competition won an honourable mention and was included in Stylemaster version 4 under the name Lime Spider.
See a live demo of Lime Spider. Isn’t it lovely in comparison with the unstyled version?
Entries in the competition were expected to be valid, accessible XHTML and CSS. So, I used semantic code which is more accessible, especially for screen readers. I styled it so that text contrasted strongly with the background and could be resized without damaging the layout or aesthetics. Neither does it rely on having perfect colour vision, or have any images or plugins replacing the text. Lime Spider is readable, attractive, compatible with a wide range of browsers, fast-loading, and easy to modify.
It is also a fluid design. It reshapes to fit your browser window width so long as it is not too narrow or wide to read comfortably. Since its proportions are set in ems, they’re maintained regardless of your window or text size.
I began by making a grey version, to hammer out the layout and typography, and then made several colour variations.
I created the Arndis skin for PmWiki in the spring of 2004. I was running PmWiki v 0.6 or 1.x at the time. It’s been through a few rewrites since then, but the visual design is much the same as the original.
Like my other web designs, it’s standards-compliant, semantic, accessible, etc., etc. It’s a simple liquid two-column affair, with a brighter content area floating in a sea of background and sidebar. I made several colour variations:
The hardest thing to do to it was the you-are-here marker, which highlights the current tab. I needed a CSS selector for it and only it, which meant I needed a hook in the HTML PmWiki generated. Happily, the creator of PmWiki is very good at answering questions or helping out with small things like this, and he pointed out a hook that already existed in the code.