Skittlish allows site visitors to choose between fixed and fluid width, and between seven candy-inspired colours for the sidebar. The skin provides a 2-column interface, with a right-side navigation bar, top navigation tabs, a selection of color options, and full support for the BlogIt blogging engine.
I'd love to know if you use this skin, or even if you like or hate it -- leave a comment?!
Attach:skittlish_screenshot_thumbnail.jpg Δ Δ
Click to enlarge
Feature Summary
- Customizable: Main sections (headers, sidebar, and tabs) of the page are stored as wiki pages, so you don't need to know HTML.
- Adds full support for BlogIt, a blogging engine for PmWiki. This means that your elements of the blog page will seamlessly fit within the skin.
- Works in either fluid or fixed modes, selectable by the user.
- Additional colors are available, and can be selected by the user (blue, cyan, green, orange, pink, red, violet).
- Supports removal of header/title/right/footer/options/search elements using directives on specific pages or site wide.
Download and Installation
- Download the skin package (Attach:skittlish.zip Δ) and unzip it into your skins directory (usually pmwiki/pub/skins).
- Add the following to your local configuration file:
$Skin = 'skittlish';
Style Switching
Page Mode
Use either fluid or fixed. Fluid expands the width of the skin to fill the browser (with a margin either side). Fixed maintains a constant width, regardless of browser width.
$SkinStyle = 'fixed';
Or simply pass a parameter:
?style=fluid
Colors
You can switch the default orange color theme site wide by updating your config.php with:
$SkinColor = 'blue';
Or simply pass a parameter:
?color=red
The included color schemes are: blue, cyan, green, orange, pink, red, violet.
Page Layout
HEADER includes {$SiteGroup}.Skittlish-SiteHeader {$Group}.SiteHeader {$SiteGroup}.SiteHeader
| OPTIONS no includes fluid/fixed colors
ACTION MENU includes |
| MAIN
no pages included | SEARCH BAR no pages included
RIGHT SIDE BAR includes |
FOOTER includes {$SiteGroup}.Skittlish-SiteFooter {$Group}.SiteFooter {$SiteGroup}.SiteFooter
| |
Right Sidebar
The right sidebar includes the Search bar, in addition to Site.SideBar. The sidebar is wide enough to include some basic text, or other short sections. Edit Site.SideBar, and add something like:
(:div class="boxy tall":) !!!! About This is an area on your website where you can add text. This will serve as an informative location on your website, where you can talk about your site. (:divend:)
You can use either third level headers (!!!), or the typical %sidehead% classes found in Site.SideBar.
You can also use some alternate styles:
- boxy short
- boxy tall
- boxy minor
Header
The wiki file Site.SiteHeader can be overridden with a Group level page. Usually it will be of the format:
!! [[{$ScriptUrl} | {$WikiTitle}]]
To include a site logo simply set the value of $PageLogoUrl and $PageLogoUrlWidth in config.php.
$PageLogoUrl='path/to/logo.jpg'; $PageLogoUrlWidth='50px';
Top Navigation Tabs
The other likely change you'll want to make is to add links to the top navigation bar. In this case edit Site.SiteNav, and use a list format as below:
* [[Grp/MyPage | Page 1]] * [[Grp/MyPage | Page 2]] * [[Grp/MyPage | Page 3]]
Footer
The wiki file Site.Skittlish-SiteFooter contains links to the authors, as well as last modified date.
Removing Page Sections
Sections can be removed from specific pages or the site-wide:
- Turn off sections on a specific page with markup
(:noXXX:). Where XXX is Header,Action,Right,Title,Search,Tabs,Options. - Turn off sections for the whole site in
config.phpby setting:
SetTmplDisplay('PageXXXFmt', 0); #XXX: Header,Action,Right,Title,Search,Tabs,Options
FAQ
Browser Compatibility
This is an incomplete listing of the browsers which have been seen working with this skin.
- Works under Windows with: Firefox 3,2; Chrome 2; IE7,6; Safari 3; Opera 9.
Known Issues
None known.
Change Log
0.1.2 (5-Apr-2009)
0.1.1 (5-Apr-2009)
- new: Added PmWiki classes indent, outdent.
- bug: Fixed H3 font-size.
- bug: Skin now validates strict XHTML (note, pages may not validate if you use non-xhtml constructs).
- bug: $SkinName is case sensitive -- footer file was not loaded.
0.1.0 (4-Apr-2009)
- Initial release.
Credit
- The main layout and the CSS is based on the Skittlish theme for Mephisto, created by Cristi Balan.
Comments
I'd love to know if you use this skin, or even if you like or hate it. Head over to the Skittlish-Talk? to leave a comment or ask a question.