<< Sinorca | Skins | SomethingCorporate >> (test page)

This skin provides a simple, low distraction, 3-column interface that provides rapid access to the information you need. It's designed so that it's easy to change the content in any of the wiki sections (headers, footers, etc), and easy to change colors to provide distinction across farms.

I'd love to know if you use this skin, or even if you like or hate it -- leave a comment below!

Update 18-Oct-2007: Fixed a minor problem with sectionedit tags showing on the print/mobile version.

Δ

Click to enlarge

Feature Summary

Note: This page is not using SectionEdit, and so the "section edit" and "section edit on double-click" features of the skin are not visible on this page. Refer to the demo for a sample of that functionality.

• Inline tabs: Provide rapid access to commonly used information without reloading the page; active tabs is remembered across sessions.
• Recent activity: Rapid access to links for recently edited pages.
• Table of contents: Dynamically generated TOC with ability to jump to a section on click.
• Editable: Edit page sections with a double-click.
• PDA mini-skin: renders wiki in a minimal format for useful PDA/mobile usage.
• Resizable edit box: Resize the height of the page edit textbox to suit your needs; size is remembered for each user across sessions.
• Customizable: All sections (headers, footers, tabs) of the page are stored as wiki pages, so you don't need to know HTML.
• Admin bar: Administration bar provides links to customize content in all sections of the skin.
• Edit icons: Provides icons for commonly used wiki markup -- no more forgetting which markup to use!
• Color switching: Easily switch skin colors (8 basic versions come standard), or create your own skin colors.
• Supports removal of left/right/header/footer elements using directives on specific pages or site wide.
• Fully CSS driven, is valid XHTML, for those that care about such things. All files are fully commented, and the design has been made easy to modify. The CSS used for layout and coloring are in separate files allowing easy customization of colors, without having to wander throughout the layout styles.
• Fully liquid flow across all three columns.

Demo

Skidoo extends functionality provided by other Cookbooks, like SectionEdit. Unfortunately SectionEdit is not enabled at PmWiki, so you can't see that functionality here. So, head over to the Skidoo homepage, and see a fully functional demo. Feel free to edit the Sandbox, and checkout the additional color themes.

Download and Installation

1. Download the skin package (skidoo.zipΔ) and unzip it into your skins directory (usually pmwiki/pub/skins).
2. Add the following to your local configuration file:

$Skin = 'skidoo';
SDV($ActionSkin['print'], 'skidoo');

1. Optional: Add a specific color theme (darkblue is the default). Refer to colors for more color options.

SDV($SkinColor, 'green');

1. If you are re-using the config.php from an older version of PmWiki, make sure the following line exists. If it doesn't, then add it:

$EnableRelativePageVars = 1;

1. Finally, I'd recommend these settings -- they are not necessary for the skin to function, are generally useful settings:

#Makes a carriage returns in the edit window act like newlines in display mode
$HTMLPNewline = '<br />'; 
#Prevents PmWiki group from appearing in searches.
$SearchPatterns['default'][] = '!^PmWiki\\.!';  

Features

Color Switching

You can switch the color theme site wide by updating your config.php with:

SDV($SkinColor, 'green');

Or simply pass a parameter:

?color=yellow

The included color schemes are: blue, dark blue, green, light green, orange, purple, red, yellow.

If the existing color themes don't do it for you, simply:

1. Copy one of the existing color css files (named color-xxx.css in the skidoo/ directory)
2. Change the colors appropriately. To change the main header/footer colors update the styles:
   • #wikitext h2 (border-top-color)
   • #contentHeader (background-color)
   • .tabHolder, .tabs-nav a (background-color)
   • #footer (background-color)

Tabs

Tabs can be used to store links of information you need ready access to, without reloading the page. The active left and right tabs will be remembered as you navigate around your site, and between sessions.

By default Skidoo has 6 tabs, 3 on the left, and 3 on the right. You can add or remove tabs as you need, and change the content in the tabs.

• Left tabs
  • Site menu: the standard site-wide menu Site.SideBar.
  • Group menu: the standard group level menu held in Group.SideBar.
  • Admin tools: Provides rapid edit access to all elements of Skidoo.
• Right tabs
  • Table of Contents: Dynamically generated table of contents for the current page.
  • Group pages: All pages in the same group as the current page.
  • Site pages: A list of the last 30 edited pages.

Table of Contents

Skidoo will automatically generate a table of contents for each page. By default the TOC appears in the first tab on the right sidebar. Each entry on the TOC can be clicked to rapidly jump to that heading. By default headings levels 2, 3, and 4 are included.

Double-click to Edit

All sections can be edited by simply double-clicking them. This includes the sidebars, header, footer, and tabs. If you use SectionEdit, Skidoo will also allow the content of each heading level to be edited by double clicking. That way you can edit the content of a single section, rather than the whole page.

Resizable Editing Area

From the edit page, drag the horizontal bar below the text entry area -- you can drag up or down. The size of the edit box will be saved automatically for you.

PDAs and Mobiles

Skidoo will detect whether you are using a mobile device, and will change the layout of the page to reduce the clutter. Currently Skidoo uses the same skin you'll see if you print a page.

Printing

The print skin layout is modified to include a much simplified layout, but with full access to all the pages on the wiki. The header is modified to include a link to the content of the Site tab, as well as the existing content of the header. For easier navigation on long pages, the header is duplicated as the footer.

Recipe Support

Skidoo has built-in support for SectionEdit, making it possible to double click sections of the page content (between headers) to edit that section only. Simply:

1. Download and install SectionEdit
2. Add this line to your config.php:

  include_once("$FarmD/cookbook/sectionedit.php");

1. In addition I'd recommend the following settings:

$SectionEditWithoutHeaders = false;
$SectionEditAutoDepth = 4;
$SectionEditMediaWikiStyle = true;
$SectionEditInIncludes = true;

Page Layout

Changing the Content of the Skin Sections

The third tab on the left side contains links to all the pages that make up the Skidoo skin. Clicking these links opens the page immediately in edit mode.

Header

Typically you'll want to change the first list in the Header. I use this to provide links to active projects -- the list changes over time, as projects end, at which point I remove the link in the header and put an entry in a project archive page.

Site Menu

The other likely change you'll want to make is on the Site Bar. This might be used to provide links to information that doesn't change over time: Archives, Reference, tele-con ID's :)

Tabs

The final area you'll likely want to change is the tabs. Click the Tabs link under Admin, and you'll see that the defintion of both the left and right tabs.

Within this page, each DIV represents a tab. The DIV title will be used as the tab text, and the content of the DIV will be the content of the tab. For example, the first tab on the left side is the Site tab:

[[#leftTabs]]
(:div title="site":)
(:include {$SiteGroup}.SideBar:)
(:divend:)

You can see the title, becomes the name of the tab, and in this case we're including the content of a separate page Site.SideBar. You can either add new content here, or edit the Site.SideBar page directly.

A DIV with an id="Skidoo-TOC" will become a clickable Table of Contents. For example, the first tab on the right side is defined as:

(:div title="TOC" id="{$SkinName}-TOC":) 
(:divend:)

Skidoo Layout

Skidoo consists of a header and footer, fixed-width left and right columns, and a central content column. You can quickly edit the content of any section by simply double-clicking it, or by using the Admin tab.

Each section can be removed from the page or the site with special markup.

Header

The site wide header contains a list of key pages that you define, and a list of the last 7 recently edited pages, as well as the search box.

• Turn off on a page with markup (:noheader:).
• Turn off the right bar for the whole site in config.php by setting:

SetTmplDisplay('PageXXXFmt', 0);   #XXX: Left,Right,Header,Footer

Left and Right Bar

Both side columns are of fixed width and hold the a set of tabs.

• Turn elements off for a specific page with markup (:noleft:) or (:noright:).
• Turn off the right bar for the whole site in config.php by setting:

SetTmplDisplay('PageXXXFmt', 0);   #XXX: Left,Right,Header,Footer

Title Bar

The title bar consists of a link to the current group's "main page", and the page title. You can edit this, but as it serves as the page header, there's probably no reason to.

Footer

Contains the version of PmWiki that you are running, with a link to the PmWiki version page -- provides a quick way to see if your site is up-to-date. Also, the Skidoo version number, and a link to this page.

• Turn off on a page with markup (:nofooter:).
• Turn off the right bar for the whole site in config.php by setting:

SetTmplDisplay('PageXXXFmt', 0);   #XXX: Left,Right,Header,Footer

FAQ

Browser Compatibility

This is an incomplete listing of the browsers which have been seen working with this skin.

• Works under Windows with: Firefox 1.5; Firefox 2; IE7; IE6; Safari 3; Opera 9.

How to change the font-size?

In order to maximize the information displayed on a page, the Skidoo font is quite small. This doesn't suit everyone. All the font-sizes were proportionally specified, so you can simply change the body font-size and everything else will follow -- update Skidoo.css by changing the 'body' selector 'font-size' property:

body {
/* Change this to alter the font-size site-wide -- 130.1% is reasonably large */
   font-size: 100.1%;   
   margin: 0;
   padding: 1em 3em 3em 3em;
   } 

I don't like the color of links on the page

All color properties are stored in color-XXX.css, where XXX is the name of the color scheme. To update all links in the main body of the wiki-page, change:

#wikitext a {
   color: #ff8c00;
   }

Known Issues

Also refer to the todo list for know issues that have a planned fix date.

• bug: Minor 1px tab layout issues in Safari and Opera.
• bug: Increasing the font-size causes minor layout issues around the tabs.
• bug: Horizontal scrollbar appears, even though the body of the page seems not to require a scrollbar. Change PRE style to include overflow:auto, which will prevent page level scrollbars, by putting scrollbar on the PRE section.
• bug: TOC links in cause 1px displacement on hover.
• bug: GUI buttons for ordered list and unordered list have been switched around. (ref EvilSeph)
• bug: Link in the right of the footer links to the wrong page. (ref EvilSeph)
• chg: Provide a way to customize the TOC heading levels included.
• new: Provide a means of collapsing/expanding header levels within the content from the TOC.
• new: Allow use to resize left/right columns.

Change Log

1.0.3 (18-Oct-2007)

Contributors: DaveG

• Added: Fixed a minor problem with sectionedit tags showing on the print/mobile version.

1.0.2 (8-Oct-2007)

Contributors: DaveG

• Added Detect Mobile to skin so it is automatically include, simplifying installation.

1.0.1 (7-Oct-2007)

Contributors: DaveG

• Compatibility with Safari, Opera, IE6, IE7, Firefox.
• Expand range of mobile devices detected.
• Update footer: add newline character; update Skidoo URL.
• Color parameter does not over-ride config.php value.
• Alter edit resize bar so that no custom Site.EditForm is required.
• Increase text size for .varlink and other wiki classes.

1.0.0 (1-Oct-2007)

Contributors: DaveG

• Initial release.

Credit

• The main layout and the CSS was inspired by Skidoo, at Ruthsarian Layouts.
• jQuery, the excellent javascript library makes much of this skin possible.
• The inspiration for the rounded corners and main page border came from the createElement function found at 456 Brea Street, which I converted to jQuery for this skin.
• Mobile device detection is performed by the PHP script available from Andy Moore.

Comments

I'd love to know if you use this skin, or even if you like or hate it -- edit this page and leave a comment below!

• Brendon, 2007-10-03: I love this skin, it doesn't work too well out of the box with Safari though. Mostly the menubar across the top has gaps in it, and the horizontal menu doesn't line up well. Still, nice work!
• DaveG: I'll work on making Skidoo Safari compliant this weekend -- expect an update! Thanks for the feedback.
• Brendon, 2007-10-08: Looks much better in Safari now, thanks! The topbar and tabs and everything so far look proper to me now.

• Gart, 2007-10-03: Love this skin, one day it'll be the PmWiki default!
• DaveG: Thanks!

• Ian, 2007-10-05: Seems to be a problem installing on a wiki farm. Compare the following two bits of page source from one of my sites:

http://www.banter.local/ramblings/pub/skins/grease-mobile/grease-mobile.css
http://www.banter.local/pmwiki/pub/skins/skidoo/Skidoo.css

The skin is somehow inserting pmwiki instead of my site's directory. In config.php I have:

$ScriptUrl = 'http://www.banter.local/ramblings';
$PubDirUrl = 'http://www.banter.local/ramblings/pub';

• 5-Oct-07 DaveG: I have this working on farms, so there's not a general problem there. I'll take a look at what might be going wrong in this case. (I do use script and pub dir in the skin, so the problem may lie there.
  Looks point 4 on the Skin Templates might be relevant here. Skidoo uses the $SkinDirUrl to determine where the skin files are located. This path is determined by PmWiki based first on the value of $PubDirUrl/skins/$Skin, and then on $FarmPubDirUrl/skins/$Skin"). It's possible that you are setting $FarmPubDirUrl, which points to /ramblins?
• 8-Oct-07 Ian: Thanks setting $FarmPubDirUrl correctly fixed the problem.

• hua, 2007-12-10: Just in time :) Am in the midst of setting up a site to allow note taking. The rounded corners, shadows, color themes and graphics used made it professional looking
• DaveG, 9-Dec-2007: Glad you like it, thanks.

• EvilSeph, 8-Jan 2008: Thanks for this skin, I love it. :)
  It seems the GUI buttons for ordered list and unordered list have been switched around. Also, the link in the right of the footer links to the wrong page. If I come across any other bugs, I'll let you know.
  Thanks again, this skin is great!
• DaveG, 11-Jan-2008: Thanks for the feedback. I've added your findings to the bug list -- fixes to come soon!