Recent Changes - Search:

PmWiki

pmwiki.org

edit SideBar

Equilibrium

Summary: Equilibrium is a blog-oriented skin, with a focus on simplicity. Along with the typical sidebar and top navigation tabs, this skin presents blog summaries in column oriented, rather than the traditional vertical layout.
Version: 0.1.1 (19-Jun-2009)
Prerequisites: None
Status: Active
Maintainer: DaveG?
Categories: Skins, Blog
Download: Attach:equilibrium.zip Δ
License: Dual licensed under the MIT and GPL licenses.

Equilibrium is a blog-oriented skin, with a focus on simplicity. Along with the typical sidebar and top navigation tabs, this skin presents blog summaries in column oriented, rather than the traditional vertical layout. Although primarily two-tone, the skin has a selection of color options, with full support for the BlogIt blogging engine (BlogIt is not required in order to use this skin). If you use BlogIt you can display a cover image on the blog-summary page.

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. BlogIt is not required, but in this case it's highly recommended if you wan to achieve the look in the snapshot on the right. If you're not using BlogIt the skin will work fine, but you won't get the column based front-page layout, nor the cover-images on the blog-summary -- things won't look like the image on the right.
  • Additional colors provided (black, red, orange, dark-orange, light-blue, pink, purple, gold, green, blue, mint, dark-blue).
  • Supports removal of header/title/right/footer elements using directives on specific pages or site wide.

Download and Installation

  1. Download the skin package (Attach:equilibrium.zip Δ) and unzip it into your skins directory (usually pmwiki/pub/skins).
  2. Add the following to your local configuration file:
$Skin = 'equilibrium';
$MarkupExpr['mod'] = '($args[0] % $args[1])';

Demo

You can find a demo, which uses BlogIt over on the BlogIt demo site.

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: black, red, orange, dark-orange, light-blue, pink, purple, gold, green, blue, mint, dark-blue.

If the existing color themes don't do it for you, or you want to over-ride an existing color-theme simply add this line to your config.php:

$SkinColor = 'pumice';
$ValidSkinColors['pumice'] = array(
   'block-highlight-back'=>'pumice','entry-title-text'=>'#000',
   'text-highlight'=>'#0B96D0','block-highlight-text'=>'#fff',
   'title-text'=>'#000');

BlogIt!

If you choose to use BlogIt, you'll be able to get the following features:

  • Column oriented blog summaries, rather than the normal row-based summaries.
  • A 'cover-image' displayed on the blog summary.

Column Based Blog Summaries

You can add some styling to your blog summary page to get the column effect, and to style page headers. Use:

  • class="featured": Provides styling for the larger 2-column summary. Also add "cols=2" to your includesection.
  • class="latest": Provides styling for the smaller 4-column summary. Also add "cols=4" to your includesection.
  • To identify an H2 header as being the head of a featured or latest section apply the class "section-head"
(:div11 class="featured":)
!! %block section-head%Featured
(:includesection "#blog-summary-pagelist blogid=blog1 count=2 status=sticky cols=2":)
(:div11end:)

(:div11 class="latest":)
!! %block section-head%Latest Posts
(:includesection "#blog-summary-pagelist blogid=blog1 count=4 status=publish cols=4":)
(:div11end:)

Adding Blog Entry Cover Images

Cover images are displayed when using BlogIt, for each blog entry within 'latest' and 'featured' sections. The cover image will not be displayed on the main blog entry page -- but you can display it yourself.

In order to add a cover image to the blog entry in blog summary mode, add this to your blog entry:

(:featured_image:Attach:walle.jpg:)

You can also refer direct to a url:

(:featured_image:http://my.domain.com/mypic.jpg:)

If you'd like to see the image within the entry itself then, use the PTV, with some styling -- the example below will float the image to the right:

%rfloat%{$featured_image}

Page Layout

Header

The wiki file Site.Equilibriun-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 add the following to your config.php:

$PageLogoUrl='http://url.to.logo/logo.png';
$PageLogoUrlWidth='100px';

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 Search bar, in addition to Site.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,Tabs

Overriding or Adding Styling

You can change or over-ride any CSS styles by adding this to config.php, using whatever CSS selectors and attributes are appropriate:

$HTMLStylesFmt['equilibrium'] = '#top h1 a {width: 20px; height: 60px;}';

FAQ

Browser Compatibility

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

  • Works under Windows with: Chrome 3,2; Firefox 3,2; IE7,6; Safari 3; Opera 9.

Known Issues

  • Improve styling when BlogIt is not used (edit hints, H2 styling).
  • Ensure actionbar is visible when no tabs are used.
  • Logo is not displayed.

Change Log

0.1.1 (19-Jun-2009)

  • new: Allow overriding of css with $HTMLStylesFmt['equilibrium']
  • chg: Improved styling when blogit is not used.
  • chg: Combined IE 6/7 stylesheets; removed extraneous styling.
  • chg: Default skin color theme is now black.
  • chg: Improved formatting of new EditQuickRef page.
  • bug: Corrected html headers and meta tags (skin now validates).
  • bug: Ensure pageactions are visible when tabs are not present.
  • bug: Page logo is now displayed.
  • bug: Removed unused js script include.

0.1.0 (15-Jun-2009)

  • First release.

Credit

  • The main layout and the CSS is based on the Equilibrium theme for Wordpress, created by MadeByOn.

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:53 PM