Team:DTU-Denmark/How to customize an iGEM wiki

From 2011.igem.org

(Difference between revisions)
(→How to add your stylesheet)
Line 46: Line 46:
#menubar {
#menubar {
     width: auto;}
     width: auto;}
 +
</pre>
 +
 +
Here is made the menubar show up only when moving the mouse on top of it:
 +
<pre>
 +
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;}
</pre>
</pre>

Revision as of 21:46, 21 September 2011

How to customize an iGEM wiki

Contents

Intoduction

  • TODO: WHY I MADE THIS PAGE
  • TODO: ADD YOUR OWN iGEM WIKI KNOWLEDGE

What are the challanges?

  • TODO: CENTRALIZING THE LAYOUT
  • TODO: STILL BEING EASY TO USE BY YOUR TEAMMATES

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 find our stylesheet at this link [/Team:DTU-Denmark/stylesheet?action=raw&ctype=text/css]

jQuery hacks

Remove all empty <p></p> tags

Annoyed of all those <p></p> and <p> </p> 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.

Retrieved from "http://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki"