m |
|||
Line 2: | Line 2: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
− | + | 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. | |
+ | |||
+ | The template is composed of html, css and jquery, you can find the original code here: | ||
+ | [[Template:Example2]] | ||
− | |||
− | |||
− | |||
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. | 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 | + | Another good use is to have a banner on your template so it appears on every of your wiki pages |
</div> | </div> | ||
Line 16: | Line 16: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
− | + | ==HTML== | |
− | + | 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 | |
</div> | </div> | ||
Line 24: | Line 24: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
− | + | ===Colors === | |
− | + | The colors used on your template are: | |
<table> | <table> | ||
Line 69: | Line 69: | ||
<div class="column two_thirds_size" id="text"> | <div class="column two_thirds_size" id="text"> | ||
− | + | === Text === | |
− | + | <nowiki> | |
+ | Pour écrire des paragraphes simplement écrire le texte | ||
+ | |||
+ | et sauter une ligne pour un différent paragraphe | ||
+ | </nowiki> | ||
</div> | </div> | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
− | + | Pour écrire des paragraphes simplement écrire le texte | |
− | + | ||
+ | et sauter une ligne pour un différent paragraphe | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
Line 88: | Line 94: | ||
<div class="column two_thirds_size" id="titles"> | <div class="column two_thirds_size" id="titles"> | ||
− | + | === Titles === | |
− | + | You can add title using the h tag, here is how the different sizes look: | |
− | + | = Title one = | |
− | + | == Title two == | |
− | + | === Title three === | |
− | + | ==== Title four ==== | |
− | + | ===== Title five ===== | |
− | + | ======Title six ====== | |
</div> | </div> | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | < | + | <pre> |
− | + | = Title one = | |
− | + | ||
− | + | == Title two == | |
− | + | ||
− | + | === Title three === | |
− | + | ||
− | </ | + | ==== Title four ==== |
+ | |||
+ | ===== Title five ===== | ||
+ | |||
+ | ======Title six ====== | ||
+ | </pre> | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
Line 124: | Line 136: | ||
<div class="column two_thirds_size" id="links"> | <div class="column two_thirds_size" id="links"> | ||
− | + | === Links === | |
− | + | Voici un lien : | |
+ | |||
+ | [[ Team:Aix-Marseille/Template_Documentation ]] | ||
+ | |||
+ | Avec un texte différent : | ||
+ | |||
+ | [[ Team:Aix-Marseille/Template_Documentation | Project ]] | ||
+ | |||
+ | Lien vers une sous-section : | ||
+ | |||
+ | [[ Team:Aix-Marseille/Template_Documentation#Titles | Titles ]] | ||
</div> | </div> | ||
Line 131: | Line 153: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | < | + | Voici un lien : |
− | + | ||
− | </ | + | <nowiki>[[ Team:Aix-Marseille/Project ]]</nowiki> |
+ | |||
+ | Avec un texte différent : | ||
+ | |||
+ | <nowiki>[[ Team:Aix-Marseille/Project | Project ]]</nowiki> | ||
+ | |||
+ | Lien vers une sous-section : <nowiki>[[ Team:Aix-Marseille/Template_Documentation#Titles | Titles ]]</nowiki> | ||
+ | |||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
Line 144: | Line 174: | ||
<div class="column two_thirds_size" id="images"> | <div class="column two_thirds_size" id="images"> | ||
− | + | === Images === | |
− | + | You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server. | |
</div> | </div> | ||
Line 151: | Line 181: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<img src="image URL "> | <img src="image URL "> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 165: | Line 195: | ||
<div class="column two_thirds_size" id="unordered_list"> | <div class="column two_thirds_size" id="unordered_list"> | ||
− | + | === Unordered Lists === | |
− | + | Use the following example to create a simple list. | |
− | + | ||
+ | '''Painting materials:''' | ||
− | + | *Brushes | |
− | + | *Acrylic paint | |
− | + | *Watercolors | |
− | |||
</div> | </div> | ||
Line 179: | Line 209: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<b>Painting Materials</b> <br> | <b>Painting Materials</b> <br> | ||
<ul> <br> | <ul> <br> | ||
− | + | <li> Brushes </li> <br> | |
− | + | <li> Acrylic paint </li> <br> | |
− | + | <li> Watercolors </li> <br> | |
</ul> | </ul> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 201: | Line 231: | ||
<div class="column two_thirds_size" id="ordered_list"> | <div class="column two_thirds_size" id="ordered_list"> | ||
− | + | === Numbered Lists === | |
− | + | To create an ordered list, use: | |
− | + | ||
− | + | ||
− | + | '''Things to buy:''' | |
− | + | #Milk | |
− | + | #Eggs | |
− | + | #Flour | |
</div> | </div> | ||
Line 215: | Line 243: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<b>Things to buy: </b> <br> | <b>Things to buy: </b> <br> | ||
<ol> <br> | <ol> <br> | ||
− | + | <li> Milk </li> <br> | |
− | + | <li> Eggs </li> <br> | |
− | + | <li> Flour </li> <br> | |
</ol> | </ol> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 238: | Line 266: | ||
<div class="column two_thirds_size" id="nested_list"> | <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> | ||
Line 257: | Line 278: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | |||
− | |||
− | + | <ul><br> | |
− | + | ||
− | + | <li> Cold Colors </li> <br> | |
− | + | <li> Warm Colors <br> | |
− | + | <ol> <br> | |
− | + | <li> Red </li> <br> | |
− | + | <li> Orange </li> <br> | |
− | + | <li> Yellow </li><br> | |
+ | </ol> <br> | ||
+ | </li><br> | ||
+ | |||
+ | </ul> | ||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 286: | Line 307: | ||
<div class="column two_thirds_size" id="table"> | <div class="column two_thirds_size" id="table"> | ||
− | + | === Tables=== | |
− | + | Tables created within in a page already have styling and will display: | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | {| 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 | ||
+ | |} | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
Line 308: | Line 333: | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<table> <br> | <table> <br> | ||
Line 324: | Line 349: | ||
</table> | </table> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 341: | Line 366: | ||
<div class="column full_size" id="layout_classes"> | <div class="column full_size" id="layout_classes"> | ||
− | + | ==Layout classes== | |
</div> | </div> | ||
<div class="column full_size" id="columns"> | <div class="column full_size" id="columns"> | ||
− | + | === 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 <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> | ||
Line 357: | Line 382: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column full_size" > <br> | <div class="column full_size" > <br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 370: | Line 395: | ||
<div class="column two_thirds_size"> | <div class="column two_thirds_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column two_thirds_size" > <br> | <div class="column two_thirds_size" > <br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 380: | Line 405: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 392: | Line 417: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 409: | Line 434: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 430: | Line 455: | ||
<div class="column full_size" id="support_classes"> | <div class="column full_size" id="support_classes"> | ||
− | + | == Support Classes == | |
<div class="column two_thirds_size" id="highlight"> | <div class="column two_thirds_size" id="highlight"> | ||
− | + | === 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. | |
</div> | </div> | ||
Line 441: | Line 466: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="column half_size" > <br> | <div class="column half_size" > <br> | ||
<div class="highlight"><br><br> | <div class="highlight"><br><br> | ||
</div><br> | </div><br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
Line 458: | Line 483: | ||
<div class="column full_size" id="styling_highlight"> | <div class="column full_size" id="styling_highlight"> | ||
− | + | === Styling highlight class=== | |
− | + | There are ways to style the highlight class, you can add: | |
<ul> | <ul> | ||
Line 469: | Line 494: | ||
</ul> | </ul> | ||
− | + | These classes can be combined to create different effects, as seen in the next examples. | |
</div> | </div> | ||
Line 476: | Line 501: | ||
<div class="highlight decoration_background decoration_A_top"> | <div class="highlight decoration_background decoration_A_top"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
<div class="highlight decoration_background decoration_A_top"><br><br> | <div class="highlight decoration_background decoration_A_top"><br><br> | ||
</div><br> | </div><br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
Line 492: | Line 517: | ||
<div class="highlight decoration_B_full"> | <div class="highlight decoration_B_full"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
<div class="highlight decoration_B_full"><br><br> | <div class="highlight decoration_B_full"><br><br> | ||
</div><br> | </div><br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
Line 507: | Line 532: | ||
<div class="highlight decoration_background decoration_A_full"> | <div class="highlight decoration_background decoration_A_full"> | ||
− | + | ||
<div class="column third_size" > <br> | <div class="column third_size" > <br> | ||
<div class="highlight decoration_background decoration_A_full"><br><br> | <div class="highlight decoration_background decoration_A_full"><br><br> | ||
</div><br> | </div><br> | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
Line 531: | Line 556: | ||
<div class="column two_thirds_size" id="button"> | <div class="column two_thirds_size" id="button"> | ||
− | + | ===Button === | |
− | + | You can use the button class to highlight a link in your wiki. | |
<div class="button_link" > | <div class="button_link" > | ||
Line 541: | Line 566: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
− | + | <div class="button_link"> | |
− | + | <a href="URL"> <b>EXAMPLE BUTTON</b> </a> | |
− | + | </div> | |
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 554: | Line 579: | ||
<div class="column two_thirds_size" id="clear"> | <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> | </div> | ||
Line 563: | Line 588: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
− | + | <div class="clear extra_space"> </div> | |
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 582: | Line 607: | ||
<div class="column full_size" id="menu"> | <div class="column full_size" id="menu"> | ||
− | + | == Adding items to your Menu == | |
</div> | </div> | ||
<div class="column third_size" id="adding_submenu"> | <div class="column third_size" id="adding_submenu"> | ||
− | + | === 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". | |
</div> | </div> | ||
Line 594: | Line 619: | ||
<div class="column two_thirds_size"> | <div class="column two_thirds_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<a href="https://2018.igem.org/Team:Example2/Test_Direct"> <br> | <a href="https://2018.igem.org/Team:Example2/Test_Direct"> <br> | ||
< div class="menu_item direct_link"> <br> | < div class="menu_item direct_link"> <br> | ||
Line 600: | Line 625: | ||
</div> <br> | </div> <br> | ||
</a> | </a> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 611: | Line 636: | ||
<div class="column third_size" id="adding_submenu_menu"> | <div class="column third_size" id="adding_submenu_menu"> | ||
− | + | === 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> | </div> | ||
Line 618: | Line 643: | ||
<div class="column two_thirds_size"> | <div class="column two_thirds_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | ||
<div class="menu_item"><br> | <div class="menu_item"><br> | ||
<div class="submenu_control_icon"> </div><br> | <div class="submenu_control_icon"> </div><br> | ||
Line 632: | Line 657: | ||
</div> | </div> | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 647: | Line 672: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
− | + | ==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! | |
Line 707: | Line 732: | ||
<div class="column third_size" id="new_class"> | <div class="column third_size" id="new_class"> | ||
− | + | === 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. | The following code shows how to make a class that changes the color of text. | ||
− | + | ||
</div> | </div> | ||
Line 717: | Line 742: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | /* highlight with a full orange border decoration */ <br> | |
.igem_2018_team_content .igem_2018_team_column_wrapper .orange_text { <br> | .igem_2018_team_content .igem_2018_team_column_wrapper .orange_text { <br> | ||
− | + | color: #f8b732; <br> | |
} | } | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 728: | Line 753: | ||
<div class="highlight" style="color:#f8b732;"> | <div class="highlight" style="color:#f8b732;"> | ||
− | + | ||
<p class="orange_text"> Orange text </p> | <p class="orange_text"> Orange text </p> | ||
− | + | ||
</div> | </div> | ||
Line 742: | Line 767: | ||
<div class="column third_size" id="new_class_under"> | <div class="column third_size" id="new_class_under"> | ||
− | + | === 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. | Next you will find the necessary CSS code and then and example of how to call it on your html. | ||
− | + | ||
</div> | </div> | ||
Line 751: | Line 776: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | /* highlight with a full orange border decoration */ <br> | |
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.orange_background { <br> | .igem_2018_team_content .igem_2018_team_column_wrapper .highlight.orange_background { <br> | ||
− | + | background-color: #f8b732; <br> | |
} | } | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 762: | Line 787: | ||
<div class="highlight"> | <div class="highlight"> | ||
− | + | ||
<p class="orange_text"> Orange background </p> | <p class="orange_text"> Orange background </p> | ||
− | + | ||
Line 780: | Line 805: | ||
<div class="column third_size" id="changing_color"> | <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> | </div> | ||
Line 788: | Line 813: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
<div class="highlight decoration_background"> | <div class="highlight decoration_background"> | ||
− | + | /* 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> | .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> | padding:5px 15px; <br> | ||
Line 794: | Line 819: | ||
color: #fdeb39;<br> | color: #fdeb39;<br> | ||
} | } | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 804: | Line 829: | ||
− | + | ||
− | < | + | <span style="color:#f8b732;"> This is now orange </span><br> |
− | < | + | <span style="color:red;"> This is now red </span><br> |
− | + | ||
− | < | + | <span style="color:#f8b732;"> This is now orange </span> |
− | < | + | <span style="color:red;"> This is now red </span> |
</div> | </div> | ||
Line 825: | Line 850: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
− | + | == 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: [http://learn.jquery.com/] | |
</div> | </div> |
Revision as of 17:23, 27 June 2018
Template Documentation for Teams
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.
The template is composed of html, css and jquery, you can find the original code here: Template:Example2
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
Contents
HTML
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
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
Pour écrire des paragraphes simplement écrire le texte
et sauter une ligne pour un différent paragraphe
Titles
You can add title using the h tag, here is how the different sizes look:
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 :
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
You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server.
<img src="image URL ">
Unordered Lists
Use the following example to create a simple list.
Painting materials:
- Brushes
- Acrylic paint
- Watercolors
<b>Painting Materials</b>
<ul>
<li> Brushes </li>
<li> Acrylic paint </li>
<li> Watercolors </li>
</ul>
Numbered Lists
To create an ordered list, use:
Things to buy:
- Milk
- Eggs
- Flour
<b>Things to buy: </b>
<ol>
<li> Milk </li>
<li> Eggs </li>
<li> Flour </li>
</ol>
Nested Lists
Here is an example of a nested list.
- Cold Colors
- Warm Colors
- Red
- Orange
- Yellow
<ul>
<li> Cold Colors </li>
<li> Warm Colors
<ol>
<li> Red </li>
<li> Orange </li>
<li> Yellow </li>
</ol>
</li>
</ul>
Tables
Tables created within in a page already have styling and will display:
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 |
<table>
<tr>
<th> Header 1 </th> <th> Header 2 </th>
</tr>
<tr>
<td> Content A 1 </td> <td> Content B 1 </td>
</tr>
<tr>
<td> Content A 2 </td> <td> Content B 2 </td>
</tr>
</table>
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.
<div class="column full_size" >
</div>
<div class="column two_thirds_size" >
</div>
<div class="column third_size" >
</div>
<div class="column third_size" >
</div>
<div class="column third_size" >
</div>
<div class="column third_size" >
</div>
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.
<div class="column half_size" >
<div class="highlight">
</div>
</div>
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.
<div class="column third_size" >
<div class="highlight decoration_background decoration_A_top">
</div>
</div>
<div class="column third_size" >
<div class="highlight decoration_B_full">
</div>
</div>
<div class="column third_size" >
<div class="highlight decoration_background decoration_A_full">
</div>
</div>
Button
You can use the button class to highlight a link in your wiki.
<div class="button_link"> <a href="URL"> EXAMPLE BUTTON </a> </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.
<div class="clear extra_space"> </div>
<a href="https://2018.igem.org/Team:Example2/Test_Direct">
< div class="menu_item direct_link">
Test Direct
</div>
</a>
<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: [1]