Difference between revisions of "Resources/Template Documentation"
| (8 intermediate revisions by 2 users not shown) | |||
| Line 7: | Line 7: | ||
| − | |||
| − | |||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
/* CONTENT OF THE PAGE */ | /* CONTENT OF THE PAGE */ | ||
| Line 32: | Line 30: | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
| + | /*size for title h tags*/ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;} | .igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;} | ||
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;} | .igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;} | ||
| Line 40: | Line 39: | ||
| − | /* | + | /*titles h1, h2*/ |
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 { | .igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 { | ||
border-bottom:0px; | border-bottom:0px; | ||
| Line 48: | Line 47: | ||
} | } | ||
| − | /* | + | /*titles h3, h3, h5, h6 */ |
.igem_2019_team_content .igem_2019_team_column_wrapper h3, | .igem_2019_team_content .igem_2019_team_column_wrapper h3, | ||
.igem_2019_team_content .igem_2019_team_column_wrapper h4, | .igem_2019_team_content .igem_2019_team_column_wrapper h4, | ||
| Line 54: | Line 53: | ||
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { | .igem_2019_team_content .igem_2019_team_column_wrapper h6 { | ||
border-bottom:0px; | border-bottom:0px; | ||
| − | color: # | + | color: #635d5d; |
font-family: "Arial Black", Gadget, sans-serif; | font-family: "Arial Black", Gadget, sans-serif; | ||
padding: 5px 0px; | padding: 5px 0px; | ||
} | } | ||
| − | /* text */ | + | /* text p tag*/ |
.igem_2019_team_content .igem_2019_team_column_wrapper p { | .igem_2019_team_content .igem_2019_team_column_wrapper p { | ||
font-size: 130%; | font-size: 130%; | ||
| Line 68: | Line 67: | ||
} | } | ||
| − | /* Links */ | + | /* Links a tag*/ |
.igem_2019_team_content .igem_2019_team_column_wrapper a { | .igem_2019_team_content .igem_2019_team_column_wrapper a { | ||
| − | color: # | + | color: #00a19b; |
font-weight: bold; | font-weight: bold; | ||
text-decoration: underline; | text-decoration: underline; | ||
| − | text-decoration-color:# | + | text-decoration-color:#00a19b; |
transition: all 0.4s ease; | transition: all 0.4s ease; | ||
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
| Line 83: | Line 82: | ||
/* hover for the links */ | /* hover for the links */ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover { | .igem_2019_team_content .igem_2019_team_column_wrapper a:hover { | ||
| − | color: # | + | color: #085156; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
| − | /* Table */ | + | /* Table tag*/ |
.igem_2019_team_content .igem_2019_team_column_wrapper table { | .igem_2019_team_content .igem_2019_team_column_wrapper table { | ||
| − | border: 1px solid # | + | border: 1px solid #635d5d; |
border-collapse: collapse; | border-collapse: collapse; | ||
font-size: 130%; | font-size: 130%; | ||
| Line 98: | Line 97: | ||
/* table cells */ | /* table cells */ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper td { | .igem_2019_team_content .igem_2019_team_column_wrapper td { | ||
| − | border: 1px solid # | + | border: 1px solid #cecece; |
border-collapse: collapse; | border-collapse: collapse; | ||
font-size: 105%; | font-size: 105%; | ||
| Line 107: | Line 106: | ||
/* table headers */ | /* table headers */ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper th { | .igem_2019_team_content .igem_2019_team_column_wrapper th { | ||
| − | background-color:# | + | background-color:#cecece; |
| − | border: 1px solid # | + | border: 1px solid #635d5d; |
border-collapse: collapse; | border-collapse: collapse; | ||
font-size: 110%; | font-size: 110%; | ||
| Line 124: | Line 123: | ||
} | } | ||
| + | |||
| + | /*font sizing within list nesting*/ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li, | .igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li, | ||
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li, | .igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li, | ||
| Line 130: | Line 131: | ||
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li, | .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li, | ||
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; } | .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; } | ||
| − | |||
| Line 156: | Line 156: | ||
| − | /* | + | /*all images*/ |
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img, | .igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img, | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img, | .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img, | ||
| Line 176: | Line 176: | ||
/* horizontal line to divide the page*/ | /* horizontal line to divide the page*/ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider { | .igem_2019_team_content .igem_2019_team_column_wrapper .line_divider { | ||
| − | border-top: 1px solid # | + | border-top: 1px solid #cecece; |
margin: auto; | margin: auto; | ||
width: 98%; | width: 98%; | ||
| Line 197: | Line 197: | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a { | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a { | ||
| − | background-color: # | + | background-color: #00a19bad !important; |
| − | color: # | + | color: #000 !important; |
font-weight: bold; | font-weight: bold; | ||
margin: auto; | margin: auto; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
| − | padding: 10px 15px; | + | padding: 10px 15px !important; |
} | } | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover { | .igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover { | ||
| − | background-color: # | + | background-color: #ffb819 !important; |
} | } | ||
| + | |||
| − | + | /*highlight */ | |
| + | /************************************************/ | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight { | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight { | ||
padding: 15px 20px; | padding: 15px 20px; | ||
} | } | ||
| + | |||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p, | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight p, | ||
| Line 226: | Line 229: | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background { | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background { | ||
| − | background-color: # | + | background-color: #ececec; |
} | } | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top { | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top { | ||
| − | border-top: 4px solid # | + | border-top: 4px solid #00a19bad; |
} | } | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full { | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full { | ||
| − | border: 4px solid # | + | border: 4px solid #00a19bad; |
} | } | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top { | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top { | ||
| − | border-top: 4px solid # | + | border-top: 4px solid #ffb819 |
} | } | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full { | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full { | ||
| − | border: 4px solid # | + | border: 4px solid #ffb819; |
} | } | ||
| − | + | ||
| − | </style> | + | </style> |
| Line 267: | Line 270: | ||
<h1> Template Documentation for Teams </h1> | <h1> Template Documentation for Teams </h1> | ||
| − | <p> This page will help you edit and build your | + | |
| + | <p><span class="on_page"></span><b>On this page</b> you will find: <br> | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#HTML"> HTML </a>: | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#colors"> Colors </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#text"> Text </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#titles">Titles </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#links">Links </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#images"> Images </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#unordered_list">Unordered list </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#ordered_list"> Ordered list </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#nested_list"> Nested list </a>, and | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#table">Tables </a>. | ||
| + | <br> | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#layout_classes">Layout Classes </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#support_classes">Support Classes </a>: | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#highlight">Highlight </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#styling_highlight"> Styling highlight class </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#button">Button </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#clear">Clear </a>. | ||
| + | <br> | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#menu">Menu</a>: | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#adding_submenu"> Adding a menu item </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#adding_submenu_menu">Adding a submenu </a>. | ||
| + | <br> | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#CSS"> CSS </a>: | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#new_class"> Creating a new class </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#new_class_under"> Creating a new class under an existing one </a>, | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#changing_color">Changing the color of an element </a>. | ||
| + | <br> | ||
| + | <a href="https://2019.igem.org/Resources/Template_Documentation#JQUERY">JQUERY </a> | ||
| + | </p> | ||
| + | |||
| + | <p> This page will help you edit and build your 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. <br> You can also visit the <a href="https://2019.igem.org/Resources/Wiki_Editing_Help"> Wiki Editing Help</a> page ato find quick links and other resources to help you get started working on your wiki.</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: | ||
| Line 273: | Line 308: | ||
<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 | + | 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, the general css styling and the javascript code 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, ypu can take a look at previous teams to get some inspiration. </p> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
| − | |||
| Line 343: | Line 317: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="HTML"></div> |
<div class="column full_size"> | <div class="column full_size"> | ||
| − | <h2 | + | <h2> 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 | + | <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 over the general tags used to create a standard wiki page.</p> |
</div> | </div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="colors"></div> |
<div class="column full_size"> | <div class="column full_size"> | ||
| − | <h3 | + | <h3> Colors </h3> |
<p> The colors used on your template are: </p> | <p> The colors used on your template are: </p> | ||
| Line 360: | Line 334: | ||
<tr height="50px"> | <tr height="50px"> | ||
| + | <td bgcolor="#635d5d"></td> | ||
<td bgcolor="#484848"></td> | <td bgcolor="#484848"></td> | ||
| − | <td bgcolor="# | + | <td bgcolor="#00a19b"></td> |
| − | + | ||
| − | + | ||
| + | <td bgcolor="#085156"></td> | ||
| + | <td bgcolor="#cecece"></td> | ||
| + | <td bgcolor="#ececec"></td> | ||
| + | <td bgcolor="#ffb819"></td> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 376: | Line 348: | ||
<tr align="center"> | <tr align="center"> | ||
| − | |||
<td>#635d5d</td> | <td>#635d5d</td> | ||
| − | <td># | + | <td>#484848</td> |
| − | <td># | + | <td>#00a19b</td> |
| − | <td># | + | <td>#085156</td> |
| − | <td># | + | <td>#cecece</td> |
| − | <td># | + | <td>#ececec</td> |
| − | <td># | + | <td>#ffb819</td> |
| − | + | ||
</tr> | </tr> | ||
| Line 394: | Line 365: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="text"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<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 413: | Line 384: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="titles"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<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 449: | Line 420: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="links"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<h3> Links </h3> | <h3> Links </h3> | ||
<p> When creating links use the < a > tag, links will display : <a href =" "> Example Link </a> </p> | <p> When creating links use the < a > tag, links will display : <a href =" "> Example Link </a> </p> | ||
| Line 469: | Line 440: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="images"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size" > |
<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> | ||
</div> | </div> | ||
| Line 490: | Line 463: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="unordered_list"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size" > |
<h3> Unordered Lists </h3> | <h3> Unordered Lists </h3> | ||
<p>Use the following example to create a simple list. <br> <b> Painting materials: </b></p> | <p>Use the following example to create a simple list. <br> <b> Painting materials: </b></p> | ||
| Line 526: | Line 499: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="ordered_list"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size" > |
<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 562: | Line 535: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="nested_list"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<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 608: | Line 581: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="table"></div> |
| Line 614: | Line 587: | ||
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<h3> Tables</h3> | <h3> Tables</h3> | ||
| Line 665: | Line 638: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="layout_classes"></div> |
| − | <div class="column full_size | + | <div class="column full_size" > |
<h2>Layout classes</h2> | <h2>Layout classes</h2> | ||
</div> | </div> | ||
| − | + | <div class="clear" id="columns"></div> | |
| − | <div class=" | + | <div class="column full_size" > |
<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 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>. | + | <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 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>. Below are a few layout options, we recommend adding a div with the clear class (<a href="https://2019.igem.org/Resources/Template_Documentation#clear">see below</a>) in between rows to ensure rows are separated. </p> |
</div> | </div> | ||
| Line 754: | Line 727: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="support_classes"></div> |
| − | <div class="column full_size | + | <div class="column full_size"> |
<h2> Support Classes </h2> | <h2> Support Classes </h2> | ||
| + | </div> | ||
| + | <div class="clear" id="highlight"></div> | ||
| − | + | <div class="column two_thirds_size" > | |
| − | <div class="column two_thirds_size | + | |
<h3> Highlight </h3> | <h3> Highlight </h3> | ||
| − | <p> Highlight will need to be declared inside another layout box, this highlight class will | + | <p> Highlight will need to be declared inside another layout box, this highlight class will add extra padding to the div and can be styled for different effects. </p> |
</div> | </div> | ||
| Line 782: | Line 756: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="styling_highlight"></div> |
| − | <div class="column full_size | + | <div class="column full_size" > |
<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 853: | Line 827: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="button"></div> |
| Line 860: | Line 834: | ||
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<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> | ||
| Line 882: | Line 856: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="clear"></div> |
| − | <div class="column two_thirds_size | + | <div class="column two_thirds_size"> |
<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 908: | Line 882: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="menu"></div> |
| − | <div class="column full_size | + | <div class="column full_size"> |
<h2> Adding items to your Menu </h2> | <h2> Adding items to your Menu </h2> | ||
</div> | </div> | ||
| + | <div class="clear" id="adding_submenu"></div> | ||
| − | + | <div class="column third_size" > | |
| − | <div class="column third_size | + | |
<h3> Adding a direct menu item</h3> | <h3> Adding a direct menu item</h3> | ||
<p> 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_2019_team_menu". In this example we will link to "Test Direct". </p> | <p> 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_2019_team_menu". In this example we will link to "Test Direct". </p> | ||
| Line 936: | Line 910: | ||
</div> | </div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="adding_submenu_menu"></div> |
| Line 942: | Line 916: | ||
| − | <div class="column third_size | + | <div class="column third_size"> |
<h3> Adding a submenus </h3> | <h3> Adding a submenus </h3> | ||
<p> 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_2019_team_menu"</p> | <p> 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_2019_team_menu"</p> | ||
| Line 961: | Line 935: | ||
Test subpage<br> | Test subpage<br> | ||
</div><br> | </div><br> | ||
| − | </a | + | </a><br> |
</div> | </div> | ||
| Line 1,032: | Line 1,006: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
| − | <div class="line_divider"></div> | + | <div class="line_divider" id="new_class"></div> |
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
| Line 1,038: | Line 1,012: | ||
| − | <div class="column third_size | + | <div class="column third_size"> |
<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 1,051: | Line 1,025: | ||
<p> /* highlight with a full orange border decoration */ <br> | <p> /* highlight with a full orange border decoration */ <br> | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .orange_text { <br> | .igem_2019_team_content .igem_2019_team_column_wrapper .orange_text { <br> | ||
| − | color: # | + | color: #ffb819; <br> |
} | } | ||
</p> | </p> | ||
| Line 1,058: | Line 1,032: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
| − | <div class="highlight" style="color:# | + | <div class="highlight" style="color:#ffb819;"> |
<p> | <p> | ||
| − | <p class="orange_text"> Orange text </p> | + | <p class="orange_text"> <span style="color:#ffb819;">Orange text</span> </p> |
</p> | </p> | ||
| Line 1,071: | Line 1,045: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="new_class_under"></div> |
| − | <div class="column third_size | + | <div class="column third_size"> |
<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 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_2019_team_content .igem_2019_team_column_wrapper" and then specify the highlight class and the name of your new class: ".highlight.orange_background" | <p> 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_2019_team_content .igem_2019_team_column_wrapper" and then specify the highlight class and the name of your new class: ".highlight.orange_background" | ||
| Line 1,085: | Line 1,059: | ||
<p> /* highlight with a full orange border decoration */ <br> | <p> /* highlight with a full orange border decoration */ <br> | ||
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.orange_background { <br> | .igem_2019_team_content .igem_2019_team_column_wrapper .highlight.orange_background { <br> | ||
| − | background-color: # | + | background-color: #ffb819; <br> |
} | } | ||
</p> | </p> | ||
| Line 1,092: | Line 1,066: | ||
<div class="column third_size"> | <div class="column third_size"> | ||
| − | <div class="highlight"> | + | <div class="highlight" style="background-color:#ffb819;"> |
<p> | <p> | ||
| − | <p class="orange_text"> | + | <p class="orange_text"> Example of an orange background </p> |
</p> | </p> | ||
| Line 1,105: | Line 1,079: | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space" id="changing_color"></div> |
| Line 1,111: | Line 1,085: | ||
| − | <div class="column third_size | + | <div class="column third_size"> |
<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 change the color of h1 and h2 to orange. | <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 change the color of h1 and h2 to orange. | ||
| Line 1,124: | Line 1,098: | ||
padding:5px 15px; <br> | padding:5px 15px; <br> | ||
border-bottom: 0px; <br> | border-bottom: 0px; <br> | ||
| − | color: # | + | color: #ffb819;<br> |
} | } | ||
</p> | </p> | ||
| Line 1,142: | Line 1,116: | ||
| − | <h1 style="color:# | + | <h1 style="color:#ffb819;"> This is now orange </h1> |
| − | <h2 style="color:# | + | <h2 style="color:#ffb819;"> This is now orange </h2> |
</div> | </div> | ||
| Line 1,158: | Line 1,132: | ||
<div class="column full_size"> | <div class="column full_size"> | ||
<h2> JQUERY</h2> | <h2> JQUERY</h2> | ||
| − | <p> Jquery | + | <p> Javascript and Jquery make 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. |
| + | You can learn more about by visiting: <a href="https://learn.jquery.com/">https://learn.jquery.com/ </a></p> | ||
</div> | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </html> | ||
Latest revision as of 15:32, 27 February 2019
Template Documentation for Teams
On this page you will find:
HTML :
Colors ,
Text ,
Titles ,
Links ,
Images ,
Unordered list ,
Ordered list ,
Nested list , and
Tables .
Layout Classes ,
Support Classes :
Highlight ,
Styling highlight class ,
Button ,
Clear .
Menu:
Adding a menu item ,
Adding a submenu .
CSS :
Creating a new class ,
Creating a new class under an existing one ,
Changing the color of an element .
JQUERY
This page will help you edit and build your 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.
You can also visit the Wiki Editing Help page ato find quick links and other resources to help you get started working on your wiki.
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, the general css styling and the javascript code 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, ypu can take a look at previous teams to get some inspiration.
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 over the general tags used to create a standard wiki page.
Colors
The colors used on your template are:
| #635d5d | #484848 | #00a19b | #085156 | #cecece | #ececec | #ffb819 |
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 Link
<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 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. Below are a few layout options, we recommend adding a div with the clear class (see below) in between rows to ensure rows are separated.
<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 add extra padding to the div and can be styled for different effects.
<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>
Adding items to your Menu
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_2019_team_menu". In this example we will link to "Test Direct".
<a href="https://2019.igem.org/Team:Example2/Test_Direct">
< div class="menu_item direct_link">
Test Direct
</div>
</a>
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_2019_team_menu"
<div class="menu_item">
<div class="submenu_control_icon"> </div>
TEST SUBMENU
</div>
<div class="submenu">
<a href="https://2019.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_2019_team_content .igem_2019_team_column_wrapper .orange_text {
color: #ffb819;
}
<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_2019_team_content .igem_2019_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_2019_team_content .igem_2019_team_column_wrapper .highlight.orange_background {
background-color: #ffb819;
}
<p class="orange_text"> Example of an 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_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
padding:5px 15px;
border-bottom: 0px;
color: #ffb819;
}
<h1> This is now orange </h1>
<h2> This is now orange </h2>
This is now orange
This is now orange
JQUERY
Javascript and Jquery make 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. You can learn more about by visiting: https://learn.jquery.com/