Recent Changes - Search:

Cookbook

PmWiki

pmwiki.org

LocalCSS

Summary: Flexible CSS compilation from a wiki page
Version: 20150830
Prerequisites: PmWiki 2.2.17 or more recent
Status: beta
Maintainer: Petko
Categories: Layout CSS PHP55
Users: +2 (view / edit)
Discussion: LocalCSS-Talk
License: GPL3+

Description

Flexible CSS compilation from a wiki page.

The recipe 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 recipe also supports simple variable expansion during the compilation.

Installation

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

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.

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:

  • $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

  • 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

Cookbook /
CSSInWikiPages  Apply CSS styles via wiki pages (Stable)
PmWiki /
GroupCustomizations  How to customize a subset of your wiki

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

User notes +2: 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.

Edit - History - Print - Recent Changes - Search
Page last modified on August 30, 2015, at 11:47 AM