How to customize an iGEM wiki

Sharing is caring

... that's why I created this page. I really hope that you can benefit from it, and that you do not use a lot of time making the same mistakes as I did. Enjoy!

And hey, please do the same thing!

What are the challenges?

So what are this WikiMedia thing, and how do you style it? Here is what you need to know to get startet:

First of all, you'll have to learn the MediaWiki-markup, which can be found [http://www.mediawiki.org/wiki/Help:Contents here].
Next, you'll need to know that you do not have access to anything conserning the backend. All you can do to affect the appereance of your wiki, is to insert HTML-code directly the wiki-editor.

"So I need to paste all my styling-code into every single page on the wiki?"

No! Read on...

Centralizing the layout using templates

Of course it would be would be pretty annoying if you had to paste your styling-code into every signle page. Then you would have to change every single page every time you make a tiny change in the layout. What you can do is to centralize the layout by making use of [http://www.mediawiki.org/wiki/Help:Templates templates]. In this way you can have all your styling and scripting in a template, which can be imported into all the other pages (by manually pasteing code into each page unfortunately). This means that the styling and the scripting is completely isolated from the content, and present only one place, meaning that you will only have the make your changes this one place.

How does it work? You just put in this peace of code:

{{< YOUR TEMPLATE GOES HERE >}}

... and then everything from your template is loaded into that particular page.

Example:

{{:Team:DTU-Denmark/Templates/Navigationbar}}

... loads the navigation bar (which consists of this code) into the page.

Helping your team using templates

Using templates to help your teammates

TODO: STILL BEING EASY TO USE BY YOUR TEAMMATES
Link to default styling

Using templates

TODO: THE TOOL FITS THE CHALLANGE
TODO: HOW DOES IT WORK

Styling the wiki

How to add your stylesheet

You can always links to your own external stylesheet as you are used to:

<link rel="stylesheet" href="< YOUR CSS FILE GOES HERE >" type="text/css" />

But what do you do if you want the locate the css-file on iGEMs server, so that everybody in your team can access it? You simply create a new page, write down the styling as you would do in a normal css-file, and then you use the following code in stead:

<link rel="stylesheet" href="< YOUR PAGE HERE >?action=raw&ctype=text/css" type="text/css" />

Styling tricks

Removing the ogly MediaWiki look

Removes header footer and borders:

#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
    display:none;}
#top-section {
    border: none;
    height: 0px;}
#content {
    border: none;}

Redesigning the top menubar

/* Removes "teams" from the menubar */
#menubar > ul > li:last-child {
    display: none;}
/* Resizes the menubar to fik the links (default is 400px) */
#menubar {
    width: auto;}

Here is made the menubar show up only when moving the mouse on top of it:

body {
    margin: 10px 0 0 0;
    padding: 0;}
#top-section {
    width: 965px;
    height: 0;
    margin: 0 auto;
    padding: 0;
    border: none;}
#menubar {
    font-size: 65%;
    top: -14px;}
.left-menu:hover {
    background-color: transparent;}
#menubar li a {
    background-color: transparent;}
#menubar:hover {
    color: white;}
#menubar li a {
    color: transparent;}
#menubar:hover li a {
    color: white;}

Get inspiration in our stylesheet

You can are welcome to take a look in our stylesheet...

jQuery hacks

Remove all empty tags

Annoyed of all those and emerging everywere in your markup, distroying your layout by adding a bit of vertical space here and there?

They easily emerge when using templates or <html></html> tags. But fortunately they are just as easy to remove. All you need to do, is to paste in this code bit:

<!-- Remove all empty <p> tags -->
<script type="text/javascript">
    $(document).ready(function() {
        $("p").filter( function() {
            return $.trim($(this).html()) == '';
        }).remove()
    });
</script>

LaTeX equations

It is possible to enabled TeX in a MediaWiki ([http://www.mediawiki.org/wiki/Manual:Math Manual:Math]), but unfortunately it doesn't seem like iGEM has done that..

Another way to enable your wiki to display LaTeX equations, is to use [http://www.mathjax.org/ MathJax]. MathJax is a JavaScript file located at http://cdn.mathjax.org/mathjax/latest/MathJax.js, which reads your document after it has been loaded, and then changes the content of the document according to the notation. That is, it removes everything between any of the following delimiters...

\(...\)
$...$ (if configured)
\[...\]
$$...$$
\begin{?} ... \end{?}

...and replace them with equations. All you need to do is to add the following to your wiki tekst:

<!-- MathJax (LaTeX for the web) -->
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

And if you want to use $...$ delimiters:

<!-- MathJax (LaTeX for the web) -->

<!-- This part is only if you want to use $...$ delimiters -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

See [http://www.mathjax.org/docs/1.1/tex.html|MathJax documentation here]

I never managed to make "\label" and "\ref" work, but a non-tested version of the code, that enables the "\label" and "\ref" commands, can be found on GitHub. The issue is discussed here.

Fix Internet Explorer

Tired of styling for Internet Explorer? Just use this simple fix:

<!-- ie9.js (fixes all Internet Explorer browsers older than ie9) -->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->