User:Macowell/Styling Mediawiki with CSS

From 2007.igem.org

(Difference between revisions)

Revision as of 17:50, 2 October 2007

Mediawiki is an interesting and powerful CMS, but I typically find the way it styles its content to be spartan and linear at best. On this page you can find notes I've made about modifying how mediawiki pages are styled.

storing and importing css and javascript on mediawiki

If full html parsing is enabled on the wiki (and it is on the iGEM and OWW wikis), then you can insert arbitrary html into any page by enclosing it html tags:

<html> html and perhaps embedded css goes here <html>

However, this can quickly become very difficult to maintain, especially if you are including a large set of css declarations and/or javascript functions. Fortunately, you can use html to link in an external css file:

<link rel="stylesheet" href="http://example.com/foo/bar.css" type="text/css">

But what if you don't have access to a sever? It is possible to use mediawiki itself to host the text file. This also has the advantage of all of mediawiki's collaborative editing and revisioning tools. The trick is to ask mediawiki to provide the raw text of the page. For example, if you were user foo on the igem07 wiki and you stored your css text at 'User:Foo/bar.css', you could style an arbitrary page by including the following in html tags:

<link rel="stylesheet" href="/igem07/index.php?title=User:Foo/bar.css&action=raw&ctype=text/css" type="text/css" />

Stay tuned for more example of this technique and general css resources.