Difference between revisions of "TemplatesforTeams Code Documentation"
Line 12: | Line 12: | ||
<h5>Templates</h5> | <h5>Templates</h5> | ||
<ul> | <ul> | ||
− | <a href= ""> <li>Overview</li></a> | + | <a href= "https://2015.igem.org/TemplatesforTeams_Code_Documentation#overview"> <li>Overview</li></a> |
− | <a href= ""> <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 template</li></a> | ||
Line 40: | Line 40: | ||
− | <h3> Overview </h3> | + | <h3 id="overview"> Overview </h3> |
<p> This page documents the templates available for iGEM teams to use. The templates use HTML to present information and CSS to style the content. <br> | <p> This page documents the templates available for iGEM teams to use. The templates use HTML to present information and CSS to style the content. <br> | ||
There are 3 styles available: </p> | There are 3 styles available: </p> | ||
Line 120: | Line 120: | ||
− | <h3>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. Wiki code can be used for specific things, like calling a template or creating a table for your team parts. </p> | <p> We strongly recommend using html rather than wiki code. HTML is highly flexible and is supported on almost every browser. Wiki code can be used for specific things, like calling a template or creating a table for your team parts. </p> | ||
Revision as of 18:46, 17 February 2015
Template Documentation
Templates
Adding html content
Please note that all information on this page is in a draft version.
Please check back often for details.
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 | #F4EFD8 | #F4EFD8 | #FFFFFF |
HTML and CSS
We strongly recommend using html rather than wiki code. HTML is highly flexible and is supported on almost every browser. Wiki code can be used for specific things, like calling a template or creating a table for your team parts.
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 template
To apply the template to your page, use the following code:
{{TeamTemplateA}} <html> **************Your html content will be placed here ******************* </div></div> </html>
- Call the template you wish to apply to the page - in this case we are calling TeamTemplateA.
- Open an < html > tag- this tells the page that the code in between tags will be html.
- This is where you will write the content for your page.
- Close the < div > tags - In the template, #contentContainer and #mainContainer were created, this marks where they end.
- Close the < html > tag - this is the end of the page.
Editing the menu
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.
Note: Are you using template C?
The process is the same, however you will need to edit the width of the menu buttons, to do simply change the following:
Text
To create text simply call the < p > tag:
<p> Lorem ipsum dolor sit amet, vis in paulo munere, mel commune ocurreret ex. </p>
Link
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>