Difference between revisions of "Resources/Template Documentation"

m (Protected "Resources/Template Documentation" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
 
(41 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
<div class="column full_size">
 
<div class="column full_size">
 
<h1> Template Documentation for Teams </h1>
 
<h1> Template Documentation for Teams </h1>
−
</div>
 
  
−
<div class="column half_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>
−
<p> This page will help you edit and build your team wiki based on the default template given to your team. </p>
+
 
 
<p> The template is composed of html, css and jquery,  you can find the original code here:
 
<p> The template is composed of html, css and jquery,  you can find the original code here:
 
<a href="https://2017.igem.org/Template:Example2"> Template: Example 2 </a></p>
 
<a href="https://2017.igem.org/Template:Example2"> Template: Example 2 </a></p>
  
 
<p>
 
<p>
−
 
 
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 top of every page.
+
Another good use is to have a banner on your template so it appears on every of your wiki pages </p>
−
</p>
+
 
−
</div>
+
 
 +
<h4> On this page </h4>  
 +
 
  
−
<div class="column half_size">
 
−
<div class="expand_content first"> <h2> On this page </h2></div>
 
−
<div class="expand_content control_button"> </div>
 
−
<div class="expand_content more" style="clear: both;"> 
 
 
<ul>  
 
<ul>  
−
<li> <a href=""> HTML </a>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#HTML"> HTML </a>
  
 
<ul>  
 
<ul>  
−
<li> General elements 
 
−
<ul>
 
−
<li> text </li>
 
−
<li> titles </li>
 
−
<li> links </li>
 
−
<li> images </li>
 
−
<li> unordered list </li>
 
−
<li> ordered list </li>
 
−
<li> tables </li>
 
−
</ul>
 
−
</li>
 
  
−
<li> Layout Classes </li>
 
  
−
<li> Support Classes  
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#colors"> Colors </a></li>
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#text"> Text  </a></li>
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#titles">Titles </a></li>
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#links">Links </a></li>
 +
<li><a href="https://2017.igem.org/Resources/Template_Documentation#images"> Images </a></li>
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#unordered_list">Unordered list  </a></li>
 +
<li><a href="https://2017.igem.org/Resources/Template_Documentation#ordered_list"> Ordered list </a></li>
 +
<li><a href="https://2017.igem.org/Resources/Template_Documentation#nested_list"> Nested list </a></li>
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#table">Tables </a></li>
 +
 
 +
 
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#layout_classes">Layout Classes </a> </li>
 +
 
 +
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#support_classes">Support Classes </a>
 
<ul>  
 
<ul>  
−
<li> Highlight </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#highlight">Highlight </a></li>
−
<li>Styling highlight class </li>
+
<li><a href="https://2017.igem.org/Resources/Template_Documentation#styling_highlight"> Styling highlight class </a></li>
−
<li> Button </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#button">Button </a></li>
−
<li> Clear </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#clear">Clear </a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
  
−
<li> Menu
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#menu">Menu</a>
 
<ul>  
 
<ul>  
−
<li> Adding a submenu </li>
+
<li><a href="https://2017.igem.org/Resources/Template_Documentation#adding_submenu"> Adding a submenu </a></li>
−
<li> Adding a menu item </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#adding_menu_item">Adding a menu item </a></li>
−
<li> Adding a menu with a submenu </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#adding_submenu_menu">Adding a menu with a submenu </a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 62: Line 59:
 
</li>
 
</li>
  
−
<li> <a href=""> CSS </a>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#CSS"> CSS </a>
 
<ul>  
 
<ul>  
−
<li> Classes
+
 
−
<ul>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#new_class"> Creating a new class </a></li>
−
<li> Creating a new class </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#new_class_under"> Creating a new class under an existing one </a></li>
−
<li> Creating a new class under an existing one </li>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#changing_color">Changing the color of an element </a> </li>
−
<li> Changing the color of an element </li>
+
 
−
</ul>
+
−
</li>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
  
−
<li> <a href="">JQUERY </a>
+
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#JQUERY">JQUERY </a>
  
 
</li>
 
</li>
  
 
</ul>
 
</ul>
−
</div>
 
−
</div>
 
 
</div>
 
</div>
 +
 +
  
  
Line 91: Line 86:
  
 
<div class="column full_size">
 
<div class="column full_size">
−
<h2> HTML</h2>
+
<h2 id="HTML"> HTML</h2>
 +
<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>
 +
 
 +
 
 +
<h3 id="colors"> Colors </h3>
 +
<p> The colors used on your template are: </p>
 +
 
 +
<table>
 +
 
 +
<tr height="50px">
 +
<td bgcolor="#7fc1f7"></td>
 +
<td bgcolor="#3399ff"></td>
 +
<td bgcolor="#f2f2f2"></td>
 +
<td bgcolor="#000000"></td>
 +
<td bgcolor="#d3d3d3"></td>
 +
</tr>
 +
 
 +
<tr align="center">
 +
<td >#7fc1f7</td>
 +
<td >#3399ff</td>
 +
<td >#d3d3d3</td>
 +
<td >#f2f2f2</td>
 +
<td >#000000</td>
 +
</tr>
 +
</table>
 +
 
 +
 
 
</div>
 
</div>
  
  
−
<div class="column half_size">
+
 
 +
 
 +
 
 +
<div class="column half_size" id="text">
 
<h3> Text </h3>
 
<h3> Text </h3>
 
<p> To write text use the < p > tag </p>  
 
<p> To write text use the < p > tag </p>  
Line 111: Line 135:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="titles">
 
<h3> Titles </h3>
 
<h3> Titles </h3>
 
<p> You can add title using the  h tag, here is how the different sizes look:</p>
 
<p> You can add title using the  h tag, here is how the different sizes look:</p>
Line 145: Line 169:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="links">
 
<h3> Links </h3>
 
<h3> Links </h3>
−
<p> When creating links use the < a > tag, links will display : <a href ="" style="color:#5e5f5f; "> Example </a>  </p>
+
<p> When creating links use the < a > tag, links will display : <a href ="" style="color:#3399ff; "> Example </a>  </p>
 
</div>
 
</div>
  
Line 163: Line 187:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="images">
 
<h3> Images </h3>
 
<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>
 
<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>
Line 185: Line 209:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="unordered_list">
  
 
<h3> Unordered Lists </h3>
 
<h3> Unordered Lists </h3>
Line 225: Line 249:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="ordered_list">
 
<h3> Numbered Lists </h3>
 
<h3> Numbered Lists </h3>
 
<p>To create an ordered list, use:  <br>  
 
<p>To create an ordered list, use:  <br>  
Line 264: Line 288:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="nested_list">
 
<h3> Nested  Lists </h3>
 
<h3> Nested  Lists </h3>
 
<p> Here is an example of a nested list. </p>
 
<p> Here is an example of a nested list. </p>
Line 303: Line 327:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
−
<div class="column half_size">
+
<div class="column half_size" id="table">
  
 
<h3> Tables</h3>
 
<h3> Tables</h3>
Line 355: Line 379:
  
  
−
<div class="column full_size">
+
<div class="column full_size" id="layout_classes">
 
<h2>Layout classes</h2>
 
<h2>Layout classes</h2>
 
</div>
 
</div>
  
−
<div class="column half_size">
+
<div class="column half_size" id="columns">
 
<h3> Columns </h3>
 
<h3> Columns </h3>
 
<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 two types of layout options having two columns or just one. For one column call the class column full_size and for two columns call column half_size. Here is an example to the right. </p>
 
<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 two types of layout options having two columns or just one. For one column call the class column full_size and for two columns call column half_size. Here is an example to the right. </p>
Line 377: Line 401:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
−
<div class="column full_size">
+
<div class="column full_size" id="support_classes">
 
<h2> Support Classes </h2>
 
<h2> Support Classes </h2>
  
  
−
<div class="column half_size">
+
<div class="column half_size"  id="highlight">
 
<h3> Highlight  </h3>
 
<h3> Highlight  </h3>
 
<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>
 
<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>
Line 404: Line 428:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="styling_highlight">
 
<h3> Styling highlight class</h3>
 
<h3> Styling highlight class</h3>
 
<p> There are ways to style  the highlight class, you can add:</p>
 
<p> There are ways to style  the highlight class, you can add:</p>
Line 419: Line 443:
  
 
<div class="column fourth_size">
 
<div class="column fourth_size">
−
<div class="highlight gray turquoise_top">
+
<div class="highlight gray turquoise_top"  style="border-top: 4px solid #3399ff;">
  
 
<p>
 
<p>
Line 432: Line 456:
  
 
<div class="column fourth_size">
 
<div class="column fourth_size">
−
<div class="highlight gray turquoise_border">
+
<div class="highlight gray turquoise_border" style="border: 4px solid #3399ff;">
 
<p>
 
<p>
 
&#60;div class="column half_size" > <br>
 
&#60;div class="column half_size" > <br>
Line 446: Line 470:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
−
<div class="column half_size">
+
<div class="column half_size" id="button">
 
<h3>Button </h3>
 
<h3>Button </h3>
 
<p> You can use the button class to highlight a link in your wiki. </p>
 
<p> You can use the button class to highlight a link in your wiki. </p>
  
−
<div class="button">
+
<div class="button" >
−
<a href="">
+
<a href=""  style="background-color: #3399ff;">
 
REGISTER NOW!
 
REGISTER NOW!
 
</a>
 
</a>
Line 472: Line 496:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
−
<div class="column half_size">
+
<div class="column half_size" id="clear">
 
<h3> Clear  </h3>
 
<h3> Clear  </h3>
 
<p> This class clears the content, it is basically the same as clicking "enter" when you are writing a text.  <br>
 
<p> This class clears the content, it is basically the same as clicking "enter" when you are writing a text.  <br>
Line 495: Line 519:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
−
<div class="column full_size">
+
<div class="column full_size" id="menu">
 
<h2> Adding items to your Menu </h2>
 
<h2> Adding items to your Menu </h2>
  
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="adding_submenu">
 
<h3> Adding a submenu  item </h3>
 
<h3> Adding a submenu  item </h3>
 
<p> To add another submenu page to your menu, just copy the following code and place it inside the desired submenu wrapper.  
 
<p> To add another submenu page to your menu, just copy the following code and place it inside the desired submenu wrapper.  
Line 527: Line 551:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="adding_menu">
 
<h3> Adding a menu item </h3>
 
<h3> Adding a menu item </h3>
 
<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>
 
<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>
Line 548: Line 572:
  
  
−
<div class="column half_size">
+
<div class="column half_size" id="adding_submenu_menu">
 
<h3> Adding a menu item with submenu </h3>
 
<h3> Adding a menu item with submenu </h3>
 
<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>
 
<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>
Line 583: Line 607:
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
−
<div class="line_divider"></div>
+
<div class="line_divider" id="CSS"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
Line 589: Line 613:
  
 
<div class="column full_size">
 
<div class="column full_size">
−
<h2> CSS</h2>
+
<h2 > CSS</h2>
 
<p> CSS will provide styling for your HTML elements, the code in the template is organized the following way:</p>
 
<p> CSS will provide styling for your HTML elements, the code in the template is organized the following way:</p>
 
</div>
 
</div>
Line 645: Line 669:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
−
<div class="column third_size">
+
<div class="column third_size" id="new_class">
 
<h3> Creating a new class </h3>
 
<h3> Creating a new class </h3>
 
<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.
 
<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.
Line 653: Line 677:
  
  
−
<div class="column third_size">
+
<div class="column third_size" >
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p> /* create a div with a yellow background*/ <br>
 
<p> /* create a div with a yellow background*/ <br>
Line 683: Line 707:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
−
<div class="column third_size">
+
<div class="column third_size" id="new_class_under">
 
<h3> Creating a new class under an existing one </h3>
 
<h3> Creating a new class under an existing one </h3>
 
<p> In this example we are going to create a new class under the highlight class  
 
<p> In this example we are going to create a new class under the highlight class  
Line 719: Line 743:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
−
<div class="column third_size">
+
<div class="column third_size" id="changing_color">
 
<h3> Change the color of an element </h3>
 
<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  
 
<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  
Line 759: Line 783:
  
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
−
<div class="line_divider"></div>
+
<div class="line_divider" id="JQUERY" ></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
 +
 +
 +
<div class="column full_size">
 +
<h2> JQUERY</h2>
 +
<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: <a href="http://learn.jquery.com/">http://learn.jquery.com/ </a></p>
 +
</div>

Latest revision as of 19:19, 16 October 2017

MENU
Loading...

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: Example 2

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

On this page

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:

#7fc1f7 #3399ff #d3d3d3 #f2f2f2 #000000

Text

To write text use the < p > tag

<p> Text </p>

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

<h1>Title one </h1>
<h2>Title two </h2>
<h3>Title three </h3>
<h4>Title four </h4>
<h5>Title five </h5>
<h6>Title six </h6>

<a href="link url "> LINK </a>

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:

  1. Milk
  2. Eggs
  3. 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
    1. Red
    2. Orange
    3. 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
Content A 1 Content B 1
Content A 2 Content B 2

<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 two types of layout options having two columns or just one. For one column call the class column full_size and for two columns call column half_size. Here is an example to the right.

<div class="column half_size" >
<p> Content goes here </p>
</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:

  • class="highlight gray" to add a gray background
  • class="highlight blue_top" to add a blue decorative line on top
  • class="highlight blue_border" to add a blue border around the div

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

<div class="column half_size" >
<div class="highlight gray blue_top">

</div>
</div>

<div class="column half_size" >
<div class="highlight gray blue_border">

</div>
</div>

Button

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

REGISTER NOW!

<div class="button"> <a href="URL"> REGISTER NOW! </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>