Team:Groningen/Navigation/BasicWikiFAQ

From 2013.igem.org

Contents

Adding pages

There are two main ways of adding a page. The first is the most simple method where the context is directly added to the page itself. This if mostly used for very small pages (calendar entries). The second method is used for larger pages or pages with more advanced layouts. The reasoning for this it so keep the pages as readable as possible.

Adding a Calendar entry simple method.

1: First step is to simply select a data on the correct calender. Click on the date where you want to add an entry. You will see an empty page.

2: Now you have to insert the default page layout. Copy paste this code 

<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8" /> 
<link rel="stylesheet" href="https://2013.igem.org/Team:Groningen/CSS/DefaultPage?action=raw&ctype=text/css" type="text/css" />
</head>
<body>


</html> {{:Team:Groningen/Templates/DefaultHeader}}<html>

<div class="colmask threecol">

<span class="navigation">
    </html>{{:Team:Groningen/Templates/Navigationbar}}<html> 
</span>

<span class="widgets">
    </html>{{:Team:Groningen/Templates/facebook}}<html>
</span>

<div class="mainContent">

</div>


</div>

</html> {{:Team:Groningen/Templates/DefaultFooter}}<html>

</body>
</html>

3: Now find this part of the code: 

 
<div class="mainContent">

</div>

This is the place where you can write your entry. And thus it should result into: 

 
<div class="mainContent">
 We had great fun in the lab!
</div>

4: Do not forget to press save page!

Adding a page or advanced calendar entry

When adding a larger page a new page has to be created but first follow step 1 and 2 of the previous method. Or if the new page is not a calendar entry, then replace step 1 with going to: 

https://2013.igem.org/Team:Groningen/Navigation/myPage

And replace mypage with the name of the page you want to add. And continue with step 2.


3: Now in the location where you previously added the context you now add a link towards the new page. For example if you are creating a new page about our team activity then you add: 

 
<div class="mainContent">
    </html>{{:Team:Groningen/Navigation/TeamActivity}}<html>
</div>

4: Press save page, now you will see an almost empty page with only a grey text saying: Team:Groningen/Navigation/TeamActivity

5: Click the grey link and you will be redirected to a fresh empty page. Anything that you will write here will end up on the original page.

6: Again do not forget to save both pages.

7: If it is necessary that this page is shown in the menu bar so you can easily navigate to it. Contact Erik or Tycho and give them the url to the page you have created, and where it should be placed inside the menu.

Add images in your text

1: First upload an image to the wiki

2: Once you have uploaded you get a page with showing the image and some information about it. Click on the image, if everything went well you only see the image at this point.

3: Go to the place on the wiki were you want to add the image. To add the image in you text use the following code 

 
<img src=" Image URL " width="10%" >

replace the text with the URL of your image. Use the width to size your image. You can set it anywhere between 0-100 % NOTE: It is possible to set the width in cm, px, etc as well. Please don't do this. Our wiki scales automatically with your screen size. If you use a percentage to determine your image size the image resizes as well.

4: You can put some option inside the image tag as shown below 

 
<img src=" Image URL " width="10%" option="parameter" >


Below some more option are shown:

    • width="some percentage" Is already defined above
    • height"some percentage" Same option as the width of your image, please only use percentages as well.

NOTE: If you use both width and height to define your image size you can mess up your image proportions, so I recommend only using one of them, not both.

    • Align image To align the image in a specific way you need to add some code shown below. You can align the image in the "left" "right" or "center" 
 
<div align="center">
<img  src=" Image URL " width="10%">
</div>



Help

If anything is unclear please contact Tycho or Erik with your question. If you want a different tutorial or guide for anything wiki related do not be shy to request it.