Drop Shadow

<< DropDown | Skins | Evolver >> (test page)

This skin provides a 2-column interface, with a right-side navigation bar, top navigation tabs, and a selection of color options.

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

Δ

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

Download and Installation

1. Download the skin package (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, [[Cookbook.DropShadow?color=yellow | 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

The wiki file Site.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.SiteTabs, and use a list format as below:

* [[Grp/MyPage | Page 1]]
* [[Grp/MyPage | Page 2]]
* [[Grp/MyPage | Page 3]]

Right Sidebar

The right sidebar Site.SkinSidebar includes the PageActions, and the Search bar, in addition to the Site.Sidebar. The sidebar is wide enough to include some basic text, or other short sections. Edit Site.SkinSidebar, using the format below:

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

(:include {$Group}.Sidebar {$SiteGroup}.Sidebar:)

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

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

Also refer to the Planned Releases for known issues that have a planned fix date.

Planned Releases

• None planned yet.

Change Log

• Initial release.

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 -- edit this page and leave a comment below!

• AdamShand, 7-Dec-2008: This is a great theme, many thanks for the work involved in porting it! I'm in the process of experimenting with it for a local meditation group who I'm helping create a web site for.
• DaveG, 5-Dec-2008: Thanks for the feedback, glad you like the skin. Good luck with your site!
• '''Kai (celanio Blog)(approve links), 2008-12-10: corrected your date 2x from 2009 to 2008. Maybe I choose the skin for our next internal project cause I like it.