Recent Changes - Search:

PmWiki

pmwiki.org

edit SideBar

Drop Shadow

Summary: DropShadow provides a simple two column interface, and includes top navigation tabs.
Version: 1.1 (1-Mar-2009)
Prerequisites: None
Status: Active
Maintainer: DaveG?
Categories: Skins
Download: Attach:dropshadow.zip Δ
License: Dual licensed under the MIT and GPL licenses.

This skin provides a 2-column interface, with a right-side navigation bar, top navigation tabs, and a selection of color options, with 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.
  • Additional colors provided (red, orange, yellow, green).
  • Supports removal of header/title/right/footer elements using directives on specific pages or site wide.
  • Fully CSS driven: 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.

Download and Installation

  1. Download the skin package (Attach:dropshadow.zip Δ) and unzip it into your skins directory (usually pmwiki/pub/skins).
  2. Add the following to your local configuration file:
$Skin = 'dropshadow';

Color Switching

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

$SkinColor = 'red';

Or simply pass a parameter:

?color=orange

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

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

  1. Copy one of the existing color files, named color-XXX.css in the dropshadow/ directory. For instance color-pumice.css.
  2. Change the colors appropriately.
  3. Add this line to config.php, replacing the colors with your new one(s). The file name must match the name of the color you add to the array:
$ValidSkinColors = array('pumice', 'pink');
  1. Set the skin color in config.php
$SkinColor = 'pumice';

Page Layout

HEADER {$Group}.SiteHeader {$SiteGroup}.SiteHeader {$SiteGroup.DropShadow-SiteHeader-] TABS includes {$Group}.SiteNav {$SiteGroup}.SiteNav {$SiteGroup}.DropShadow-SiteNav
MAIN

no pages included

ACTION MENU includes {$Group}.PageActions {$SiteGroup}.PageActions

SEARCH BAR no pages included
RIGHT SIDE BAR includes {$Group}.SideBar {$SiteGroup}.SideBar {$SiteGroup}.DropShadow-SideBar

FOOTER no pages included

Header

The wiki file Site.DropShadow-SiteHeader contains a sample including site title, and site tag. The Site level page can be overridden with a Group level page.

To include a site logo simply change the (:if false:) sections to (:if true:), and alter the text to suit you site.

(:if false:)
(:div class="sitelogo":)URL-TO-LOGO
(:divend:)
(:if:)
(:div1 class="siteheader":)
(:div2 class="sitetitle":)
[[http://pmwiki.com/Cookbook/DropShadow/ | Drop Shadow Theme]]
(:div2end:)
(:div3 class="sitetag":)
Just another PmWiki weblog
(:div3end:)
(:div1end:)

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]]

Right Sidebar

The right sidebar includes the PageActions, and 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:

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

You can use either first level headers (!), or the typical %sidehead% classes found in Site.SideBar.

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.
  • Turn off sections for the whole site in config.php by setting:
SetTmplDisplay('PageXXXFmt', 0);   #XXX: Header,Action,Right,Title,Search,Tabs

Styles

DropShadow comes with a number of classes, typically used in a Blog:

blockquote

>>blockquote<<
Here's the block quote sample.
>><<

Here's the block quote sample.

End of Post Footer

Typically used to format date and category information, the classes postmetaleft and postmetaright provide areas on the left and right, at the end of the blog post.

(:div1 class="postmeta":)
(:div2 class="postmetaleft":)
30 November 2009 | Filed Under [[PmWiki]]
(:div2end:)
(:div3 class="postmetaright":)
[[PmWiki|Leave a Comment]]
(:div3end:)
(:div1end:)

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; IE7,6; Safari 3; Opera 9.

Known Issues

  • bug: #searchdiv -- semi-colon after padding should be a colon. (IDB)
  • bug: HTMLFooter is missing from skin template. (IDB)

Change Log

1.1 (1-Mar-2009)

  • new: Added support for BlogIt.
  • new: Added #subcontent styling (for sidebar list icons).
  • new: Added directives nosearch, notabs, noaction, noright.
  • new: Added fieldset to searchbox for xhtml compliance.
  • chg: Altered commentblock header to match h1 style.
  • chg: Changed files searched for footer content. (Skins.SiteFooter Site.-SiteFooter Site.SiteFooter)
  • chg: Changed files searched for header content. (Skins.SiteHeader Site.-SiteHeader Site.SiteHeader)
  • chg: Formated skin.php to standard skin coding (colors, linkfmt).
  • chg: Link to stylesheet rather than import.
  • chg: Removed header automatic decrease (from ! to !!, etc).
  • chg: Removed use of SkinSidebar.
  • chg: Standardized tabs, navigation, footer naming, and search order.
  • fix: Header now point to current page, not to Title.
  • fix: Make header text link to root, using $WikiTitle.
  • fix: Page header now refers to actual URL, not $FullName which contained a '.' not a '/'.
  • fix: Standardized skin identification text in footer.

0.0.1 (30-Nov-2008)

Contributors: DaveG?

  • Initial release.

Credit

  • The main layout and the CSS is based on the Drop Shadow theme for Wordpress, created by Brian Gardner.

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.

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