Recent Changes - Search:

PmWiki

pmwiki.org

edit SideBar

Skittlish

Summary: Skittlish allows site visitors to choose between fixed and fluid width, and between seven candy-inspired colours for the sidebar.
Version: 0.1.3 (25-May-2009)
Prerequisites: None
Status: Active
Maintainer: DaveG?
Categories: Skins
Download: Attach:skittlish.zip Δ
License: This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Please retain the links in the footer.

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?!

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

  1. Download the skin package (Attach:skittlish.zip Δ) and unzip it into your skins directory (usually pmwiki/pub/skins).
  2. 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 {$Group}.PageActions {$SiteGroup}.PageActions
TABS includes {$SiteGroup}.Skittlish-SiteNav {$Group}.SiteNav {$SiteGroup}.SiteNav

MAIN

no pages included

SEARCH BAR no pages included

RIGHT SIDE BAR includes {$SiteGroup}.Skittlish-SideBar {$Group}.SideBar {$SiteGroup}.SideBar

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.php by 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.3 (25-May-2009)

bug: Corrected charset meta tag close. (IDB)

0.1.2 (5-Apr-2009)

chg: Changed xhtml to transitional.

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)

Contributors: DaveG?

  • 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.

Edit - History - Print - Recent Changes - Search
Page last modified on July 12, 2009, at 06:39 PM