• Web standards compliant,
• Forwards and backwards compatible,
• Accessible,
• Adaptable to multiple levels of expertise, and
• Centralized, which makes it easier to modify and update.

Customizable

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.

Wiki Pages

Most of the skin’s user interface stuff — parts that are the same on every page, whose text or content you might want to change — is saved as PmWiki pages. So, if you know how to edit your PmWiki site at all, you can reword and rearrange them to your heart’s content. Doing it this way also means that previous versions of pages are saved, so it’s easy to undo any mistakes later, and that you can show or hide parts of the user interface according to conditions like today’s date or whether a user is logged in. You can’t even break your site by deleting these pages, because then it will just fall back to using the versions that came with the skin.

Built-in Options and Modularity

Camel theme (included in box)

Because I know XHTML and CSS well, I made sure that the people using Lens didn’t have to. Lens includes options for:

• 3 colour schemes,
• 7 common typefaces for Windows and Mac, set separately for headers and body text,
• Liquid, elastic, and fixed-width layouts,
• Several choices of sidebar width and position, and
• Display of columns via absolute positioning or floats.

Here are a few samples of the possibilities.

The first two themes are included in the box when you download it from the Cookbook. The third is the Eggs theme that I designed for the previous iteration of my portfolio site.

Default theme (included in box)

To use these options, all you have to do is find the right entries in skin.php, and add or remove a # in front of them.³ For example, if you’d like all the text to be smaller, you need to change this

    ## Base font size in percent (choose one)
    # 'font-size-76',
    # 'font-size-85',
    'font-size-100',
    # 'font-size-115',

to this:

    ## Base font size in percent (choose one)
    # 'font-size-76',
    'font-size-85',
    # 'font-size-100',
    # 'font-size-115',

Eggs theme (exclusive to the previous version of my portfolio site)

The reason this is possible is that all the styles are modular, like LEGO blocks. Each stylesheet does a very specific thing.⁴ To make a new theme, just copy an existing one and then edit skin.php to suit. If the style option you want doesn’t exist, write your own CSS and add the option to the appropriate list in skin.php.

Works Everywhere for Everyone

Compliant and Compatible

Lens is built according to web standards with valid code. That makes it easier to maintain, compatible with many browsers instead of just one or two, and more accessible for the disabled. I then took forward and backward browser compatibility a few steps further. Lens has low-fidelity and high-fidelity versions, and you get the right one for the browser that you’re using.⁵

Accessible

As with my Lime Spider template, I wanted Lens to be usable for any user, through any browser or device. You can resize the text without damaging the layout or aesthetics, the code is semantic, the text and the background contrast well, no information is conveyed strictly by colour, and there are no images or plugins pretending to be text.

The low-fidelity version was designed for low vision users, screen readers, and cellphone browsers. Content comes before navigation, and internal links let you skip around the page. The single-column display is easier to read on small screens, and it doesn’t claim to know better than you (or your phone) what the best font size is. Also, if your cellphone’s browser is smart enough to fetch only stylesheets marked for mobile devices, then your data usage — and your bill — will be lower.

Modal

Display view

Standard view

I built Lens partly for my own nefarious portfolio-displaying purposes, so it took shameless advantage of PmWiki’s View Modes plugin. In other words, I didn’t want hiring managers to see “Edit this page” links all over. For that matter, I didn’t want to see the entire toolbox of editing and administration controls every time I was tweaking grammar, so I used the View Modes plugin to hide them when they weren’t wanted. I’m sure this made Lens more useful to other people running professional sites on PmWiki. Here are screenshots of the different modes, from left to right: display, standard, author, and administrator.

Administrator view

Author view

Display mode only shows a login link in the sidebar, and no editing or admistrative controls. Standard mode adds Edit commands and a view mode switcher. Author mode adds in the possibility to attach files or view page history. Administrator mode shows everything.

Centralized

While developing Lens, I found out that keeping three or so complete copies in sync except for the desired differences was a lot of manual work. Instead, I wanted to keep one set of stylesheets, and have multiple themes based on them. To do that, I had to learn a bit of PHP, and write a routine that could make custom CSS files from the collection of building blocks, and then call them at need. I’m sure it’s a horrible messy hack-job of a function, but it works, and it lets the custom CSS be cached for next time, so that sites using Lens load faster on your subsequent visits.

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.

• Grey
• Lime
• Autumn
• Cobalt
• Cerise
• Aqua
• Lime v2

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:

Going beyond the pretty looks, I did some things to suit myself with this skin. There is a breadcrumb trail to show the reader her location in the site. The sidebar contains some auto-updating sections that use javascript snippets to work their magic. The editing command tabs are an unordered list, for the reasons given in A List Apart. This particular unordered list began life as an example from Listamatic, but I tweaked the heck out of it over several generations.

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.