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

LocalCSS

Note: PmWiki includes this function since version 2.2.119, but the variable names are different. If you enable the core feature, please disable the current recipe, and change the variable names in your configuration. The documentation below still applies.

Description

Flexible CSS compilation from a wiki page.

This function allows a wiki administrator to apply CSS to pages or groups of pages in the wiki by adding the CSS code to a special Site.LocalCSS page. Every CSS snippet can be applied to selected pages, groups or both in a more flexible way than the built-in inclusion of pub/css/local.css files.

The function also supports simple variable expansion during the compilation.

Installation

PmWiki version 2.2.119 or newer: Add to config.php:

PmWiki version 2.2.118 or older:

• Get localcss.phpΔ (alt. download localcss.php) and place it in your pmwiki/cookbook directory.
• Add to local/config.php such a line:

Usage

The recipe searches the Site.LocalCSS page text for code embedded into [@...@] preformatted blocks:

 [@ *
   a { text-decoration: none; }
@]

[@ Main.*,-Main.HomePage
   #wikileft { color: green; }
@]  

In the above examples, the first lines in the [@...@] blocks contain the page patterns:

• you can use a list of items separated by commas (no spaces);
• each item can contain wildcards '*' which match any sequence of characters in the page name;
• if the item is preceded by a minus '-', then pages matching the pattern are excluded.

The CSS code that follows will be applied to all pages in the wiki which match the page pattern.

If later in the LocalCSS page there is another [@...@] snippet, it will also be parsed and applied to the matching pages. A single page may match multiple patterns, then multiple snippets will be inserted, in the same order.

Demo/Sandbox: The recipe is now enabled on the Test group and you can insert CSS in the page Test.LocalCSS (the edit password is style).

The following example will make some important pages of the wiki to appear bold in RecentChanges. This makes it easier to notice important pages/groups for review:

 [@ *.*RecentChanges*
#wikitext a[href$="HomePage"], 
#wikitext a[href$="SideBar"], 
#wikitext a[href*="/Site/"], 
#wikitext a[href*="/SiteAdmin/"], 
#wikitext a[href*="/Template"] {
  font-weight: bold;
}@]

Variable expansion

The recipe allows a simple expansion of variables written outside any snippet:

 
@Green: color:#008800; font-weight: bold;

[@ *
    a { @Green }
    h2 { @Green }
    p.note { @Green }
@]

The variable is defined outside of a snippet, it starts with "@" then the variable name, then the colon ":" then follows the variable value until the end of the line.

Example variable definitions with the variable name and the variable value:

  @Variable: border: 1px solid red; color: blue;
  @CSSVar: { white-space: nowrap; } 
  @justcolor: #123456

When a @variable is found in the snippets, it will be replaced with its value.

The following PHP variables are automatically available and can be used directly in Site.LocalCSS:

 $PubDirUrl     : use @PubDirUrl
 $FarmPubDirUrl : use @FarmPubDirUrl
 $SkinDirUrl    : use @SkinDirUrl
 $Skin          : use @Skin
 $action        : use @action

Configuration

Three variables can be set in config.php:

Core function, since PmWiki 2.2.119

This configuration applies to the core feature only.

• $WikiPageCSSFmt = "Site.LocalCSS"; # (default disabled), the page containing the CSS code to be parsed. You need to set this variable in config.php to enable the core feature. (In the recipe the variable was $LocalCSSPage.)
• $EnableSelfWikiPageCSS = 1; # default 0. If a less experienced user makes a mistake, it is potentially possible to break the site layout and to be unable to edit the LocalCSS page and revert the changes. For this reason, the recipe does not apply LocalCSS styles to the LocalCSS page. Set this variable to 1 and the styles will be also applied to the LocalCSS page (advanced users only, also when "previewing" the edit). (In the recipe the variable was $EnableSelfLocalCSS.)
• $WikiPageCSSVars contains an array with the global PHP variable names that should be made available as @variables, default array('FarmPubDirUrl', 'PubDirUrl', 'Skin', 'action', 'SkinDirUrl'). To change this array, simply define it in config.php (the whole array needs to be defined). (In the recipe the variable was $LocalCSSPHPVars.)

Cookbook recipe

This configuration applies to the cookbook recipe (addon) only.

• $LocalCSSPage = "Group.Page"; # default "$SiteGroup.LocalCSS", the page containing the css code to be parsed. Note that only experienced users should modify it.
• $EnableSelfLocalCSS = 1; # default 0. If a less experienced user makes a mistake, it is potentially possible to break the site layout and to be unable to edit the LocalCSS page and revert the changes. For this reason, the recipe does not apply LocalCSS styles to the LocalCSS page. Set this variable to 1 and the styles will be also applied to the LocalCSS page (advanced users only, also when "previewing" the edit).
• $LocalCSSPHPVars contains an array with the global PHP variable names that should be made available as @variables, default array('FarmPubDirUrl', 'PubDirUrl', 'Skin', 'action', 'SkinDirUrl'). To change this array, simply define it in config.php; to only add variables, set in config.php after including localcss.php, such lines:

 $LocalCSSPHPVars[] = 'MyVariable1';
 $LocalCSSPHPVars[] = 'MyVariable2';

Notes

The program doesn't check your CSS code for errors. Be careful about {...} curly brackets and ";" semi-colons, especially when using variable expansions.

Change log / Release notes

• Since PmWiki 2.2.119 a function replicating this one was added in the PmWiki core. See PmWiki:ChangeLog for any changes.
• 20150830: some global PHP variables can now be directly used as @variables. Allow up to 50 levels of nested @variables inside @othervariables. Fix bug when a later snippet would replace any previous snippet if the "first line page definition" is the same -- it will now append the later snippet to the previous one.
• 20140729: fix CSS3 selectors with "$=".
• 20131228c: fix the recipe didn't work for non-logged-in users in some cases.
• 20131228b: replace "<" with "&lt;" in snippets.
• 20131228a: add $EnableSelfLocalCSS, fix for short @variable names.
• 20131228: first public release, ready to be tested.

See also

Contributors

• Recipe written and maintained by Petko (5ko [snail] 5ko [period] fr).
• If this recipe helps you or saves you time, you can help support its continued development by ♥ .

Comments

See discussion at LocalCSS-Talk