"

From 2010.igem.org

Wiki Tips and Tricks

Part of the iGEM competition is to publish your work on the iGEM wiki. During the spring workshop you will get a brief introduction on how to create and edit pages, but this probably leaves you with a lot of questions. How do you get from the default iGEM team page to a nice and shiny website?

The TU Delft wiki uses a number of MediaWiki features that might be worth mentioning, if you're working on a wiki too. Most of it can be found at http://www.mediawiki.org/wiki/Help:Contents as well.

The tips here are general advice, the tricks contain the technical details.

Tip 1: Start building your wiki immediately

Don't wait to the last week before the wiki lockdown with working on your wiki. When you update your wiki with your progress on a regular basis it does not only saves time in the end, but it also helps others that might be struggling with the same issues. Your first wiki does not have to look fancy, basic navigation will suffice.

Tip 2: Look around on previous teams wiki for useful code

You don't have to reinvent the wheel. Webdevelopment has been an open source discipline for a much longer time than biotech, so there is plenty of code available to upgrade your wiki. Do remember to respect the authors and licenses.

After we discovered that other teams were copying our work, we had no other choice than to keep the rest secret until the very end. Luckily for you, we reveal all tricks on this page.

Trick 1:

Use templates! This is the most used way create common parts of the page (For example, a header or footer)

• Templates:

{{:Team:TEAM_NAME/TemplateName}}

or with a template parameter:

{{:Team:TEAM_NAME/TemplateName|ParameterName=abc}}

Within the template, you can then access the parameter with {{{ParameterName}}}

You can also put pages in Template:Team:TEAM_NAME/Page, and then omit the first ':':

{{Team:TEAM_NAME/TemplateName|ParameterName=abc}}

Trick 2: Wiki URL parameters

• Append ?action=raw to the URL to get the raw wiki page contents. This is mostly used for storing javascript
• Append ?action=render to the URL to get the pure page content rendered as HTML (without the standard iGEM wiki headers around it). This can be used for ajax behavior, loading wiki pages dynamically.
• Append ?ctype=text/javascript to your URL to change the HTTP content type.

Trick 3: Photo sources

The iGEM wiki picture management can be time consuming. Use our fb_display template to display pictures from facebook, or use a site such as flickr that has it's own photo javascript API.

Trick 4: Hide the default iGEM Header

The following code helps you to hide the default iGEM header and adjust the footer. Don't forget that the links on top of the page are still usefull to the user. So don't hide them completely. Also remember to include a link to the iGEM homepage.

/* Wiki Hacks - START */
/* Author: Pieter van Boheemen */
/* Team: TU Delft */
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; height:100%;}
#bodyContent { border: none; padding:0; margin:0; width:100%; height:100%;}
#top-section { height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
#p-logo { height:1px; overflow:hidden; display: none;}
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
.left-menu { width: 500px !important; display:block; margin-top:-80px; border: none; text-align: right;}
.left-menu ul { border: none; }
#menubar.right-menu { width:300px; display:block; float:left; margin-top:-80px; border: none;}
.right-menu ul { border: none; width: 300px;}
#footer-box { width: 100%; margin: -10px auto 0 auto; padding: 20px 0;}
.visualClear { display: none; }
#footer { border: none; width: 965px; margin: 0 auto; padding: 0;}
.firstHeading { display: none;}
#f-list a { color: #333; font-size: 10px;}
#f-list a:hover { color: #666;}
.printfooter { display: none; }
#footer ul { margin: 0; padding: 0;}
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
#search-controls { display:none; }
h3#siteSub { display: none;}
#contentSub {display: none;}
p:first-child { display: none;}
/* Wiki Hacks - END */