• View
• Edit
• History
• Attach
• Print
• Backlinks

NetstreamsSkin

<< Maguila | Skins | Neutral >> (test page)

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.
   • netstreams_tools-latest.tgz
   • netstreams_menu-latest.tgz
   • netstreams_skin-latest.tgz
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:

Colorscheme

The variables are:

• 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

• NetstreamsCMS
• NetstreamsSkin
• NetstreamsMenu

Contributors

Benjamin?

Comments