Sinorca < Skins > SkinTest   (talk | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

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!

Δ

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 (ZIP or TAR) and unzip it into your skins directory (usually pmwiki/pub/skins).
   • For recent PHP versions (5.3 - 7.0 or newer) please replace the file skins/skidoo/cookbook/detect_mobile.php with the more recent one from Cookbook:DetectMobile.
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 />'; 
#Only required if using the $HTMLNewline setting
$HTMLStylesFmt['skidoo'] = '.quickref br { display: none; }';
#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

• bug: Display issue when using $HTMLPNewline = '<br />'; in Edit quickref. (Reported by Fabrizio)
• bug: Increasing the font-size causes minor layout issues around the tabs.
• bug: TOC links in cause 1px displacement on hover.
• new: 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 user to resize left/right columns.

Change Log

1.0.6 (12-Jun-2010)

• chg: Renamed Skidoo.css to skidoo.css
• bug: Print css is incorrectly referenced. (Fixed by Fabrizio)
• bug: Minor 1px tab layout issues in Safari and Opera. (Fixed by Fabrizio)

1.0.5 (1-Mar-2009)

• fix: Corrected footer link to PmWiki/Cookbook. (ref EvilSeph)
• fix: 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.
• chg: Increased body font size.
• chg: Removed gui_edit. Use Edit Toolbar to get the new icons for the edit bar.
• chg: Removed guiedit to separate cookbook.
• chg: Formated skin.php to standard skin coding (colors, linkfmt).

1.0.4

Non-public release. Changes are in 1.0.5.

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. Head over to the talk page to leave a comment or ask a question.