Skins

Enlighten

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

Summary: Enlighten is a two-column theme, several color options, fluid/fixed width, a top navigation tab bar, and traditional footer.
Version: 1.1.1 (20-Nov-2010)
Prerequisites: None
Status: Active
Maintainer: DaveG
Categories: Skins, BlogIt
Download: ZIP or TAR
License: Copyright 2010 David Gilbert licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Please retain the links in the footer.
Users: +12 (View / Edit)
Discussion: Enlighten-Talk

Color Picker

This skin provides a 2-column fixed or fluid width interface, with a number of color variations, and full support for the BlogIt blogging engine.

Click to enlarge

Feature Summary

  • Customizable: Main sections (headers and footers) of the page are stored as wiki pages, so you don't need to know HTML.
  • Works in either fixed or fluid width modes.
  • Title bar area includes an image.
  • 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.
  • Color switching: Easily switch skin colors, or create your own skin colors.
  • Supports removal of header/title/right/footer elements using directives on specific pages or site wide.
  • Fully CSS driven: 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

  • Download the skin package (ZIP or TAR) and unzip it into your skins directory (usually pmwiki/pub/skins).
  • Add the following to your local configuration file: $Skin = 'enlighten';
  • If you use a page logo, add this to config.php:
$PageLogoUrl="URL_TO_IMAGE";
  • Optionally set the logo height and width. The skin will calculate this for you, but if you know the dimensions you should specify them, including the units of measure (ie, 'px'):
$PageLogoUrlWidth='154px';
$PageLogoUrlHeight='24px';
  • If you do not use a page logo, or want to override the default logo, add this to config.php:
$PageLogoUrl="";
  • If you use BlogIt, add this to config.php, before including BlogIt:
$bi_SkinClasses=array('approved-comment-count'=>'.comments a', 'blog-entry'=>'.entry', 'blog-entry-summary'=>'.post');

Optional

Change the color (brown is the default). Refer to colors for more color options.

$SkinColor = 'orange';

Color Switching

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

$SkinColor = 'blue';

Or simply pass a parameter:

?color=red

You can try out the color schemes using the color selector menu. The included color schemes are:

  • brown
  • green
  • orange
  • blue

Header Background Image

Specify the image to be used on the right side of the header with a relative url -- relative to the skin directory:

$SkinHeaderBackground='brown/headerphoto.jpg';

Page Width

Specify a page width in either 'px' or '%'. The sidebar width will be used as a value of 'px' units.

$SkinWidth=850;
$SkinSidebarWidth=212;  #Value must be in 'px'.
$SkinWidthUnit='px';  #only use 'px' or '%'

If you change the width, you'll also need to alter both the left (#header #logo-box ) and right (#header .headerphoto) sides of the header. You'll need to ensure left and right sides of the header are set appropriately.

$HTMLStylesFmt['enlighten'] .= 
  '#header #logo-box { width: 390px; } '.
  '#header .headerphoto { width: 455px; } ';

BlogIt for Blogs

Enlighten fully supports the BlogIt blogging engine, automatically -- you don't need to do anything other than install BlogIt.

Page Layout

  • Blue: Included pages. These can be edited as normal PmWiki pages.
  • Green: PmWiki variables. Usually set in config.php.
  • Red: Disable section. Markup is for in-page use; SetTmplDisplay is for use in config.php.

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

  • Turn off sections on a page with markup (:noXXX:).
  • Turn off sections for the whole site in config.php by setting:
SetTmplDisplay('PageXXXFmt', 0);

Header

You can set the Title and the Tag-line by setting the following in config.php:

$WikiTitle = "My site";
$WikiTag   = "Site description";

The wiki file Site.SiteHeader can be overridden with a Group level page. If you want to change the layout of the header edit either {$Group}.SiteHeader or {$SiteGroup}.SiteHeader. The default value for the header is:

! %block sitetitle%[[{$ScriptUrl} | {$WikiTitle}]]
(:div class="sitetag":){$WikiTag}
(:divend:)

Top Navigation Tabs

In order to change the links available in the navigation tabs, edit Site.SiteNav, and use a list format as below:

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

Side Bar

The other likely change you'll want to make is on the Side Bar. In this case edit Site.SideBar, and use a list format below:

%sidehead% [[Header 1]]
* [[First Level]]
** [[Second level]]

Footer

The wiki file Site.SiteFooter contains the last modified date.

FAQ

Browser Compatibility

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

  • Works under Windows with: Chrome 2/3/4; Safari 3/4; Firefox; IE6/7/8; Opera 9.

Known Issues

  • chg: Font sizes render differently on different screen resolutions. (Reported by Xian)
  • chg: Don't make the background url dependent on the skin color. (Reported by Xian)

Change Log

1.1.1 (20-Nov-2010)

  • bug: Added HTMLFooter tag.

1.1.0 (12-Jun-2010)

  • new: Use blogit-skin to display blogit elements.
  • new: Allow header image to be set in config.php, $SkinHeaderBackground.
  • new: Added styling for DL, DD.
  • bug: In the sidebar, links to a non-existent page, and multiple links on the same line cause the line to split. (Reported by Xian)
  • bug: Incorrect reference to {*$LastModified}; XL translation did not work.
  • bug: Ensure anchor links in sidebar do not split to new line.

1.0.0 (24-Oct-2009) (rev 600)

  • First release.

Credit

  • The main layout and the CSS is based on the Enlighten theme, created by styleshout.

Comments

Show your support and , or help out and let me know if you have a . Love it or hate it, I'd like to know!

User notes +12: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.