Skins

YAMLForth

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

Summary: Highly configurable skin with fixed-width 2-column layout based on the YAML 3.3 framework
Version: 2.1.1 (2010-12-05)
Prerequisites: pmwiki-2.2 (earlier versions might work too, haven't tried)
Status: Stable
Maintainer: Paul Wiegmans
Categories: Skins
Download: yamlforth-v2.1.1-20101205.zipΔ
Discussion: YAMLForth-Talk

!! Questions answered by this recipe

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

Description

YAMLForth is a highly configurable CSS-only tableless skin with a fixed width 2 column layout based on the YAML 3.3 framework (http://www.yaml.de).

YAML stands for "Yet Another Multicolumn Layout" (YAML). It is an (X)HTML/CSS framework for creating modern and flexible floated multi-column layouts. The purpose of designing a skin for PmWiki based on YAML is to have a skin design which uses standards compliant (X)HTML and CSS to provide for a consistent look and layout across different popular browsers.

Features:

  • Based on the (X)HTML/CSS-framework YAML version 3.3 build 101012
  • Design layout without tables, all by CSS
  • Fixed-width 2-column design with column order 31
  • Customisable sections through wiki pages: pageactions, header, footer, sidebar, navigation bar, search bar
  • Support horizontal and vertical navigation lists
  • integrated CSS print style sheet
  • Page sections can be turned on and off with markup.
  • Documentation owes a lot of inspiration to Ed Wildgoose (Yaml132) Thanks Ed!

Layout

The basic layout consists of a header and footer, with the main center section in-between, flanked on the left side by a fixed-width side column. The page is structured into the following sections. Each section can be configured from an associated wiki page and also made to "disappear" with special markup.

(Site|Group).PageActions

Header (Site|Group).PageHeader

Top Menu Bar (Site|Group).NavBar

Side Bar
(Site|Group).SideBar


Page Content
 

Footer (Site|Group).PageFooter

Each section can be turned off for display.

  • Turn off a section by special wiki markup (:noXXX:)
  • Turn off a section globally in config.php with setting SetTmplDisplay('PageXXXFmt', 0);
Page Actions

This contains the actions a user can perform on a page. Modify to add anything else you need

  • Configuration on Site.PageActions or any Group.PageActions page.
  • Turn off this section on a page with markup (:noaction:).
  • Turn off this section globally with SetTmplDisplay('PageActionFmt', 0); in config.php.
Header

The pagewide header contains the site logo. Modify to add anything else you need

  • Configuration on Site.PageHeader or any Group.PageHeader page.
  • Turn off this section on a page with wiki markup (:noheader:).
  • Turn off this section globally with SetTmplDisplay('PageHeaderFmt', 0); in config.php.
Navigation Bar

The navigation menu bar underneath the header can be used for action links and other links.

  • Configuration on Site.NavBar? or any Group.NavBar page.
  • Turn off this section on a page with wiki markup (:notabs:).
  • Turn off this section globally with SetTmplDisplay('PageTabsFmt', 0); in config.php.
Side Bar

The left hand column of fixed width holds the side bar for the main site navigation links. The SideBar supports the use of H1 elements for heading elements and up to 4 levels of nested list elements to use as a vertical navigation list. It uses the H6 element for a menu title.

  • Configuration on Site.SideBar or any Group.SideBar page.
  • Turn off on a page with markup (:noleft:).
  • Turn off this section globally with SetTmplDisplay('PageLeftFmt', 0); in config.php.
Page Content

This is the main content area.

Footer

A page wide footer at the bottom for copyright or other sitewide info.

  • Configuration on Site.PageFooter? or any Group.PageFooter page.
  • Turn off this section on a page with markup (:nofooter:).
  • Turn off this section globally with SetTmplDisplay('PageSearchFmt', 0); in config.php.
Search Bar

The search bar offers a search entry field and a search button. It is part of in the Side Bar.

  • Turn off this section globally with SetTmplDisplay('PageSearchFmt', 0); in config.php.

Header background image

The background of the page-wide header shows the image bg.png (/pub/skins/yamlforth/images/bg.png). PmWiki shows the header logo (/pub/images/headerlogo.png) on top of the header.

You get an especially nice effect when the Header page is left empty and the height of the header logo image is carefully chosen so that the top menu background is seamless to the header background.

Browser Compatibility

Should work on anything that works with YAML. I have tested it on Firefox, Safari and IE 8. Small differences can be experienced on IE 7 and older, which doubtlessly can be fixed, given the right amount of time and attention..

Installation

For PHP 5.5 and 7.2 or newer, please get yamlforth72.phpΔ, rename it to yamlforth.php and replace the one in pub/skins/yamlforth with it.

Demo sites

This skin is used at :

Notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

Release notes

  • Version 1.0.0: 2009-12-22: First public release
  • Version 2.0.0: 2009-12-28: Update
    • New features
      • Supports vertical navigationlist in Sidebar with hover-links
      • Fixed typo that caused omitting print style sheet
      • Template to match YAML 3.2 structure of basic page(new skip link solution
      • Clear customizable settings in user-CSS notabene.css.
  • Version 2.0.1: 2010-07-15: bugfix
    • Fixed: missing HTMLFooter in template
    • Support for IE6 is dropped: http://wijstoppenook.nl
    • Added "Powered by PmWiki" to PageFooter.
    • Removed section TitleBar in documentation because there exists no such thing.
    • Added Page Section PageSearchFmt, which can be turned off
    • Added page section PageTabsFmt, which can be turned off
  • version 2.1: 2010-11-25: update
    • CSS is now based on YAML 3.3
    • fixed: IE6 and IE7 not patched because of wrong path to yaml/core/iehacks.css. This resulted in distorted display of column 3 (SideBar).
  • version 2.1.1: 2010-12-05
    • Updated comment in yamlforth.css to match actual version: YAML 3.3
    • Made the final style sheet to look more like the YAML examples.
    • Small changes:
      • Structural changes in CSS. CSS is divided further to seperate YAML and PmWiki specific CSS and user customizations. This will make it easier to upgrade to newer version of the skin, and to apply future versions of YAML too.

See also

Contributors

Comments

This space is for User-contributed commentary and notes. Please include your name and a date (eg 2007-05-19) along with your comment. Optional alternative: create a new page with a name like "ThisRecipe-Talk" (e.g. PmCalendar-Talk).

See discussion at YAMLForth-Talk

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