Wiki Editable CSS

Wiki Editable CSS

Aliases: None at this time

Problem

You want to customize the look of a wiki installation without requiring access to a static web server.

Context

HelpOnThemes mentions a clever way to make CSS wiki editable with a link to this page. This technique is very useful but is a little too complicated for a MoinMoin newbie to implement on the first try. This page will describe the technique more completely including the undocumented features that are required to make it work.

Forces

• Want to give wiki administrators a way to customize the appearance of the wiki in addition to the content
• Access to the web server would require an additional set of logins and procedures

Solution

1. Create a new wiki page to hold the CSS. For example: 'customize.css'

2. Fill the page with the desired CSS. Remember that this has to be valid CSS. This is going to be accessed in raw text form, so don't use any Wiki features unless they are commented out of the CSS. See example, below. It is a good idea to at least add a raw formatter section around the CSS so that it remains readable when being viewed through the wiki.

3. Add a stylesheets entry to the wiki instance's wikiconfig.py. This should include a link to the 'customize.css' page as it is accessed through the web. You must use the following URL encoded commands: action=raw and mimetype=text/css. See example, below. If you don't use both commands then modern web browsers will not process the CSS.

4. Restart the server.

Resulting Context

The new CSS will be added to the header of all the pages of the wiki, giving the interface a customized look that can be modified on the fly via the wiki.

The main problem with this is permissions. On a wiki with many users that have edit privileges by default, you don't want the 'customize.css' page to be editable because it opens a large security hole. The obvious solution is to add an ACL, however the ACL must take the following form on the first line of the file.

#acl AdminGroup:read,write,revert All:read

That means that we can't comment it out of the CSS. That in turn means that browsers will try to interpret the ACL line as CSS and it will fail. The only options are to only use this pattern in wikis where users don't have write permissions by default, or to use hierarchical ACL processing so that the 'customize.css' page inherits read-only rights from a normal wiki page.

Another problem with this pattern is that browsers will reload the 'customize.css' for every single page view. Static CSS files are reloaded from cache under normal circumstances. Therefore, this technique will increase the server load quite a bit and shouldn't be used on large/busy wikis.

Rationale

The idea for this came from the original post for MediaWiki. This is not necessarily a good solution for every use case, but it works very well for certain situations such as when MoinMoin is used as a poor-man's CMS or Blog.

Known Uses

No public examples yet.

Related Patterns

Unknown.

Author(s): DavidHowland

Date: 2012-11-2

References: None

Keywords

Help,CSS,MimeType

Example

An example customize.css:

/*
{{{
*/

/* <div> that holds all the content from the individual wiki topics */
#content {
max-width:960px;
}

/*
}}}
*/

An example of the additional line for wikiconfig.py (assumes wiki is accessed through www.example.com/wiki):

stylesheets = [('screen', '/wiki/customize.css?action=raw&mimetype=text/css')]