PmWiki | Skins / Netstreams browse
Netstreams
Subject: Skins
Subject Directory

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

Summary: A skin entirely based on editable skin sections with a desktop-application like menu and php generated css files wich allows one to use a simple colorscheme.
Version: 009bX
Prerequisites: pmwiki2.2.X
Status: Experimental
Maintainer: Benjamin?
Categories: Skins

Questions answered by this recipe

Skin Sections
Entirely bases on editable skin sections. Every skin section can be enabled/disabled.
Color Scheme
Define a color sheme and use it in all css files I may use.
Layout Settings
Be able to easily configure the most common layout settings like site-dimensions, backgrounds and fonts.
Flexible Configuration
All the settings above can be configured for the entire site, a specific group or a single page.
Desktop-Application like Menu
I would like to have access to all actions and config options at the same place. So I want a menu which stays fixed at the top of the webpage.

This section is optional; use it to indicate the types of questions (if any) this recipe is intended to answer.

Description

A flexible skin width webbased configurable (via form or PTV's) layout settings , desktop-application like menu and color scheme based css generator.

Try out a demonstration: http://cms.netstreams.org. Login/Password is Author/test or Admin/test.

Installation

  1. Download the package listed below and copy it into your pmwiki directory.
  2. Copy the sample config file doc/netstreams/sample-config_menu.php into /local/config.php or use it as sample to update your config.php file.

Customization

This part is a technical explanation how config variables work. Beside setting them manualy, it's easyer to use a form. However forms are not part of netstreams.skin. A solution for this is integrated in Cookbook:NetstreamsCMS.

Skin settings are stored as PageTextVariables on 3 different configuration pages, for the entire site, a specific group or a single page. Page settings override Group settings, Group settings override Site settings.

Here the default settings of the configuration page names:

 $ConfigPageStringSite 	= 'SiteConfig.Data';    \\side width
 $ConfigPageStringGroup = '$Group.GroupConfig'; \\current group
 $ConfigPageStringPage 	= '$Group.$Name';       \\current page

To configure the Color Scheme, Layout or Skin Section, set a PTV on the appropriate configuration page. The variable names consists of the names listed below plus a "config location"-prefix. The prefixes are:

  • site_
  • group_
  • page_
Example 1
Set the color scheme CS_baseA for the entire site to red. Add the PTV site_CS_baseA with value red on the page SiteConfig.Data.
Example 2
To disable the skin section ColLeft in the group Blog. Add the PTV group_ColLeft with the value 0 on the page Blog.GroupConfig.

Skin Sections

You can show/hide skin sections either by markup or via page text variables. Markup overwrites PTV configuration.

The variables are:

  • Header
  • Navigation
  • ColLeft
  • ColRight
  • Footer

The values are:

defaultno value
show1
hide0

Colorscheme Variables

  • $CS_baseA
  • $CS_baseA_bright
  • $CS_baseA_dark
  • $CS_highlight
  • $CS_highlight_bright
  • $CS_highlight_dark
  • $CS_system
  • $CS_system_bright
  • $CS_system_dark

As values use standard css color definition.

Layout Variables

As values use standard css.

The variables are:

  • $site_width
  • $site_background
  • $body_background
  • $standard_fontSize
  • $standard_color
  • $standard_fontFamily
  • $links_color
  • $links_fontFamily
  • $heading_color
  • $heading_fontFamily
  • $header_color
  • $header_background
  • $header_fontFamily
  • $colleft_width
  • $colleft_fontSize
  • $colleft_background
  • $content_fontSize
  • $content_background
  • $colright_width
  • $colright_fontSize
  • $colright_background

Additional css files

To ad your custom css files:

  • Add the path to your css file to the $csspatharray, example: $csspatharray['mycss'] = "$FarmD/pub/mycss.css";
  • Use the config variables above instead of static css fefinitions.

CSS File:

a { color:$CS_baseA }

Notes

This is a experimental release. Suggestions and bug reports are very welcome.

Release Notes

02-01-2009 ...

  • Daily builds

29-11-2008

  • many changes and improvements

13-11-2008

  • removed string specification inside the css file

31-10-2008

  • added a $csspatharray for custom css files.

28-10-2008

  • some minor changes

23-10-2008

  • passes w3c xhtml/css validation

20-10-2008

  • Changed PTV Left/RightBar to ColLeft/Right

14-10-2008

  • Added layout config vars

13-09-2008 experimental

  • Initial Release

See Also

Contributors

Benjamin?

Comments