Vanilla5 Skin
Dit is een inhoudelijk kopie van de pagina op http://www.pmwiki.org/wiki/Skins/Vanilla5.
- Summary: Vanilla5 is a simple HTML5 compliant skin for PmWiki v2+
- Version: 1.0.0 (2014-04-01)
- Prerequisites: pmwiki-2.2 (earlier versions might work too, haven't tried)
- Status:
- Maintainer: Paul Wiegmans
- Categories: Skins Mobile RWD
- Download: Attach:vanilla5-20170506.zip
- Users: (view? / edit)
- Discussion: Vanilla5Skin-Talk?
Questions answered by this recipe
Description
Vanilla5 is a simple HTML5 compliant mobile-ready skin for PmWiki v2.2+
Features:
Attach:skin-vanilla5-screenshot1-thumb.png Δ Δ 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 http://open.nasa.gov and http://codeplex.com
Layout
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.
(Site|Group).PageActions Header (Site|Group).PageHeader | |
Top Menu Bar (Site|Group).NavBar | |
Side Bar |
|
Footer (Site|Group).PageFooter |
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").
(Site|Group).PageActions Header (Site|Group).PageHeader | |
Top Menu Bar (Site|Group).NavBar | |
| |
Side Bar | |
Footer (Site|Group).PageFooter |
Each section can be turned off for display.
- Turn off a section by special wiki markup
(:noXXX:)
- Turn off a section globally in config.php with setting
SetTmplDisplay('PageXXXFmt', 0);
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 | (:noaction:) | SetTmplDisplay('PageActionFmt', 0); |
Header | Site.PageHeader or any Group.PageHeader page | (:noheader:) | SetTmplDisplay('PageHeaderFmt', 0); |
Navigation Bar | Site.NavBar or any Group.NavBar page | (:notabs:) | SetTmplDisplay('PageTabsFmt', 0); |
Side Bar | Site.SideBar or any Group.SideBar page | (:noleft:) | SetTmplDisplay('PageLeftFmt', 0); |
Page Content | -none- | -none- | -none- |
Footer | Site.PageFooter or any Group.PageFooter page | (:nofooter:) | SetTmplDisplay('PageSearchFmt', 0); |
Search Bar | -none- | (:nosearch:) | SetTmplDisplay('PageSearchFmt', 0); |
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.
Browser Compatibility
Works with :
- Internet Explorer 9, 10, 11
- Chrome 33
- Firefox 27
- Safari iOS 7
- Android 4.0 Browser
Not tested with other browsers
Installation
- Download: Attach:vanilla5-1.0.7-20150323.zip
- Unpack the zip file into your skins directory, so that all content is extracted to the directory 'vanilla5'.
- Edit your
config.php
and set$Skin = 'vanilla5';
Configuration
None
Usage
None
Notes
Change log / Release notes
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 not 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!
Version 20170506
- 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 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
Contributors
Comments
Demo sites
This skin is used at :
- http://www.sikkepitje.nl (may change whenever I like)
See discussion at Vanilla5Skin-Talk?