Difference between revisions of "Resources/Template Documentation"
m (Protected "Resources/Template Documentation" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))) |
|||
| (19 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> | ||
| − | |||
| − | |||
<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. 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> | ||
| Line 18: | Line 16: | ||
| − | < | + | <h4> On this page </h4> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | < | + | <ul> |
| − | < | + | <li> <a href="https://2017.igem.org/Resources/Template_Documentation#HTML"> HTML </a> |
| − | + | ||
| − | < | + | <ul> |
| − | + | ||
| − | + | ||
| − | + | ||
| + | <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#layout_classes">Layout Classes </a> </li> | ||
| Line 87: | Line 61: | ||
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#CSS"> CSS </a> | <li> <a href="https://2017.igem.org/Resources/Template_Documentation#CSS"> CSS </a> | ||
<ul> | <ul> | ||
| − | + | ||
| − | + | ||
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#new_class"> Creating a new class </a></li> | <li> <a href="https://2017.igem.org/Resources/Template_Documentation#new_class"> Creating a new class </a></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> <a href="https://2017.igem.org/Resources/Template_Documentation#new_class_under"> Creating a new class under an existing one </a></li> | ||
<li> <a href="https://2017.igem.org/Resources/Template_Documentation#changing_color">Changing the color of an element </a> </li> | <li> <a href="https://2017.igem.org/Resources/Template_Documentation#changing_color">Changing the color of an element </a> </li> | ||
| − | + | ||
| − | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
| Line 115: | Line 87: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
<h2 id="HTML"> 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> | + | <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> | ||
| + | |||
| + | |||
| + | |||
| Line 790: | Line 790: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
<h2> JQUERY</h2> | <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. </p> | + | <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> | </div> | ||
Latest revision as of 19:19, 16 October 2017
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>
Links
When creating links use the < a > tag, links will display : Example
<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:
- 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 |
|---|---|
| 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.
<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>
