Important les règles iGEM pour le wiki sont ici :Competition/Deliverables/Wiki

This page will help you edit and build your team wiki based on the default template given to your team. You will find code examples that you can simply copy and paste on your wiki to create tables, links and images to document your project.

Commencer chaque page par {{Aix-Marseille/top|title=TITRE DE LA PAGE}}

The template is composed of html, css and jquery, you can find the code here: Template:Aix-Marseille/top et l'original Template:Aix-Marseille

Templates are a very useful to avoid repeating the same code or text. The way they are used in the iGEM wiki is that they host the menu and the general css styling for a group of pages. Another good use is to have a banner on your template so it appears on every of your wiki pages

HTML et wikitext

Sur cette page est décrite la syntaxe wikitext principalement, qui permet d'écrire des pages wiki de façon simple !

Et il y a des fonctionnalités très utiles telles que notes de bas de page (pour citer les références!) et un sommaire automatique, je rajouterai un jour sur cette page comment utiliser ces fonctions, pour l'instant ça y est pas ... en attendant voir ici : [1] dans l'aide de wikipédia

Les pages de wikipédia par exemple sont écrites en wikitext, et l'aide de wikipédia pour écrire des pages est très utile, car elle s'applique à 90% pour le wiki iGEM : [2]

Le HTML ou Hypertext Markup Language, est le langage standard pour les pages Web, cette page est en HTML, et il est possible d'éditer le template pour régler la mise en page et l'apparence de façon avancée mais on évitera au plus possible d'utiliser du HTML directement

Colors

The colors used on your template are:


#484848	#635d5d	#928b8b	#c4baba	#ecb656	#f3bd5d	#f8b732	#7acbd8	#5bc7d8

Text

Pour écrire des paragraphes simplement écrire le texte

et sauter une ligne pour un différent paragraphe

en italique et en gras

Pour écrire des paragraphes simplement écrire le texte

et sauter une ligne pour un différent paragraphe

''en italique'' et '''en gras'''

Titles

Vous pouvez écrire des titres en mettant des = autour d'un texte, cela permet d'avoir le petit "edit" pour modifier directement la section, de le rajouter directement à la table des contenus, et de pouvoir faire un lien direct vers la section depuis une autre page (voir #Links)

Title one

Title two

Title three

Title four

Title five

Title six

= Title one =

== Title two ==

=== Title three ===

==== Title four ====

===== Title five =====

======Title six ======

Links

Voici un lien :

Team:Aix-Marseille/Template_Documentation

Avec un texte différent :

Project

Lien vers une sous-section :

Titles

Voici un lien :

[[ Team:Aix-Marseille/Project ]]

Avec un texte différent :

[[ Team:Aix-Marseille/Project | Project ]]

Lien vers une sous-section : [[ Team:Aix-Marseille/Template_Documentation#Titles | Titles ]]

Images

Pour mettre un image il faut d'abord l'envoyer sur les serveurs de l'iGEM ici : Special:Upload

Attention à la licence de l'image, elle doit être sous licence libre type Creative Commons Attribution éventuellement Partage à l'identique !

La syntaxe est identiques aux liens (avec le File: devant)

Voir pour des options pour aligner à gauche, droite, mettre un lien, etc. (attention mettre en anglais Fichier/File, vignette/thumb) ici :[ https://fr.wikipedia.org/wiki/Aide:Ins%C3%A9rer_une_image_(wikicode,_avanc%C3%A9) ]

[[File:T--Aix-Marseille--pcrfail.png]]

Unordered Lists

Use the following example to create a simple list.

Painting materials:

Brushes
Acrylic paint
Watercolors

'''Painting materials:'''

*Brushes

*Acrylic paint

*Watercolors

Numbered Lists

To create an ordered list, use:

Things to buy:

Milk
Eggs
Flour

'''Things to buy:'''

#Milk

#Eggs

#Flour

Nested Lists

Here is an example of a nested list.

Cold Colors
Warm Colors
- Red
- Orange
- Yellow

Here is an example of a nested list.

*Cold Colors

*Warm Colors

**Red

**Orange

**Yellow

Tables

Tables created within in a page already have styling and will display:

légende
Header 1	Header 2	Header 3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3

{| class="wikitable"

|+ légende

|-

! Header 1

! Header 2

! Header 3

|-

| row 1, cell 1

| row 1, cell 2

| row 1, cell 3

|-

| row 2, cell 1

| row 2, cell 2

| row 2, cell 3

|}

Layout classes

Columns

Layout classes will help structure your page. You will need to call it when you start your page to have the proper layout and make it responsive. There are three types of layout options having three, two or just one column. For one column call the class column full_size and for two columns call column two_thirds_size and for three columns third_size. Here are a few layout options.

Support Classes

Highlight

Highlight will need to be declared inside another layout box, this highlight class will make the background gray and the size will be slightly smaller.

Styling highlight class

There are ways to style the highlight class, you can add:

highlight decoration_background to add a gray background
highlight decoration_A_top to add a blue decorative line on top
highlight decoration_B_top to add a orange decorative line on top
highlight decoration_A_full to add a blue border around the div
highlight decoration_B_full to add a orange border around the div

These classes can be combined to create different effects, as seen in the next examples.

Button

You can use the button class to highlight a link in your wiki.

EXAMPLE BUTTON

<div class="button_link"> [[ #Button | EXAMPLE BUTTON ]] </div>

Clear

This class clears the content, it is basically the same as clicking "enter" when you are writing a text.
If you add the "extra_space" class, it will add extra vertical spacing between your divs.

Adding a direct menu item

To add another a direct (goes straight to the page rather than opening a submenu). Make sure you place the following code inside the class "igem_2018_team_menu". In this example we will link to "Test Direct".

<a href="https://2018.igem.org/Team:Example2/Test_Direct">
< div class="menu_item direct_link">
Test Direct
</div>
</a>

Adding a submenus

To add another menu item that opens up the submenu, use the following code. In this example we will create "Test Submenu" with the subpage "Test Subpage". Remember to make sure you place the your code inside the class "igem_2018_team_menu"

<div class="menu_item">
<div class="submenu_control_icon"> </div>
TEST SUBMENU
</div>

<div class="submenu">

<a href="https://2018.igem.org/Team:Example2/Test_subpage">
<div class="submenu_item">
Test subpage
</div>
</a>

</div>

CSS

CSS will provide styling for your HTML elements, the attributes are ordered alpahabetically in the template and each of them modifies the function and appareance of the class. Here is a list of the most common attributes used in the code.

Take a look at the code and see how each element is defined, if you want change a color for a particular thing, you can modify the hex code for that color or modify the size or anything you need!

size
- width
- height
layout
- position
- margin
- padding
- float
- display
color
- border
- background-color
font
- text-align
- font-weight
- text decoration
- color
other
- list-style-type
- cursor
- -transition

Creating a new class

In this example we are going to create a new class, it is best practice to name your classes with specific names so other code won't override them. The following code shows how to make a class that changes the color of text.

/* highlight with a full orange border decoration */
.igem_2018_team_content .igem_2018_team_column_wrapper .orange_text {
color: #f8b732;
}

<p class="orange_text"> Orange text </p>

Creating a new class under an existing one

In this example we are going to create a new class for an orange background under the highlight class. You will need to follow the precise naming of the classes in the code for it to work correclty when you call it in your html. First declare the two content wrappers: ".igem_2018_team_content .igem_2018_team_column_wrapper" and then specify the highlight class and the name of your new class: ".highlight.orange_background" Next you will find the necessary CSS code and then and example of how to call it on your html.

/* highlight with a full orange border decoration */
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.orange_background {
background-color: #f8b732;
}

<p class="orange_text"> Orange background </p>

Change the color of an element

This is very simple and easy thing to do. First, you will need to find which element or class you want to modify and then replace the hex code for the color. In the following example we change the color of h1 and h2 to orange.

/* styling for the titles h1 h2 */ .igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
padding:5px 15px;
border-bottom: 0px;
color: #fdeb39;
}

<span style="color:#f8b732;"> This is now orange </span>
<span style="color:red;"> This is now red </span>

This is now orange

This is now red

JQUERY

Jquery makes the menu and other interactive elements in the website work, for example the open and closing of the submenus along with the icon that reflects the state of said submenu. We will not go into depth to talk about the jquery, if you wish to learn more about this you can visit: [3]

Difference between revisions of "Team:Aix-Marseille/Template Documentation"

Latest revision as of 19:46, 27 June 2018

Template Documentation for Teams

Contents

HTML et wikitext

Colors

Text

Titles

Title one

Title two

Title three

Title four

Title five

Title six

Links

Images

Unordered Lists

Numbered Lists

Nested Lists

Tables

Layout classes

Columns

Support Classes

Highlight

Styling highlight class

Button

Clear

Adding items to your Menu

Adding a direct menu item

Adding a submenus

CSS

Creating a new class

Creating a new class under an existing one

Change the color of an element

JQUERY

@@ Line 1: / Line 1: @@
 {{Aix-Marseille/top|title=Template Documentation for Teams}}
-<div class="igem_2018_team_content">
-	<div class="igem_2018_team_column_wrapper">
 <div class="column full_size">
-<p> This page will help you edit and build your team wiki based on the default template given to your team. You will find code examples that you can simply copy and paste on your wiki to create tables, links and  images to document your project. </p>
+<span style="color:red;font-weight:bold">Important les règles iGEM pour le wiki sont ici :</span>[[Competition/Deliverables/Wiki]]
-<p> The template is composed of html, css and jquery,  you can find the original code here:
+This page will help you edit and build your team wiki based on the default template given to your team. You will find code examples that you can simply copy and paste on your wiki to create tables, links and  images to document your project.
-[[Template:Example2]]</p>
-<p>
+Commencer chaque page par <nowiki>{{Aix-Marseille/top|title=TITRE DE LA PAGE}}</nowiki>
-Templates are a very useful to avoid repeating the same code or text. The way they are used in the iGEM wiki is that they host the menu and the general css styling for a group of pages.
-Another good use is to have a banner on your template so it appears on every of your wiki pages </p>
-</div>
+The template is composed of html, css and jquery,  you can find the code here: [[Template:Aix-Marseille/top]]
+et l'original [[Template:Aix-Marseille]]
-__TOC__
-<div class="column full_size">
+Templates are a very useful to avoid repeating the same code or text. The way they are used in the iGEM wiki is that they host the menu and the general css styling for a group of pages.
-<h2 id="html">HTML</h2>
+Another good use is to have a banner on your template so it appears on every of your wiki pages
-<p> Hypertext Markup Language, or HTML, is a standardized system for tagging text to create font, color, graphic, and hyperlink styling on websites. Below we will go voer the general tags used to create a standard wiki page</p>
 </div>
+<div class="column full_size">
+==HTML et wikitext==
-<div class="clear extra_space"></div>
+Sur cette page est décrite la syntaxe wikitext principalement, qui permet d'écrire des pages wiki de façon simple !
+Et il y a des fonctionnalités très utiles telles que notes de bas de page (pour citer les références!) et un sommaire automatique, je rajouterai un jour sur cette page comment utiliser ces fonctions, pour l'instant ça y est pas ... en attendant voir ici : [https://fr.wikipedia.org/wiki/Aide:Syntaxe#Comment_cr%C3%A9er_une_note] dans l'aide de wikipédia
-<div class="column full_size">
+Les pages de wikipédia par exemple sont écrites en wikitext, et l'aide de wikipédia pour écrire des pages est très utile, car elle s'applique à 90% pour le wiki iGEM : [https://fr.wikipedia.org/wiki/Aide:Syntaxe]
-<h3 id="colors"> Colors </h3>
-<p> The colors used on your template are: </p>
-<table>
+Le HTML ou Hypertext Markup Language, est le langage standard pour les pages Web, cette page est en HTML, et il est possible d'éditer le ''template'' pour régler la mise en page et l'apparence de façon avancée mais on évitera au plus possible d'utiliser du HTML directement
+</div>
+<div class="column full_size">
+===Colors ===
+The colors used on your template are:
+<table>
 <tr height="50px">
 <td bgcolor="#484848"></td>
@@ Line 36: / Line 38: @@
 <td bgcolor="#928b8b"></td>
 <td bgcolor="#c4baba"></td>
 <td bgcolor="#ecb656"></td>
 <td bgcolor="#f3bd5d"></td>
@@ Line 43: / Line 43: @@
 <td bgcolor="#7acbd8"></td>
 <td bgcolor="#5bc7d8"></td>
 </tr>
 <tr align="center">
 <td>#484848</td>
@@ Line 57: / Line 54: @@
 <td>#7acbd8</td>
 <td>#5bc7d8</td>
 </tr>
 </table>
@@ Line 64: / Line 60: @@
 </div>
+<div class="column two_thirds_size" id="text">
+=== Text ===
+Pour écrire des paragraphes simplement écrire le texte
-<div class="clear extra_space"></div>
+et sauter une ligne pour un différent paragraphe
+''en italique'' et '''en gras'''
-<div class="column two_thirds_size" id="text">
-<h3> Text </h3>
-<p> To write text use the < p > tag </p>
 </div>
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
-&#60;p&#62; Text  &#60;/p&#62;
-</p>
-</div>
-</div>
+Pour écrire des paragraphes simplement écrire le texte
+et sauter une ligne pour un différent paragraphe
-<div class="clear extra_space"></div>
+<nowiki>''en italique'' et '''en gras'''</nowiki>
+</div>
+</div>
 <div class="column two_thirds_size" id="titles">
-<h3> Titles </h3>
-<p> You can add title using the  h tag, here is how the different sizes look:</p>
-<h1> Title one </h1>
+=== Titles ===
-<h2> Title two </h2>
+Vous pouvez écrire des titres en mettant des = autour d'un texte, cela permet d'avoir le petit "edit" pour modifier directement la section, de le rajouter directement à la table des contenus, et de pouvoir faire un lien direct vers la section depuis une autre page (voir [[#Links]])
-<h3> Title three </h3>
+= Title one =
-<h4> Title four </h4>
+== Title two ==
-<h5> Title five </h5>
+=== Title three ===
-<h6> Title six </h6>
+==== Title four ====
+===== Title five =====
+======Title six ======
 </div>
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
+<pre>
-&#60;h1&#62;Title one  &#60;/h1&#62; <br>
+= Title one =
-&#60;h2&#62;Title two &#60;/h2&#62; <br>
-&#60;h3&#62;Title three  &#60;/h3&#62; <br>
+== Title two ==
-&#60;h4&#62;Title four  &#60;/h4&#62; <br>
-&#60;h5&#62;Title five  &#60;/h5&#62; <br>
+=== Title three ===
-&#60;h6&#62;Title six  &#60;/h6&#62; <br>
-</p>
+==== Title four ====
+===== Title five =====
+======Title six ======
+</pre>
 </div>
 </div>
+<div class="column two_thirds_size" id="links">
+=== Links ===
+Voici un lien :
+[[ Team:Aix-Marseille/Template_Documentation ]]
-<div class="clear extra_space"></div>
+Avec un texte différent :
+[[ Team:Aix-Marseille/Template_Documentation | Project ]]
+Lien vers une sous-section :
-<div class="column two_thirds_size" id="links">
+[[ Team:Aix-Marseille/Template_Documentation#Titles | Titles ]]
-<h3> Links </h3>
-<p> When creating links use the < a > tag, links will display : [[ Example Link ]]  </p>
 </div>
@@ Line 133: / Line 138: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
+Voici un lien :
-&#60;a href="link url "&#62; LINK &#60;/a&#62;
-</p>
-</div>
-</div>
+<nowiki>[[ Team:Aix-Marseille/Project ]]</nowiki>
+Avec un texte différent :
-<div class="clear extra_space"></div>
+<nowiki>[[ Team:Aix-Marseille/Project | Project ]]</nowiki>
+Lien vers une sous-section : <nowiki>[[ Team:Aix-Marseille/Template_Documentation#Titles | Titles ]]</nowiki>
-<div class="column two_thirds_size" id="images">
+</div>
-<h3> Images </h3>
-<p> You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server. </p>
 </div>
+<div class="column two_thirds_size" id="images">
+=== Images ===
+Pour mettre un image il faut d'abord l'envoyer sur les serveurs de l'iGEM ici : [[Special:Upload]]
-<div class="column third_size">
+Attention à la licence de l'image, elle doit être sous licence libre type Creative Commons Attribution éventuellement Partage à l'identique !
-<div class="highlight decoration_background">
-<p>
-&#60;img src="image URL "&#62;
-</p>
-</div>
-</div>
+La syntaxe est identiques aux liens (avec le File: devant)
+Voir pour des options pour aligner à gauche, droite, mettre un lien, etc. (attention mettre en anglais Fichier/File, vignette/thumb) ici :[ https://fr.wikipedia.org/wiki/Aide:Ins%C3%A9rer_une_image_(wikicode,_avanc%C3%A9) ]
+</div>
-<div class="clear extra_space"></div>
+<div class="column third_size">
+<div class="highlight decoration_background">
+<nowiki>[[File:T--Aix-Marseille--pcrfail.png]]</nowiki>
+</div>
+</div>
 <div class="column two_thirds_size" id="unordered_list">
-<h3> Unordered Lists </h3>
+=== Unordered Lists ===
-<p>Use the following example to create a simple list.  <br> <b> Painting materials: </b></p>
+Use the following example to create a simple list.
-<ul>
-   <li> Brushes </li>
+'''Painting materials:'''
-   <li> Acrylic paint </li>
-   <li> Watercolors </li>
+*Brushes
+*Acrylic paint
+*Watercolors
-</ul>
 </div>
@@ Line 181: / Line 188: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
-&#60;b&#62;Painting Materials&#60;/b&#62; <br>
-&#60;ul&#62; <br>
+<nowiki>'''Painting materials:'''</nowiki>
- &#60;li&#62; Brushes  &#60;/li&#62;  <br>
+<nowiki>*Brushes</nowiki>
- &#60;li&#62; Acrylic paint &#60;/li&#62;   <br>
- &#60;li&#62; Watercolors &#60;/li&#62;  <br>
+<nowiki>*Acrylic paint</nowiki>
+<nowiki>*Watercolors</nowiki>
-&#60;/ul&#62;
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
 <div class="column two_thirds_size" id="ordered_list">
-<h3> Numbered Lists </h3>
+=== Numbered Lists ===
-<p>To create an ordered list, use:  <br>
+To create an ordered list, use:
-<b> Things to buy: </b></p>
-<ol>
-   <li> Milk </li>
+'''Things to buy:'''
-   <li> Eggs </li>
+#Milk
-   <li> Flour </li>
+#Eggs
-</ol>
+#Flour
 </div>
@@ Line 217: / Line 214: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
-&#60;b&#62;Things to buy: &#60;/b&#62;  <br>
-&#60;ol&#62; <br>
+<nowiki>'''Things to buy:'''</nowiki>
+<nowiki>#Milk </nowiki>
+<nowiki>#Eggs </nowiki>
- &#60;li&#62; Milk &#60;/li&#62;  <br>
+<nowiki>#Flour </nowiki>
- &#60;li&#62; Eggs &#60;/li&#62; <br>
- &#60;li&#62; Flour &#60;/li&#62; <br>
-&#60;/ol&#62;
-</p>
 </div>
 </div>
+<div class="column two_thirds_size" id="nested_list">
+=== Nested  Lists ===
+Here is an example of a nested list.
+*Cold Colors
+*Warm Colors
+**Red
+**Orange
+**Yellow
+</div>
-<div class="clear extra_space"></div>
+<div class="column third_size">
+<div class="highlight decoration_background">
+<nowiki>Here is an example of a nested list.</nowiki>
+<nowiki>*Cold Colors</nowiki>
+<nowiki>*Warm Colors</nowiki>
-<div class="column two_thirds_size" id="nested_list">
+<nowiki>**Red</nowiki>
-<h3> Nested  Lists </h3>
-<p> Here is an example of a nested list. </p>
-   <ul>
-      <li> Cold Colors </li>
+<nowiki>**Orange </nowiki>
-      <li> Warm Colors
-         <ol>
+<nowiki>**Yellow </nowiki>
-            <li> Red </li>
-            <li> Orange </li>
-            <li> Yellow </li>
-         </ol>
-      </li>
-   </ul>
+</div>
 </div>
+<div class="column two_thirds_size" id="table">
-<div class="column third_size">
+=== Tables===
-<div class="highlight decoration_background">
+Tables created within in a page already have styling and will display:
-<p>
-   &#60;ul&#62;<br>
-      &#60;li&#62; Cold Colors &#60;/li&#62;  <br>
+{| class="wikitable"
-      &#60;li&#62; Warm Colors  <br>
+|+ légende
-         &#60;ol&#62; <br>
+|-
-            &#60;li&#62; Red  &#60;/li&#62; <br>
+! Header 1
-            &#60;li&#62; Orange &#60;/li&#62; <br>
+! Header 2
-            &#60;li&#62; Yellow &#60;/li&#62;<br>
+! Header 3
-         &#60;/ol&#62; <br>
+|-
-      &#60;/li&#62;<br>
+| row 1, cell 1
+| row 1, cell 2
+| row 1, cell 3
+|-
+| row 2, cell 1
+| row 2, cell 2
+| row 2, cell 3
+|}
-   &#60;/ul&#62;
-</p>
-</div>
 </div>
+<div class="column third_size">
+<div class="highlight decoration_background">
-<div class="clear extra_space"></div>
+<nowiki>{| class="wikitable"</nowiki>
+<nowiki>|+ légende</nowiki>
+<nowiki>|-</nowiki>
+<nowiki>! Header 1</nowiki>
+<nowiki>! Header 2</nowiki>
-<div class="column two_thirds_size" id="table">
+<nowiki>! Header 3</nowiki>
-<h3> Tables</h3>
+<nowiki>|-</nowiki>
-<p> Tables created within in a page already have styling and will display:</p>
-<table>
-<tr>
-<th> Header 1  </th> <th> Header 2 </th>
-</tr>
-<tr>
+<nowiki>| row 1, cell 1</nowiki>
-<td> Content A 1 </td> <td>Content B 1 </td>
-</tr>
-<tr>
+<nowiki>| row 1, cell 2</nowiki>
-<td> Content A 2 </td> <td>Content B 2 </td>
-</tr>
-</table>
-</div>
+<nowiki>| row 1, cell 3</nowiki>
-<div class="column third_size">
+<nowiki>|-</nowiki>
-<div class="highlight decoration_background">
-<p>
+<nowiki>| row 2, cell 1</nowiki>
-&#60;table&#62;  <br>
-&#60;tr&#62; <br>
+<nowiki>| row 2, cell 2</nowiki>
-&#60;th&#62;  Header 1  &#60;/th&#62;  &#60;th&#62;  Header 2 &#60;/th&#62;  <br>
-&#60;/tr&#62;  <br>
-&#60;tr&#62;  <br>
+<nowiki>| row 2, cell 3</nowiki>
-&#60;td&#62;  Content A 1 &#60;/td&#62;  &#60;td&#62; Content B 1 &#60;/td&#62;   <br>
-&#60;/tr&#62;  <br>
-&#60;tr&#62;  <br>
+<nowiki>|}</nowiki>
-&#60;td&#62;  Content A 2 &#60;/td&#62;  &#60;td&#62; Content B 2 &#60;/td&#62;  <br>
-&#60;/tr&#62; <br>
-&#60;/table&#62;
-</p>
 </div>
 </div>
@@ Line 343: / Line 332: @@
 <div class="column full_size" id="layout_classes">
-<h2>Layout classes</h2>
+==Layout classes==
 </div>
 <div class="column full_size" id="columns">
-<h3> Columns </h3>
+=== Columns ===
-<p> Layout classes will help structure your page. You will need to call it when you start your page to have the proper layout and make it responsive. There are three types of layout options having three, two or just one column. For one column call the class column <b>full_size</b> and for two columns call column <b>two_thirds_size</b> and for three columns <b>third_size</b>. Here are a few layout options. </p>
+Layout classes will help structure your page. You will need to call it when you start your page to have the proper layout and make it responsive. There are three types of layout options having three, two or just one column. For one column call the class column <b>full_size</b> and for two columns call column <b>two_thirds_size</b> and for three columns <b>third_size</b>. Here are a few layout options.
 </div>
-<div class="clear extra_space"></div>
 <div class="column full_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column full_size" > <br>
 &#60;/div>
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
 <div class="column two_thirds_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column two_thirds_size" > <br>
 &#60;/div>
-</p>
 </div>
 </div>
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;/div>
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;/div>
-</p>
 </div>
 </div>
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;/div>
-</p>
 </div>
 </div>
@@ Line 411: / Line 385: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;/div>
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
@@ Line 432: / Line 401: @@
 <div class="column full_size" id="support_classes">
-<h2> Support Classes </h2>
+== Support Classes ==
 <div class="column two_thirds_size"  id="highlight">
-<h3> Highlight  </h3>
+=== Highlight  ===
-<p> Highlight will need to be declared inside another layout box, this highlight class will make the background gray and the size will be slightly smaller. </p>
+Highlight will need to be declared inside another layout box, this highlight class will make the background gray and the size will be slightly smaller.
 </div>
@@ Line 443: / Line 413: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
 &#60;div class="column half_size" > <br>
 &#60;div class="highlight"><br><br>
 &#60;/div><br>
 &#60;/div>
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
 <div class="column full_size" id="styling_highlight">
-<h3> Styling highlight class</h3>
+=== Styling highlight class===
-<p> There are ways to style  the highlight class, you can add:</p>
+There are ways to style  the highlight class, you can add:
 <ul>
@@ Line 471: / Line 436: @@
 </ul>
-<p> These classes can be combined to create different effects, as seen in the next examples.</p>
+These classes can be combined to create different effects, as seen in the next examples.
 </div>
@@ Line 478: / Line 443: @@
 <div class="highlight decoration_background decoration_A_top">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;div class="highlight decoration_background decoration_A_top"><br><br>
 &#60;/div><br>
 &#60;/div>
-</p>
 </div>
@@ Line 494: / Line 459: @@
 <div class="highlight decoration_B_full">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;div class="highlight decoration_B_full"><br><br>
 &#60;/div><br>
 &#60;/div>
-</p>
 </div>
@@ Line 509: / Line 474: @@
 <div class="highlight decoration_background decoration_A_full">
-<p>
 &#60;div class="column third_size" > <br>
 &#60;div class="highlight decoration_background decoration_A_full"><br><br>
 &#60;/div><br>
 &#60;/div>
-</p>
 </div>
@@ Line 533: / Line 498: @@
 <div class="column two_thirds_size" id="button">
-<h3>Button </h3>
+===Button ===
-<p> You can use the button class to highlight a link in your wiki. </p>
+You can use the button class to highlight a link in your wiki.
 <div class="button_link" >
-[[EXAMPLE BUTTON]]
+[[  #Button | EXAMPLE BUTTON ]]
 </div>
 </div>
@@ Line 543: / Line 508: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
-    &#60;div class="button_link"&#62;
+&#60;div class="button_link"&#62;
-       &#60;a href="URL"&#62;   <b>EXAMPLE BUTTON</b> &#60;/a&#62;
+<nowiki>[[  #Button | EXAMPLE BUTTON ]]</nowiki>
-    &#60;/div&#62;
+&#60;/div&#62;
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
+<div class="column two_thirds_size" id="clear">
+=== Clear  ===
+This class clears the content, it is basically the same as clicking "enter" when you are writing a text.  <br>
+If you add the "extra_space" class, it will add extra vertical spacing between your divs.
-<div class="column two_thirds_size" id="clear">
-<h3> Clear  </h3>
-<p> This class clears the content, it is basically the same as clicking "enter" when you are writing a text.  <br>
- If you add the "extra_space" class, it will add extra vertical spacing between your divs.
-</p>
 </div>
@@ Line 565: / Line 528: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>
-    &#60;div class="clear extra_space"&#62; 	 &#60;/div&#62;
+&#60;div class="clear extra_space"&#62; 	 &#60;/div&#62;
-</p>
 </div>
 </div>
@@ Line 584: / Line 547: @@
 <div class="column full_size" id="menu">
-<h2> Adding items to your Menu </h2>
+== Adding items to your Menu ==
+<span style="color:red;font-weight:bold">À partir d'ici c'est des choses plus techniques pour modifier l'apparence générale, le menu etc. dans le template</span>
 </div>
 <div class="column third_size" id="adding_submenu">
-<h3> Adding a direct menu item</h3>
+=== Adding a direct menu item===
-<p> To add another a direct (goes straight to the page rather than opening a submenu). Make sure you place the following code inside the class "igem_2018_team_menu". In this example we will link to "Test Direct". </p>
+To add another a direct (goes straight to the page rather than opening a submenu). Make sure you place the following code inside the class "igem_2018_team_menu". In this example we will link to "Test Direct".
 </div>
@@ Line 596: / Line 560: @@
 <div class="column two_thirds_size">
 <div class="highlight decoration_background">
-<p>
 			&#60;a href="https://2018.igem.org/Team:Example2/Test_Direct"> <br>
 				&#60; div class="menu_item direct_link"> <br>
@@ Line 602: / Line 566: @@
 				&#60;/div> <br>
 			&#60;/a>
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
 <div class="column third_size" id="adding_submenu_menu">
-<h3> Adding a submenus </h3>
+=== Adding a submenus ===
-<p> To add another menu item that opens up the submenu, use the following code. In this example we will create "Test Submenu" with the subpage "Test Subpage". Remember to make sure you place the your code inside the class "igem_2018_team_menu"</p>
+To add another menu item that opens up the submenu, use the following code. In this example we will create "Test Submenu" with the subpage "Test Subpage". Remember to make sure you place the your code inside the class "igem_2018_team_menu"
 </div>
@@ Line 620: / Line 578: @@
 <div class="column two_thirds_size">
 <div class="highlight decoration_background">
-<p>
 		&#60;div class="menu_item"><br>
 			&#60;div class="submenu_control_icon"> &#60;/div><br>
@@ Line 634: / Line 592: @@
 		&#60;/div>
-</p>
 </div>
 </div>
@@ Line 649: / Line 607: @@
 <div class="column full_size">
-<h2 > CSS</h2>
+==CSS==
-<p> CSS will provide styling for your HTML elements, the attributes are ordered alpahabetically in the template and each of them modifies the function and appareance of the class. Here is a list of the most common attributes used in the code.  </p>
+CSS will provide styling for your HTML elements, the attributes are ordered alpahabetically in the template and each of them modifies the function and appareance of the class. Here is a list of the most common attributes used in the code.
-<p> Take a look at the code and see how each element is defined, if you want change a color for a particular thing, you can modify the hex code for that color or modify the size or anything you need!  </p>
+Take a look at the code and see how each element is defined, if you want change a color for a particular thing, you can modify the hex code for that color or modify the size or anything you need!
@@ Line 709: / Line 667: @@
 <div class="column third_size" id="new_class">
-<h3> Creating a new class </h3>
+=== Creating a new class ===
-<p> In this example we are going to create a new class, it is best practice to name your classes with specific names so other code won't override them.
+In this example we are going to create a new class, it is best practice to name your classes with specific names so other code won't override them.
 The following code shows how to make a class that changes the color of text.
-</p>
 </div>
@@ Line 719: / Line 677: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>	/* highlight with a full orange border decoration */ <br>
+	/* highlight with a full orange border decoration */ <br>
 	.igem_2018_team_content .igem_2018_team_column_wrapper .orange_text { <br>
-    		color: #f8b732; <br>
+		color: #f8b732; <br>
 	}
-</p>
 </div>
 </div>
@@ Line 730: / Line 688: @@
 <div class="highlight" style="color:#f8b732;">
-<p>
 	&#60;p class="orange_text"> Orange text &#60;/p>
-</p>
 </div>
 </div>
-<div class="clear extra_space"></div>
 <div class="column third_size" id="new_class_under">
-<h3> Creating a new class under an existing one </h3>
+=== Creating a new class under an existing one ===
-<p> In this example we are going to create a new class for an orange background under the highlight class. You will need to follow the precise naming of the classes in the code for it to work correclty when you call it in your html. First declare the two content wrappers: ".igem_2018_team_content .igem_2018_team_column_wrapper" and then specify the highlight class and the name of your new class: ".highlight.orange_background"
+In this example we are going to create a new class for an orange background under the highlight class. You will need to follow the precise naming of the classes in the code for it to work correclty when you call it in your html. First declare the two content wrappers: ".igem_2018_team_content .igem_2018_team_column_wrapper" and then specify the highlight class and the name of your new class: ".highlight.orange_background"
 Next you will find the necessary CSS code and then and example of how to call it on your html.
-</p>
 </div>
@@ Line 753: / Line 705: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>	/* highlight with a full orange border decoration */ <br>
+	/* highlight with a full orange border decoration */ <br>
 	.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.orange_background { <br>
-    		background-color: #f8b732; <br>
+		background-color: #f8b732; <br>
 	}
-</p>
 </div>
 </div>
@@ Line 764: / Line 716: @@
 <div class="highlight">
-<p>
 	&#60;p class="orange_text"> Orange background &#60;/p>
-</p>
@@ Line 773: / Line 725: @@
 </div>
+<div class="column third_size" id="changing_color">
+=== Change the color of an element ===
+This is very simple and easy thing to do. First, you will need to find which element or class you want to modify and then replace the hex code for the color. In the following example we change the color of h1 and h2 to orange.
-<div class="clear extra_space"></div>
-<div class="column third_size" id="changing_color">
-<h3> Change the color of an element </h3>
-<p>This is very simple and easy thing to do. First, you will need to find which element or class you want to modify and then replace the hex code for the color. In the following example we change the color of h1 and h2 to orange.
-</p>
 </div>
@@ Line 790: / Line 734: @@
 <div class="column third_size">
 <div class="highlight decoration_background">
-<p>	/* styling for the titles h1 h2 */
+	/* styling for the titles h1 h2 */
 	.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 { <br>
 		padding:5px 15px; <br>
@@ Line 796: / Line 740: @@
 		color: #fdeb39;<br>
 	}
-</p>
 </div>
 </div>
@@ Line 806: / Line 750: @@
-<p>
-&#60;h1> This is now orange  &#60;/h1><br>
+&#60;span style="color:#f8b732;"> This is now orange  &#60;/span><br>
-&#60;h2> This is now orange  &#60;/h2><br>
+&#60;span style="color:red;"> This is now red  &#60;/span><br>
-</p>
-<h1 style="color:#f8b732;"> This is now orange </h1>
+<span style="color:#f8b732;"> This is now orange </span>
-<h2 style="color:#f8b732;"> This is now orange </h2>
+<span style="color:red;"> This is now red </span>
 </div>
@@ Line 827: / Line 771: @@
 <div class="column full_size">
-<h2> JQUERY</h2>
+== JQUERY==
-<p> Jquery makes the menu and other interactive elements in the website work, for example the open and closing of the submenus along with the icon that reflects the state of said submenu. We will not go into depth to talk about the jquery, if you wish to learn more about this you can visit: [http://learn.jquery.com/]</p>
+Jquery makes the menu and other interactive elements in the website work, for example the open and closing of the submenus along with the icon that reflects the state of said submenu. We will not go into depth to talk about the jquery, if you wish to learn more about this you can visit: [http://learn.jquery.com/]
 </div>