Difference between revisions of "TemplatesforTeams Code Documentation"

 
(66 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{2015CSS}}
+
{{2015Top}}
 
<html>                                       
 
<html>                                       
  
−
 
−
<!-- Here is where you change the title of page -->
 
−
<div id="pageTitle">
 
−
<h2>Template Documentation</div>
 
−
 
−
<div id="grayLine_Clear"></div>
 
  
 
<div id="leftColumn">
 
<div id="leftColumn">
Line 15: Line 9:
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#htmlcss"> <li>Using HTML and CSS</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#htmlcss"> <li>Using HTML and CSS</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#newpage"> <li>New wiki page</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#newpage"> <li>New wiki page</li></a>
−
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#templatecall"> <li>Applying template</li></a>
+
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#templatecall"> <li>Applying templates</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#menuedit"> <li>Editing the menu</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#menuedit"> <li>Editing the menu</li></a>
 
                                 </ul>
 
                                 </ul>
 
                         <br>
 
                         <br>
−
                       <h5>Adding html content </h5>
+
                       <h5>Adding HTML content </h5>
 
                        <ul>
 
                        <ul>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#text"> <li>Texts</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#text"> <li>Texts</li></a>
Line 31: Line 25:
 
                        <ul>
 
                        <ul>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#colors"> <li>Changing colors</li></a>
 
                                       <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#colors"> <li>Changing colors</li></a>
 +
                                      <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#fonts"> <li>Changing fonts</li></a>
 +
                                      <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#tables"> <li>Styling tables</li></a>
 +
                                      <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#classes"> <li>Creating classes</li></a>
 
                                 </ul>
 
                                 </ul>
  
Line 36: Line 33:
  
 
<div id="rightColumn">
 
<div id="rightColumn">
−
 
−
<!-- This is the alert message. You can edit the  text and remove once the page is ready-->
 
−
<div id="alertMessage"> <p> Please note that all information on this page is in a draft version.
 
−
                <br>Please check back often for details. </p></div>
 
  
 
<!-- start of content ---------------------------------------->  
 
<!-- start of content ---------------------------------------->  
Line 55: Line 48:
  
 
<h5> Templates </h5>
 
<h5> Templates </h5>
−
<a href="https://2015.igem.org/Template:TeamTemplateA"><img src="https://static.igem.org/mediawiki/2015/b/bd/TemplateA_preview.jpg" width="240px"></a>
+
<a href="https://2015.igem.org/Template:TeamTemplateA"><img class="imageHover" src="https://static.igem.org/mediawiki/2015/b/bd/TemplateA_preview.jpg" width="240px"></a>
−
<a href="https://2015.igem.org/Template:TeamTemplateB"><img src="https://static.igem.org/mediawiki/2015/9/9e/TemplateB_preview.jpg" width="240px"></a>
+
<a href="https://2015.igem.org/Template:TeamTemplateB"><img class="imageHover" src="https://static.igem.org/mediawiki/2015/9/9e/TemplateB_preview.jpg" width="240px"></a>
−
<a href="https://2015.igem.org/Template:TeamTemplateC"><img src="https://static.igem.org/mediawiki/2015/a/ad/TemplateC_preview.jpg" width="240px"></a>
+
<a href="https://2015.igem.org/Template:TeamTemplateC"><img class="imageHover" src="https://static.igem.org/mediawiki/2015/a/aa/TemplateC_preview_copy.jpg" width="240px"></a>
  
  
Line 117: Line 110:
 
<td width="110px">#DB1E39</td>
 
<td width="110px">#DB1E39</td>
 
<td width="110px">#14747D</td>
 
<td width="110px">#14747D</td>
−
<td width="110px">#F4EFD8</td>
+
<td width="110px">#22BCB9</td>
 
<td width="110px">#F4EFD8</td>
 
<td width="110px">#F4EFD8</td>
 
<td width="110px">#FFFFFF</td>
 
<td width="110px">#FFFFFF</td>
 
</tr>
 
</tr>
 
</table>
 
</table>
 +
<br>
  
 +
<p>Here are some websites that can help you create your own palette: </p>
 +
<ul>
 +
<li><a href="http://www.colourlovers.com/palettes"> Colour Lovers </a> </li>
 +
<li><a href="https://color.adobe.com">Adobe Kuler</a> </li>
 +
<li><a href="http://design-seeds.com/">Design Seeds </a></li>
 +
</ul>
  
 +
 +
<br><br><br>
 
<h3 id="htmlcss">HTML and CSS</h3>
 
<h3 id="htmlcss">HTML and CSS</h3>
−
<p> We strongly recommend using html rather than wiki code. HTML is highly flexible and is supported on almost every browser. <br>
+
<p> We strongly recommend using html rather than wiki code. HTML is highly flexible and is supported on almost every browser. </p>
−
Wiki code can be used for specific things, like calling a template or creating a table for your team parts, to make a "pause" in your HTML code, you can briefly close and open the < html > tag: </p>
+
 
 +
<h5> HTML</h5>
 +
<p>To start using html in your wiki page, you simply have to open a < html > tag:</p>
 +
 
 +
<pre>
 +
&#60;html&#62;
 +
************** HTML code can be placed here **************
 +
&#60;/html&#62;
 +
</pre>
 +
 
 +
<p>Wiki code can be used for specific things, like calling a template or creating a table for your team parts, to make a "pause" in your HTML code, you can briefly close and open the < html > tag: </p>
  
  
Line 135: Line 147:
 
</pre>
 
</pre>
  
 +
<h5> CSS </h5>
 +
<p> CSS will provide styling for your HTML elements, make sure you place CSS on the beginning of your code. To open a CSS tag, simply write:</p>
 +
 +
<pre>
 +
&#60;style type="text/css"&#62;
 +
************** CSS code can be placed here **************
 +
&#60;/style>
 +
</pre>
  
 
<br><br><br>
 
<br><br><br>
Line 146: Line 166:
  
 
<br><br><br>
 
<br><br><br>
−
<h3 id="templatecall"> Applying template </h3>
+
<h3 id="templatecall"> Applying templates </h3>
  
 
<p> To apply the template to your page, use the following code: </p>
 
<p> To apply the template to your page, use the following code: </p>
Line 212: Line 232:
 
<p><em>Make sure you close the < li > tag after the sublist. </em></p>
 
<p><em>Make sure you close the < li > tag after the sublist. </em></p>
  
−
<h5> Note: Are you using template C? </h5>
 
−
<p> The process is the same, however you will need to edit the width of the menu buttons, to do simply change the following:</p>
 
−
<pre>
 
  
−
</pre>
 
  
 
<br><br><br>
 
<br><br><br>
Line 314: Line 330:
 
</ul>
 
</ul>
  
−
<h5> Background color </h5>
+
<br><br>
−
<p>You can change the color of background by changing the </p>
+
 
 +
<p> Here is an example with Template B. <br>
 +
The color you wish to replace is the body background color. For template B, this color is #A7A9AB. <br>
 +
You can look for the color by it's hexadecimal code (the numbers are listed on the top of this page) and replace with any other color you like.
 +
</p>
 +
<br>
 +
<p> The line of code that you need to replace is the following:</p>
 
<pre>
 
<pre>
−
/* Set up a width, height and color of the body wrapper*/
+
/* Set up a width, height and color of the body wrapper*/
−
body {  
+
body {  
−
width: 100%;
+
...
−
height: 100%;
+
background-color: #A7A9AB;
−
background-color: #A7A9AB;
+
}
−
}
+
 
</pre>
 
</pre>
 +
<br><br>
 +
 +
<p> This table can help you locate what part of the template you wish to modify:</p>
 +
<table>
 +
<tr>
 +
<th> Class / Id </th> <th> Description </th> <th> Line of code </th>
 +
</tr>
 +
 +
 +
<tr>
 +
<td> body </td> <td> Background color of the page </td> <td>background-color: # </td>
 +
</tr>
 +
 +
<tr>
 +
<td>#mainContainer</td> <td>Color of main container</td> <td> background-color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#mainContainer</td> <td>Color of the borders in the main container </td> <td> border-  (right/left/top/bottom) : width px  solid  #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#contentContainer</td> <td>Color of content container</td> <td> background-color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#contentContainer</td> <td>Color of the border on top of the content container</td> <td> border-top : width px  solid  #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#menuContainer</td> <td>Background color of content container</td> <td> background-color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#menuContainer</td> <td>Color of the border on top of the content container</td> <td> border-top : width px  solid  #</td>
 +
</tr>
 +
 +
<tr>
 +
<td> #menuContainer a </td> <td> Text color of links inside the menu (before hover state)</td><td> color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td> #menuContainer li:hover</td> <td>Background color when you hover on the menu and submenu buttons</td> <td>background-color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#menuContainer li ul li</td><td>Background color of the submenu buttons</td><td>background-color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#menuContainer li ul li</td><td>Text color of the submenu buttons</td><td>color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#contentContainer h1,h2,h3,h4,h4,h6</td><td>Color of the titles </td><td>color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#contentContainer a</td><td>Color of links (before hover) </td><td>color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#contentContainer a:hover</td><td>Color of links on hover</td><td>color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>#mainContainer p</td><td>Color of the text</td><td>color: #</td>
 +
</tr>
 +
 +
<tr>
 +
<td>.highlightBox</td><td>Background color of the highlight box</td><td>background-color: #</td>
 +
</tr>
 +
 +
</table>
 +
 +
 +
 +
<br><br><br>
 +
<h3 id="fonts">Changing fonts</h3>
 +
<p>You can switch the font that your wiki to display. We strongly advise that you use web safe fonts, these fonts already are rendered by most browsers and don;t requiere any extra code.</p>
 +
<pre>
 +
/* Main content wrap  */
 +
#mainContainer { 
 +
...
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
 +
</pre>
 +
 +
<p>Here is a small list of web safe fonts:</p>
 +
<ul>
 +
<li>Tahoma, Geneva, sans-serif</li>
 +
<li>Century Gothic, sans-serif</li>
 +
<li>Verdana, Geneva, sans-serif</li>
 +
<li>‘Trebuchet MS’, Helvetica, sans-serif</li>
 +
<li>Arial, Helvetica, sans-serif</li>
 +
<li>Georgia, Serif</li>
 +
<li> ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif</li>
 +
</ul>
 +
 +
<br>
 +
<p> Here is where fonts are defined, it's best practice for all of them to be the same type font:</p>
 +
 +
<table width="90%">
 +
<tr>
 +
<th> Class / Id </th> <th> Description </th> <th> Line of code </th>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer </td> <td>Font family for text inside the main container </td> <td>font-family: </td>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer </td> <td>Font family for text inside the content container </td> <td>font-family: </td>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer h1, h2, h3, h4, h5, h6 </td> <td>Font family for the titles </td> <td>font-family: </td>
 +
</tr>
 +
</table>
 +
 +
<br><br><br>
 +
<h3 id="fonts">Styling tables</h3>
 +
<p> You can modify the style of the tables in your template. You can change the border, the background color of the cells and the table headers.</p>
 +
 +
<table width="90%">
 +
<tr>
 +
<th> Class / Id </th> <th> Description </th> <th> Line of code </th>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer table </td> <td>Border of the table </td> <td>border: width px  solid  # </td>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer td </td> <td>Border for the cells inside the table </td> <td>border: width px  solid  # </td>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer th </td> <td>Background color for the table header cells </td> <td>background-color: # </td>
 +
</tr>
 +
 +
<tr>
 +
<td> #contentContainer th </td> <td>Border for the cells for the table header cells </td> <td>border: width px  solid  #</td>
 +
</tr>
 +
 +
</table>
 +
 +
<br><br><br>
 +
<h3 id="classes">Creating classes</h3>
 +
<p> You can create your own classes and use them throughout your wiki. Classes are useful because you can declare them once in your template code and simply call them on your other pages</p>
 +
 +
<h5> Example "button" class </h5>
 +
<p>In the following box we will create a class called "button". This class has  a definite height, width </p>
 +
 +
<pre>
 +
        /*Normal state*/
 +
        .button {
 +
          width: 130px;
 +
    border: 2px solid #3aa76c;
 +
    background-color: fff;
 +
    height: 30px;
 +
    text-align: center;
 +
        border-radius: 5px;
 +
        padding: 10px 5px 0px 5px;
 +
        margin: auto;
 +
/*animate transition */
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
    }       
 +
</pre>
 +
 +
<p> Here we add a hover state to the "button" class. The color will change when your mouse is over the "button" div. </p>
 +
<pre>
 +
        /*Hover state*/
 +
        .button:hover {
 +
    background-color: #3aa76c;
 +
    color: white;
 +
    }
 +
</pre>
 +
 +
<h5>Calling the "button" class</h5>
 +
<p> To call the class you just created you simply create a < div > tag and specify that it's class is going to be "button"</p>
 +
<pre>
 +
&#60;div class="button"&#62;
 +
NAME
 +
&#60;/div&#62;
 +
</pre>
 +
 +
<BR><P> This is how the class will display: </p><BR>
 +
 +
<div class="button">
 +
NAME
 +
</div>
 +
 +
  
 +
<BR><BR><BR>
 
<!-- end of content ---------------------------------------->
 
<!-- end of content ---------------------------------------->
 
</div>
 
</div>
 
<div class="clear"></div>
 
<div class="clear"></div>
−
</html> {{2015Footer}}<html>
+
</html> {{2015Bottom}}<html>
 
</div>
 
</div>
 
</html>
 
</html>

Latest revision as of 21:17, 28 March 2016

Overview

This page documents the templates available for iGEM teams to use. The templates use HTML to present information and CSS to style the content.
There are 3 styles available:

Templates
Palettes
Template A
#000000 #565656 #24B694 #59BF92 #E8E8E9 #FFFFFF
Template B
#0E232F #EE3E53 #F4B248 #E8D5B7 #A7A9AB #EEEDEA
Template C
#28221E #DB1E39 #14747D #22BCB9 #F4EFD8 #FFFFFF

Here are some websites that can help you create your own palette:




HTML and CSS

We strongly recommend using html rather than wiki code. HTML is highly flexible and is supported on almost every browser.

HTML

To start using html in your wiki page, you simply have to open a < html > tag:

		<html>
			************** HTML code can be placed here **************
		</html>

Wiki code can be used for specific things, like calling a template or creating a table for your team parts, to make a "pause" in your HTML code, you can briefly close and open the < html > tag: 

		</html>
			************** Wiki code can be placed here **************
		<html>
CSS

CSS will provide styling for your HTML elements, make sure you place CSS on the beginning of your code. To open a CSS tag, simply write:

	<style type="text/css">
		************** CSS code can be placed here **************
	</style>



Creating a new wiki page

Creating a new wiki page is very easy. Simply type the name of the page in your url bar. Be sure to create every page inside your team's name space. The following line creates a page in the 2015 iGEM server, under the Team Example namespace with the page name "ProjectResults".

https://2015.igem.org/Team:Example/ProjectResults



Applying templates

To apply the template to your page, use the following code: 

		{{TeamTemplateA}}
		<html>	

				************** Your html content will be placed here **************

		</div></div>
		</html>
  1. Call the template you wish to apply to the page - in this case we are calling TeamTemplateA.
  2. Open an < html > tag- this tells the page that the code in between tags will be html.
  3. This is where you will write the content for your page.
  4. Close the < div > tags - In the template, #contentContainer and #mainContainer were created, this marks where they end.
  5. Close the < html > tag - this is the end of the page.



The menu for wiki exists inside your team's template. You can add more menu items and submenus items and link them to other pages.

Adding menu items

Go to the #menuContainer and add < li > item to your < ul > list. 

<a href=" link "><li>MENU ITEM 1</li></a>

Your menu list should look like this

		<div id="menuContainer">
			 <ul>
				<a href=" link "><li> MENU ITEM 1</li></a>

				<a href=" link "><li> MENU ITEM 2</li></a>

			 </ul>
		 </div>
Adding submenu items

To create submenu items you will need to create a list inside an existing list item.

		<div id="menuContainer">
			 <ul>
				<a href="#"><li> MENU ITEM 1</a>
            				<ul>
						<a href=" link "><li> SUBMENU ITEM 1</li></a>
						<a href=" link "><li> SUBMENU ITEM 2</li></a> 
             				</ul>
				</li>
			 </ul>
		 </div>

Make sure you close the < li > tag after the sublist.




Text

To create text simply call the < p > tag: 

 <p> Lorem ipsum dolor sit amet, vis in paulo munere, mel commune ocurreret ex. </p>



Links can be created with the < a > tag: 

 <a href="  link url "> name of the link </a>



List

To create a simple list you will need to open a < ul > tag and then create < li > list item for every bulleted item you wish to create. You can also use < ol > (ordered list) instead of < ul > (unordered list) to replace the bullet points with numbers

			 <ol>

				<li> List item 1 </li>
				<li> List item 2 </li>
				<li> List item 3 </li>

			 </ol>

Lists can also be nested within themselves, here is an example:

			 <ul>

				<li> List item 1 
					<ol>
						<li> sublist item 1 </li>
						<li> sublist item 2 </li>
						<li> sublist item 3 </li>
					</ol>
				</li>

			 </ul>



Tables

Tables are styled and ready to use with any of the 3 templates. To create on, use the following code:

		<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>

This code will create a table with 3 rows and two columns, you can add as many as you like.




Highlight Boxes

You can create a highlight box by calling the class "highlightBox", this will create a box with a different background and a smaller width.

			
		<div class="highlightBox">
			<h4> Title of Highlight Box  </h4 >
			<p> Lorem ipsum dolor sit amet, vis in paulo munere, mel commune ocurreret ex. </p>
		</div>



Changing colors

You can edit any of the colors of the templates. You can use your school's colors or any other palette you like.

Here are some websites that can serve as inspiration:



Here is an example with Template B.
The color you wish to replace is the body background color. For template B, this color is #A7A9AB.
You can look for the color by it's hexadecimal code (the numbers are listed on the top of this page) and replace with any other color you like.


The line of code that you need to replace is the following:

		/* Set up a width, height and color of the body wrapper*/
		body { 
			...
			background-color: #A7A9AB;
		}


This table can help you locate what part of the template you wish to modify:

Class / Id Description Line of code
body Background color of the page background-color: #
#mainContainer Color of main container background-color: #
#mainContainer Color of the borders in the main container border- (right/left/top/bottom) : width px solid #
#contentContainer Color of content container background-color: #
#contentContainer Color of the border on top of the content container border-top : width px solid #
#menuContainer Background color of content container background-color: #
#menuContainer Color of the border on top of the content container border-top : width px solid #
#menuContainer a Text color of links inside the menu (before hover state) color: #
#menuContainer li:hover Background color when you hover on the menu and submenu buttons background-color: #
#menuContainer li ul liBackground color of the submenu buttonsbackground-color: #
#menuContainer li ul liText color of the submenu buttonscolor: #
#contentContainer h1,h2,h3,h4,h4,h6Color of the titles color: #
#contentContainer aColor of links (before hover) color: #
#contentContainer a:hoverColor of links on hovercolor: #
#mainContainer pColor of the textcolor: #
.highlightBoxBackground color of the highlight boxbackground-color: #



Changing fonts

You can switch the font that your wiki to display. We strongly advise that you use web safe fonts, these fonts already are rendered by most browsers and don;t requiere any extra code.

		/* Main content wrap  */
		#mainContainer {  
			...
			font-family: "Trebuchet MS", Helvetica, sans-serif;
		}

Here is a small list of web safe fonts:

  • Tahoma, Geneva, sans-serif
  • Century Gothic, sans-serif
  • Verdana, Geneva, sans-serif
  • ‘Trebuchet MS’, Helvetica, sans-serif
  • Arial, Helvetica, sans-serif
  • Georgia, Serif
  • ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif

Here is where fonts are defined, it's best practice for all of them to be the same type font:

Class / Id Description Line of code
#contentContainer Font family for text inside the main container font-family:
#contentContainer Font family for text inside the content container font-family:
#contentContainer h1, h2, h3, h4, h5, h6 Font family for the titles font-family:



Styling tables

You can modify the style of the tables in your template. You can change the border, the background color of the cells and the table headers.

Class / Id Description Line of code
#contentContainer table Border of the table border: width px solid #
#contentContainer td Border for the cells inside the table border: width px solid #
#contentContainer th Background color for the table header cells background-color: #
#contentContainer th Border for the cells for the table header cells border: width px solid #



Creating classes

You can create your own classes and use them throughout your wiki. Classes are useful because you can declare them once in your template code and simply call them on your other pages

Example "button" class

In the following box we will create a class called "button". This class has a definite height, width 

    	    	 /*Normal state*/
    	    	.button {
   	    	    	width: 130px;
    			border: 2px solid #3aa76c;
    			background-color: fff;
    			height: 30px;
    			text-align: center;
        		border-radius: 5px;
        		padding: 10px 5px 0px 5px;
        		margin: auto;
			/*animate transition */
			-webkit-transition: background 0.2s linear;
			-moz-transition: background 0.2s linear;
			-ms-transition: background 0.2s linear;
			-o-transition: background 0.2s linear;
			transition: background 0.2s linear;
    		}

Here we add a hover state to the "button" class. The color will change when your mouse is over the "button" div. 

    	    	 /*Hover state*/
    	    	.button:hover {
    			background-color: #3aa76c;
    			color: white;
    		}
Calling the "button" class

To call the class you just created you simply create a < div > tag and specify that it's class is going to be "button"

			<div class="button"> 	
				NAME
			</div>

This is how the class will display:


NAME