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

CSSInWikiPages

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, (this does NOT override existing CSS.)

• ''It does override existing CSS unless the skin template willingly or mistakenly prevents it, notably the line <!--HTMLHeader--> should be after any skin-defined <link/> and <style> tags. I wrote about it here. Petko
  • Comment recovered from here's edit history
    You should place the line <!--HTMLHeader--> after you include all of your styles and scripts. This way a standard local customization, for example local.css or Group.Page.css will be able to override the skin styles and colors. This would make the START_HERE.css file totally unneeded, reverting to a standard skin behavior, and you can alter the instructions for local.css instead. Read the full page LocalCustomizations to learn more. -Petko February 21, 2019, at 08:52 AM

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:\\)/si",
     "mu_stylesheet");
  function mu_stylesheet($m) {$GLOBALS['HTMLStylesFmt'][] = $m[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Δ (for PHP 7 please get stylepage72.phpΔ instead) and install in your cookbook folder and add to config.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.

• This recipe requires at least PmWiki version: 2.2.56

• 2021-11-10: Updated for PHP 7.
• 2014-11-02: updated Markup definition for PHP5.5 compatibility
• 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.

See Also

Contributors

• JonHaupt
• Pm
• Anno
• HansB

Comments

See discussion at CSSInWikiPages-Talk