{"id":144,"date":"2005-08-29T17:53:04","date_gmt":"2005-08-29T21:53:04","guid":{"rendered":"http:\/\/bronwynboltwood.com\/?p=144"},"modified":"2010-05-14T05:25:17","modified_gmt":"2010-05-14T09:25:17","slug":"lens-skin-for-pmwiki-v2","status":"publish","type":"post","link":"https:\/\/arndis.helioho.st\/wpbb2010\/2005\/08\/lens-skin-for-pmwiki-v2\/","title":{"rendered":"Lens Skin for PmWiki v2"},"content":{"rendered":"<p><a class=\"tt-flickr tt-flickr-Medium\" title=\"Eggs theme for Lens PmWiki skin, author view\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806369899\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"mascot\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3278\/2806369899_4e9e0ab1b4.jpg?resize=500%2C385\" alt=\"Eggs theme for Lens PmWiki skin, author view\" width=\"500\" height=\"385\" \/><\/a> Lens, a skin for version 2 of <a href=\"http:\/\/pmwiki.org\">PmWiki<\/a>,<sup class='footnote'><a href='#fn-144-1' id='fnref-144-1' onclick='return fdfootnote_show(144)'>1<\/a><\/sup> was the most complex web design project that I&#8217;ve done to date. It took several months and a lot of swearing to develop. It&#8217;s modular, which makes it unusually easy to customize. It is also:<\/p>\n<ul>\n<li><a href=\"#standards\">Web standards compliant<\/a>,<\/li>\n<li><a href=\"#compat\">Forwards and backwards compatible<\/a>,<\/li>\n<li><a href=\"#access\">Accessible<\/a>,<\/li>\n<li><a href=\"#modes\">Adaptable to multiple levels of expertise<\/a>, and<\/li>\n<li><a href=\"#shared\">Centralized<\/a>, which makes it easier to modify and update.<\/li>\n<\/ul>\n<h3>Customizable <a id=\"custom\" name=\"custom\"><\/a><\/h3>\n<blockquote><p>OP really was very serious when he said this theme is highly customizable.  Thanks and great job! &#8211;RS<\/p>\n<p><cite>Compliment posted on my <a href=\"http:\/\/www.pmwiki.org\/wiki\/Cookbook\/Lens\">skin&#8217;s page<\/a> at PmWiki&#8217;s official site<\/cite><\/p><\/blockquote>\n<p>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 <a href=\"http:\/\/en.wikipedia.org\/wiki\/C_programming_language\">C<\/a>, 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.<sup class='footnote'><a href='#fn-144-2' id='fnref-144-2' onclick='return fdfootnote_show(144)'>2<\/a><\/sup>\u00a0 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.<!--more--><\/p>\n<h4>Wiki Pages<\/h4>\n<p>Most of the skin&#8217;s user interface stuff &#8212; parts that are the same on every page, whose text or content you might want to change &#8212; 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&#8217;s content. Doing it this way also means that previous versions of pages are saved, so it&#8217;s easy to undo any mistakes later, and that you can show or hide parts of the user interface according to <a href=\"http:\/\/www.pmwiki.org\/wiki\/PmWiki\/ConditionalMarkup\">conditions<\/a> like today&#8217;s date or whether a user is logged in. You can&#8217;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.<\/p>\n<h4>Built-in Options and Modularity<\/h4>\n<figure style=\"width: 240px\" class=\"wp-caption alignright\"><a class=\"tt-flickr tt-flickr-Small\" title=\"Lens Skin for PmWiki v2 in Camel\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2807170340\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3055\/2807170340_ca105373c6_m.jpg?resize=240%2C213\" alt=\"Lens Skin for PmWiki v2 in Camel\" width=\"240\" height=\"213\" \/><\/a><figcaption class=\"wp-caption-text\">Camel theme (included in box)<\/figcaption><\/figure>\n<p>Because I know XHTML and CSS well, I made sure that the people using Lens didn&#8217;t have to. Lens includes options for:<\/p>\n<ul>\n<li>3 colour schemes,<\/li>\n<li>7 common typefaces for Windows and Mac, set separately for headers and body text,<\/li>\n<li>Liquid, elastic, and fixed-width layouts,<\/li>\n<li>Several choices of sidebar width and position, and<\/li>\n<li>Display of columns via absolute positioning or floats.<\/li>\n<\/ul>\n<p>Here are a few samples of the possibilities.<\/p>\n<p><a class=\"tt-flickr tt-flickr-Small\" title=\"Lens Skin for PmWiki v2 in Green\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806321967\/\"><br \/>\n<\/a><\/p>\n<p>The first two themes are included in the box when you download it from the <a href=\"http:\/\/www.pmwiki.org\/wiki\/Cookbook\/Lens\">Cookbook<\/a>. The third is the Eggs theme that I designed for the previous iteration of my portfolio site.<\/p>\n<figure style=\"width: 240px\" class=\"wp-caption alignleft\"><a class=\"tt-flickr tt-flickr-Small\" title=\"Lens Skin for PmWiki v2 in Green\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806321967\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3268\/2806321967_a151b1a811_m.jpg?resize=240%2C197\" alt=\"Lens Skin for PmWiki v2 in Green\" width=\"240\" height=\"197\" \/><\/a><figcaption class=\"wp-caption-text\">Default theme (included in box)<\/figcaption><\/figure>\n<p>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.<sup class='footnote'><a href='#fn-144-3' id='fnref-144-3' onclick='return fdfootnote_show(144)'>3<\/a><\/sup> For example, if you&#8217;d like all the text to be smaller, you need to change this<\/p>\n<pre><code>    ## Base font size in percent (choose one)\r\n    # 'font-size-76',\r\n    # 'font-size-85',\r\n    'font-size-100',\r\n    # 'font-size-115',\r\n<\/code><\/pre>\n<p>to this:<\/p>\n<pre><code>    ## Base font size in percent (choose one)\r\n    # 'font-size-76',\r\n    'font-size-85',\r\n    # 'font-size-100',\r\n    # 'font-size-115',\r\n<\/code><\/pre>\n<figure style=\"width: 240px\" class=\"wp-caption alignright\"><a class=\"tt-flickr tt-flickr-Small\" title=\"Eggs theme for Lens PmWiki skin, display view\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806370445\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3033\/2806370445_21592cee93_m.jpg?resize=240%2C131\" alt=\"Eggs theme for Lens PmWiki skin, display view\" width=\"240\" height=\"131\" \/><\/a><figcaption class=\"wp-caption-text\">Eggs theme (exclusive to the previous version of my portfolio site)<\/figcaption><\/figure>\n<p>The reason this is possible is that all the styles are modular, like LEGO blocks. Each stylesheet does a very specific thing.<sup class='footnote'><a href='#fn-144-4' id='fnref-144-4' onclick='return fdfootnote_show(144)'>4<\/a><\/sup> To make a new theme, just copy an existing one and then edit skin.php to suit. If the style option you want doesn&#8217;t exist, write your own CSS and add the option to the appropriate list in skin.php.<\/p>\n<h3>Works Everywhere for Everyone<\/h3>\n<h4>Compliant and Compatible<a id=\"standards\" name=\"standards\"><\/a><a id=\"compat\" name=\"compat\"><\/a><\/h4>\n<p>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&#8217;re using.<sup class='footnote'><a href='#fn-144-5' id='fnref-144-5' onclick='return fdfootnote_show(144)'>5<\/a><\/sup><\/p>\n<h4>Accessible <a id=\"access\" name=\"access\"><\/a><\/h4>\n<p>As with my <a href=\"\/2004\/10\/lime-spider-stylemaster-template\/\">Lime Spider template<\/a>, 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.<\/p>\n<p>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&#8217;t claim to know better than you (or your phone) what the best font size is. Also, if your cellphone&#8217;s browser is smart enough to fetch only stylesheets marked for mobile devices, then your data usage &#8212; and your bill &#8212; will be lower.<\/p>\n<h3>Modal <a id=\"modes\" name=\"modes\"><\/a><\/h3>\n<figure style=\"width: 75px\" class=\"wp-caption alignleft\"><a class=\"tt-flickr tt-flickr-Square\" title=\"Eggs theme for Lens PmWiki skin, display view\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806370445\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3033\/2806370445_21592cee93_s.jpg?resize=75%2C75\" alt=\"Eggs theme for Lens PmWiki skin, display view\" width=\"75\" height=\"75\" \/><\/a><figcaption class=\"wp-caption-text\">Display view<\/figcaption><\/figure>\n<figure style=\"width: 75px\" class=\"wp-caption alignleft\"><a class=\"tt-flickr tt-flickr-Square\" title=\"Eggs theme for Lens PmWiki skin, standard view\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2807219296\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3228\/2807219296_700fabe44f_s.jpg?resize=75%2C75\" alt=\"Eggs theme for Lens PmWiki skin, standard view\" width=\"75\" height=\"75\" \/><\/a><figcaption class=\"wp-caption-text\">Standard view<\/figcaption><\/figure>\n<p>I built Lens partly for my own nefarious portfolio-displaying purposes, so it took shameless advantage of PmWiki&#8217;s <a href=\"http:\/\/www.pmwiki.org\/wiki\/Cookbook\/ViewModes\">View Modes<\/a> plugin. In other words, I didn&#8217;t want hiring managers to see &#8220;Edit this page&#8221; links all over. For that matter, <em>I <\/em>didn&#8217;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&#8217;t wanted. I&#8217;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.<\/p>\n<figure style=\"width: 75px\" class=\"wp-caption alignright\"><a class=\"tt-flickr tt-flickr-Square\" title=\"Eggs theme for Lens PmWiki skin, author view\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806369899\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3278\/2806369899_4e9e0ab1b4_s.jpg?resize=75%2C75\" alt=\"Eggs theme for Lens PmWiki skin, author view\" width=\"75\" height=\"75\" \/><\/a><figcaption class=\"wp-caption-text\">Administrator view<\/figcaption><\/figure>\n<figure style=\"width: 75px\" class=\"wp-caption alignright\"><a class=\"tt-flickr tt-flickr-Square\" title=\"Eggs theme for Lens PmWiki skin, administrator view\" href=\"http:\/\/www.flickr.com\/photos\/bronwynboltwood\/2806370059\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3208\/2806370059_45af192fee_s.jpg?resize=75%2C75\" alt=\"Eggs theme for Lens PmWiki skin, administrator view\" width=\"75\" height=\"75\" \/><\/a><figcaption class=\"wp-caption-text\">Author view<\/figcaption><\/figure>\n<p>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 <em>everything.<\/em><\/p>\n<h3>Centralized <a id=\"shared\" name=\"shared\"><\/a><\/h3>\n<p>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 <em>one <\/em>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&#8217;m sure it&#8217;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.<\/p>\n<div class='footnotes' id='footnotes-144'>\n<div class='footnotedivider'><\/div>\n<ol>\n<li id='fn-144-1'> PmWiki is a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Wiki_software\">wiki engine<\/a> which makes a pretty good general content management system, especially back when I had a webhost that included PHP but not database access. I like wikis a lot for the simple text markup, how easy it is to make links within the site, and the built-in version history. <span class='footnotereverse'><a href='#fnref-144-1'>&#8617;<\/a><\/span><\/li>\n<li id='fn-144-2'> Web page layout is harder than it has any right to be, both because the ideas are hard, and because there are so many <a href=\"http:\/\/www.satzansatz.de\/cssd\/onhavinglayout.html\">tricky rendering differences and quirks<\/a> involved. <span class='footnotereverse'><a href='#fnref-144-2'>&#8617;<\/a><\/span><\/li>\n<li id='fn-144-3'> Lines with #s in front are turned off; lines without #s in front are turned on. <span class='footnotereverse'><a href='#fnref-144-3'>&#8617;<\/a><\/span><\/li>\n<li id='fn-144-4'> Writing modular CSS is an entirely different experience than writing a regular stylesheet. Everything must be declared independently, at the right specificity, in the right order, so that all the combinations work reliably. I went into this project with a decent understanding of selector specificity and the cascade, but I came out of it with a better one. Even the bug fixes are modular, since I&#8217;ve employed proper <a href=\"http:\/\/www.informit.com\/articles\/article.asp?p=170511&amp;rl=1\">hack management<\/a>. <span class='footnotereverse'><a href='#fnref-144-4'>&#8617;<\/a><\/span><\/li>\n<li id='fn-144-5'> It was simple to do once I found these nice big charts of <a href=\"http:\/\/www.dithered.com\/css_filters\/index.html\">CSS filtering mechanisms<\/a>. I classified each stylesheet as being suitable for every browser or only modern ones, and selected just the right @import rule syntax for each kind. Voil\u00e0!\u00a0 Your browser gets only the styles it can display properly without bothering you about the process at all. <span class='footnotereverse'><a href='#fnref-144-5'>&#8617;<\/a><\/span><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>My very flexible Lens design template for the PmWiki web content management system.<\/p>\n","protected":false},"author":2,"featured_media":451,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[42],"class_list":["post-144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-web-design"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phitMV-2k","jetpack-related-posts":[{"id":139,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2004\/03\/arndis-skin-for-pmwiki\/","url_meta":{"origin":144,"position":0},"title":"Arndis Skin for PmWiki","author":"Wyn","date":"March 14, 2004","format":false,"excerpt":"Liquid website design for a previous version of my personal site.","rel":"","context":"In \"web design\"","block_context":{"text":"web design","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/web-design\/"},"img":{"alt_text":"Arndis Skin for PmWiki v1 in Cream","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3105\/2806322289_79fede379b.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":84,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2004\/10\/lime-spider-stylemaster-template\/","url_meta":{"origin":144,"position":1},"title":"Lime Spider Stylemaster Template","author":"Wyn","date":"October 12, 2004","format":false,"excerpt":"This web page template won an honourable mention in Westciv's 2004 style competition.","rel":"","context":"In \"web design\"","block_context":{"text":"web design","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/web-design\/"},"img":{"alt_text":"Screenshot of my Lime Spider webpage template","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3095\/2785023300_5fe00fec1a.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":81,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2003\/05\/intranet-improvement-proposal\/","url_meta":{"origin":144,"position":2},"title":"Intranet Improvement Proposal","author":"Wyn","date":"May 27, 2003","format":false,"excerpt":"Research, programming, and technical writing on how to create a better technical support intranet.","rel":"","context":"In \"programming\"","block_context":{"text":"programming","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/programming\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":595,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2010\/03\/the-tesla\/","url_meta":{"origin":144,"position":3},"title":"The Tesla","author":"Wyn","date":"March 4, 2010","format":false,"excerpt":"Step into this Berlin steampunk restaurant and nightclub, and enter another universe.","rel":"","context":"In &quot;Hospitality&quot;","block_context":{"text":"Hospitality","link":"https:\/\/arndis.helioho.st\/wpbb2010\/category\/hospitality\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/arndis.helioho.st\/wpbb2010\/wp-content\/uploads\/2010\/03\/steampunk-frankenstein-all.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":481,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2010\/04\/infographics-class-profile\/","url_meta":{"origin":144,"position":4},"title":"Infographics &#8212; Class Profile","author":"Wyn","date":"April 12, 2010","format":false,"excerpt":"Sampling of infographics I have created. Not just your ordinary spreadsheet charts!","rel":"","context":"In \"2D computer rendering\"","block_context":{"text":"2D computer rendering","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/2d-computer-rendering\/"},"img":{"alt_text":"A#3 charts_Page_3","src":"https:\/\/i0.wp.com\/farm4.static.flickr.com\/3374\/4603973461_6c0ec9d404.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":79,"url":"https:\/\/arndis.helioho.st\/wpbb2010\/2003\/03\/hcs-knowledgebase\/","url_meta":{"origin":144,"position":5},"title":"HCS Knowledgebase","author":"Wyn","date":"March 20, 2003","format":false,"excerpt":"Labour-saving method of keeping an up-to-date printed copy of a website.","rel":"","context":"In \"problem-solving\"","block_context":{"text":"problem-solving","link":"https:\/\/arndis.helioho.st\/wpbb2010\/tag\/problem-solving\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/arndis.helioho.st\/wpbb2010\/wp-content\/uploads\/2010\/05\/y0_lens-eggs_2806369899_4e9e0ab1b4_s.jpg?fit=75%2C75&ssl=1","_links":{"self":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":15,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":542,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/posts\/144\/revisions\/542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/media\/451"}],"wp:attachment":[{"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arndis.helioho.st\/wpbb2010\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}