PmWiki | Cookbook / CSSInWikiPages

Summary: Apply CSS styles via wiki pages

Status: Stable

Version: 2006-12-24

Prerequisites: pmwiki-2.0

Maintainer: DaveG

Users: (View ? / Edit)

Categories: Layout CSS

Download: stylepage.php Δ

Discussion: CSSInWikiPages-Talk

Question

Can I apply style sheet information to wiki pages on the fly by editing a wiki page?

Answer

Yes, there are three possible approaches: adding a markup rule; modifying the skin; or via the stylepage recipe.

1. Markup

The easiest mechanism allows styles to be applied using wiki markup. Create a stylesheet (in, for example, Site.DefaultStyleSheet) that looks something like:

   (:stylesheet:)
      .class { ... }
      element { ... }
   (:stylesheetend:)

And add the following stylesheet Markup rule in config.php (or another config file):

   Markup('stylesheet', '<[=',
     "/\\(:stylesheet:\\)(.*?)\\(:stylesheetend:\\)/sei",
     "\$GLOBALS['HTMLStylesFmt'][] = PSS('$1')");

The stylesheet will be applied to whichever page it is on, and can be included in other pages with a standard (:include:) directive:

   (:include Site.DefaultStyleSheet:)

The stylesheet, or include directive, could be added to a GroupHeader page in order to have that style be applied to the whole group.

If you want the stylesheet text to be invisible (e.g. if you're putting it on a GroupHeader page), mark it as a comment:

>>comment<<
(:stylesheet:)
  .class { ... }
  element { ... }
(:stylesheetend:)
>><<

2. Skin

Sometimes you might want the wiki to apply the sheet automatically without having to use (:include:).

You can apply styles to a page using the skin by putting something like the following in skin.php and typing css code into Site.StyleSheet:

global $pagename, $SiteGroup, $HTMLStylesFmt;

$pn = FmtPageName("$SiteGroup.StyleSheet", $pagename);
$page = ReadPage($pn, READPAGE_CURRENT);
if (!$page) { "The stylesheet page doesn't exist"; }
$stylesheettext = $page['text'];
$HTMLStylesFmt['skincss'] = $stylesheettext;

In any case, be careful with allowing CSS to be arbitrarily applied to a wiki page.

Note that loading of style pages will add the css styles to the html page head, and if you specify a lot of styles it will slow down page loading, especially as the browser may need to reinterprete values already received via the normal skin's css file(s). The script below addresses this by having the style page written into a cached file.

3. The `stylepage` Recipe

Download stylepage.php Δ and install in your cookbook folder and add to config.php:

include_once("$FarmD/cookbook/stylepage.php");

This adds the markup (:stylepage:), which will load css code from a default style page (set to Site.StyleSheet, but configurable), or by inserting a different page name in the markup, like (:stylepage Group.MyStyleSheet:), will load the css code from the page mentioned.

New: By default other style pages need to be in the $SiteGroup, so they can have the special protection this group offers. Setting $EnableDefautGroupStylesOnly= 0; will lift this restriction and allows style pages to be assigned in any group. You can also specify a different default group from $SiteGroup by setting $DefaultStyleGroup = 'GroupName'; GroupName being the name of this group, for example 'StyleGroup'.

In addition if you set $EnableStylePage = 1; in config.php it will load the default style page for all pages in your wiki, without need to use markup (:stylepage:).

This script is based on the code above, slightly modified and extended. The new version adds caching of style pages in a pub/cache/ directory, and loads the style sheet via standard HTML link syntax, improving downloading.

Contributor: HansB

This recipe was last tested on PmWiki version: 2.1.beta20
This recipe requires at least PmWiki version: 2

Releases:

0.1 - January 12, 2006
1.0 - January 26, 2006 ~ resolved error in markup, resolved issues with skin version, now they both work.
2006-12-24: Bugfixed new recipe specific cache variables.
2006-11-10: Added new recipe specific Cache variables, to give admins option of different cache location.
2006-10-28: Added $RecipeInfo
2006-08-29a: Modified password check to allow @nopass.
2006-08-29: Fixed $EnableStylePage and caching routine.
2006-08-25: Released much improved version with new css file caching.

Contributors

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

CSSInWikiPages