Skip Navigation

Customisation with CSS

Red Style Example


Apache 2.2 mod_cache

Server Tuning

Petal i18n and I18NFool

HowTo Compile Apache 1.3 for MKDoc

Integrate Soupermail

Creating new document components

Translate MKDoc Templates

Checkout MKDoc via anon CVS

Configuring MKDoc::Apache_Cache

MySQL commands to make a user account an editor account

Using news headlines

Customisation with CSS

Hiding documents and creating private areas

Upgrade from 1.4 to 1.6

Discussion Board Moderation

Text Component Formatting

Site Administration

Email newsletters

Edit Templates in a Subversion Repository

Update the Metadata for all Documents

Import MS Word files into MKDoc

Sign up

If you sign up for an account on this web site you can customise elements of this site and subscribe to an email newsletter.

If you have an account on this web site you may login.

If you have an account on this site but have forgotten your user name and / or your password then you can request an account reminder email.

Customisation with CSS

The simplest way of customising the look-and-feel of an MKDoc site is to attach a CSS (Cascading Style Sheet) file to override some of the default values for colour, fonts and layout.

Cascading Style Sheets

MKDoc separates style from content for consistency and accessibility — Styling such as colours and fonts is defined as a policy rather than requiring each author to style their own content — This is achieved simply by using widely available Cascading Style Sheet Standards.

A style sheet is a simple text file that declares styles for HTML elements such as body text, paragraphs, headlines, etc… Style sheets cascade, which means that multiple stylesheets can be used to apply finer adjustments in turn.

An example style sheet

Here is a really simple stylesheet, all it does it to take the existing styles (declared by other MKDoc stylesheets), but changes the colour of all headline elements to dark green:

h1, h2, h3 {color: green;}

To use this style with MKDoc, simply write it in a text file called style.css and upload it as a file attachment.

You should be able to see that all the headline elements in the page have been changed to green as a result. MKDoc styles cascade, so any documents attached to this document would automatically have green headlines too.

All the elements in a page can be styled individually, even the text or logo in the banner at the top can be replaced by any image using CSS. Page layouts can be changed such as moving the sidebar navigation from right to left or from left to right.

Favicon icons

Websites/pages can have icons, simply upload a standard Windows format .ico file named favicon.ico to the front page and this will be automatically applied to all documents.

Advanced styling

Uploading CSS files to MKDoc documents can achieve nearly every stylistic change imaginable; though there are other techniques which involve accessing files on the webserver itself:

  • Instead of supplementing the default MKDoc CSS, you can override it completely by replacing the CSS files on the system, each MKDoc site can have it's own custom style this way.

    This will involve editing the $SITE_DIR/httpd/httpd.conf file and pointing the /.static/css Alias to the new location.

  • MKDoc uses the TAL XML templating standard to assemble the underlying HTML; you can override one or more of these templates, though most designers will find that the default MKDoc templates are sufficient for nearly all purposes. Do this if you must rearrange the display order of page elements or create custom templates for special purposes.

    Any templates you place in the $SITE_DIR/resources/templates folder will override the default MKDoc-1.6 templates automatically.

Firefox Tips

If you install Firefox and the Web Developer Extension then it is easy to dynamically edit the CSS of a page and see your changes as you make them, as illustrated in the following screen shot.

Editing CSS in Firefox with the Web Developer Extension

When you are happy with the CSS you have developed you can save it as style.css and upload it as a file component.

<< | Up | >>

This document was last modified by Chris Croome on 2005-02-25 05:22:57
MKDoc Ltd., 31 Psalter Lane, Sheffield, S11 8YL, UK.
Copyright © 2001-2005 MKDoc Ltd.