Questions answered by this recipe
All sections are optional, you can remove those that do not apply to your recipe, and add new ones.
Vanilla5 is a simple HTML5 compliant mobile-ready skin for PmWiki v2.2+
Vanilla5 skin on screens of width > 970px - Click to enlarge
- simple no-thrills PmWiki skin
- compliant with the HTML5 standard as of 2014.
- designed with bigger font and adaptive page layout for better viewing on a mobile devices ("responsive webdesign") using mediaqueries for display width < 970px. No need for glasses!
- uses HTML5 elements header, nav, article, section, aside and footer elements.
- provides a workaround to enable styling of HTMl5 elements for Internet Explorer prior to v9 using html5shiv.js . (https://code.google.com/p/html5shiv/)
- uses webfonts, that work with HTTP and HTTPS.
- has some inspiration from how http://open.nasa.gov was in 2014 and http://codeplex.com
The basic layout consists of a header and footer, with the main center section in-between, flanked on the left side by a fixed-width side column. The page is structured into the following sections. Each section can be configured from an associated wiki page and also made to "disappear" with special markup.
Top Menu Bar (Site|Group).NavBar
On a display with width < 970px , like a mobile device, the Side Bar collapses under the Page Content. The page width adapts to the screen width ("fluid width").
Top Menu Bar (Site|Group).NavBar
Each section can be turned off for display.
- Turn off a section by special wiki markup
- Turn off a section globally in config.php with setting
Following table lists the page parts, configuration pages and the corresponding wiki markup and global switch syntax to switch the part on or off.
|Part||Configuration page||wiki markup||config switch|
|Page Actions||Site.PageActions or any Group.PageActions page|
|Header||Site.PageHeader or any Group.PageHeader page|
|Navigation Bar||Site.NavBar or any Group.NavBar page|
|Side Bar||Site.SideBar or any Group.SideBar page|
|Footer||Site.PageFooter or any Group.PageFooter page|
The SideBar supports the use of H1 elements for heading elements and up to 2 levels of nested list elements to use as a vertical navigation list. It uses the H6 element for a menu title.
The search bar offers a search entry field and a search button. It is part of in the Side Bar.
Works with :
- Internet Explorer 9, 10, 11
- Chrome 33
- Firefox 27
- Safari iOS 7
- Android 4.0 Browser
Not tested with other browsers
- Download: vanilla5-20171009.zipΔ
- Unpack the zip file into your skins directory, so that all content is extracted to the directory 'vanilla5'.
- Edit your
$Skin = 'vanilla5';
Change log / Release notes
If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".
Version 1.0.0: 2014-04-01
- First public release
Version 1.0.5: 20140406
- Styles are now applied to textarea, that were only applied to textarea#text.
- Cleaned up extra files and unused images.
- Merged all style sheets into one.
Version 1.0.7: 2015-03-23
- The Google webfonts "ubuntu" and "lobster" were downloaded and are now served from local storage. See directory "fonts". This adds a bit more privacy.
- It uses an updated and minified version of HTML5 Shiv 3.7.3-pre.
- File vanilla5.php was modified to comply with newer PHP 5.5+ and avoiding PHP error "The /e modifier is deprecated, use preg_replace_callback. instead" - Thanks to Moni Kellermann!
- Renamed files:
- Standard style sheet to "standard.css";
- Minified standard style sheet to "standard.min.css"
- Skin PHP renamed to "skin.php"
- Template file to "skin.tmpl".
- CSS: Restructured all standard coloring style rules and moved them to the end of "standard.css".
- CSS: Default color scheme is now gray-tone only, except for the buttons and controls in wiki edit page.
- CSS: Added style sheet "mystyle.css". If you like to write your own custom style sheet, add your own custom style rules here.
- CSS: Added 4 example style sheet files with color schemes pink, blue and green, and an example styles with background and transparent menu. They are named example-blue.css, example-green.css, example-orange.css, example-pink.css and example-background.css. To apply one of these schemes, open one in a editor, select all, copy and paste in end of "mystyle.css"
- CSS: Added separate style sheet for defining fonts, because you might want to change that, leaving minified standard.min.css as is.
- CSS: sensible default h1..h6 margins
- CSS: sensible default table borders
- Template structure: added clearfix after content block and aside.
- Template structure: moved pageFooter out of and before "last modified" block.
- Template structure: fixed wrong flow of navbar and content on small screens. repositioned 'clearfix' in template.
- Template structure: added <div class="top"> in template.
- Added author name page variable Paul Wiegmans to page footer in template.
- Template structure: changed PageAction menu div container from class="wikicmds" to id="wikicmds" to be compliant with how things are done in the default PmWiki skin (and probably most other skins too) since I need only one PageActions menu ever.
- Template structure: fixed directive <!--/PageTabFmt--> in template at wrong level
- Dist folder did not contain the correct aFarkas HTML5Shiv for legacy Internet Explorer. Fixed.
This skin is used at :
- http://www.sikkepitje.nl (may change whenever I like)