"

From 2010.igem.org

Customize and style your wiki

So far be we created the backbone of your wiki by using templates and a table layout. Besides, every teams wants to have their only style. However, in the case of an iGEM team wiki, the normal way of change the look and feel of a wiki does not work. This is due to the fact, that all teams share one big wiki and changes done to the layout will change all other team wikis as well.
The best way of styling your wiki anyway is by using CSS (Cascading Style Sheets). To read more about CSS read the following section.

Read more

Once you are familiar with CSS, changing the appearance of the wiki is very straight forward. The nice thing about MediaWiki is that nearly every element in the wiki framework (the big banner on the top of the page, the table of content, the title of the page, etc.) has a unique identifier or belongs to a certain class. An identifier is specified using the HTML tag id, whereas an element can be assigned to a class called "title" by using class="title". Consequently, to change the look of a certain element, you have to first get to know the name of the class or the identifier and then use this name to change the appearance using CSS.
To find out the name of the identifier or the class, you can either take a direct look at the source of the page, or you can use a very powerful Firefox extension to easily extract this information. Take a look at the following "read more" section for details about this

Read more

Once you found out the name, you have to get into CSS. Since the appearance of your wiki is very likely to be the same for all pages, we can make use of our template structure that we created before. Since the template ".../Templates/Header" is imported by every wiki page, putting all CSS styling in this template will affect all pages. Just edit the .../Templates/Header page and insert your CSS code:

<style type="text/css">
    body {
         background-color: white; /* defines the default background color of the document*/
         color: black; /* defines the default font-color of the document*/
    }
    a {
         color: black; /* defines the default color of links */
    }
    a:hover {
         color: gray; /* defines the default color of links hovered by the cursor */
    }
    a {
         color: black; /* defines the default color of links */
    }
    .firstHeading
    {
         display: none; /* hides the default heading */
    }
...
</style>

CSS is a very powerful technique that cannot be explained in this tutorial completely. Learning mor about CSS can save a lot of time when customizing your wiki. You might also want to take a look at this page from this year's TU Delft team, where some more iGEM-specific CSS styling is listed. You will also find many tutorials or look-up pages about CSS on the web. And don't forget to take a look at previous teams, they might inspire you or have that piece of code you where looking for...

Congratulations! You made it through the tutorial. Now you are ready to play around with CSS and add some more eye candy in your templates to produce a nice looking wiki. Have fun and don't hesitate to try new things, you can always go back using the MediaWiki history!