Difference between revisions of "HQ:Code Documentation"

m (1 revision imported: From 2017 Site)
Line 1: Line 1:
−
{{Main2017}}
+
{{Main2019}}
 
<html>
 
<html>
  
Line 22: Line 22:
  
 
<h3 id="colors"> Colors </h3>
 
<h3 id="colors"> Colors </h3>
−
<p> The colors used on 2017.igem.org are: </p>
+
<p> The colors used on 2019.igem.org are: </p>
  
 
<table>  
 
<table>  
  
 
<tr height="50px">
 
<tr height="50px">
−
<td bgcolor="#00bdcd" width="16%"></td>
+
<td bgcolor="#542160" ></td>
−
<td bgcolor="#dddddd" width="16%"></td>
+
<td bgcolor="#90528f" ></td>
−
<td bgcolor="#f2f2f2" width="16%"></td>
+
<td bgcolor="#b48cb7" ></td>
−
<td bgcolor="#000000" width="16%"></td>
+
<td bgcolor="#c7aaca" ></td>
−
<td bgcolor="#ffffff" width="16%"></td>
+
<td bgcolor="#d9c5dd" ></td>
−
<td bgcolor="#004789" width="16%"></td>
+
<td bgcolor="#fff" ></td>
 +
<td bgcolor="#f2f2f2"></td>
 +
<td bgcolor="#d3d3d3"></td>
 +
<td bgcolor="#989898"></td>
 +
<td bgcolor="#000"></td>
 
</tr>
 
</tr>
  
 
<tr align="center">
 
<tr align="center">
−
<td >#00bdcd</td>
+
<td > #542160 </td>
−
<td >#dddddd</td>
+
<td> #90528f</td>
 +
<td > #b48cb7 </td>
 +
<td> #c7aaca </td>
 +
<td >#d9c5dd </td>
 +
<td > #ffffff</td>
 
<td >#f2f2f2</td>
 
<td >#f2f2f2</td>
 +
<td >#d3d3d3 </td>
 +
<td > #989898</td>
 
<td >#000000</td>
 
<td >#000000</td>
−
<td >#ffffff</td>
 
−
<td> #004789</td>
 
 
</tr>
 
</tr>
 
</table>
 
</table>
  
  
−
<div class="clear">
 
  
 +
 +
<div class="clear extra_space"></div>
 +
<div class="clear extra_space"></div>
  
 
<h3> Icons </H3>
 
<h3> Icons </H3>
Line 75: Line 85:
 
<div class="column full_size">
 
<div class="column full_size">
 
<h2> Creating a new page </h2>
 
<h2> Creating a new page </h2>
−
<p> Pages created in the 2017.igem.org website must follow a naming convention in order fit the website structure and to be reflected properly in the menu system. The naming convention should make them fall under these categories:</p>
+
<p> Pages created in the 2019.igem.org website must follow a naming convention in order fit the website structure and to be reflected properly in the menu system. The naming convention should make them fall under these categories:</p>
 
<ul>
 
<ul>
 
<li>About </li>
 
<li>About </li>
 
<li>Calendar </li>
 
<li>Calendar </li>
−
 
+
<li>Teams </li>
 
<li>Community
 
<li>Community
 
<ul> <li> Mentorship </li> </ul>
 
<ul> <li> Mentorship </li> </ul>
Line 94: Line 104:
 
<li>Judging </li>
 
<li>Judging </li>
 
<li>Safety</li>
 
<li>Safety</li>
 +
<li>Human Practices </li>
 +
<li>Measurement </li>
 
<li>Sponsors
 
<li>Sponsors
 
<ul> <li> Special Offers </li> </ul>
 
<ul> <li> Special Offers </li> </ul>
Line 99: Line 111:
  
 
<li> Resources </li>
 
<li> Resources </li>
 +
 +
<li> Sitemap</li>
 
</ul>
 
</ul>
  
Line 104: Line 118:
  
 
<p> Here is an example for creating a new <b>application</b> page under the <b>Community</b> namespace and within the <b>Mentorship</b> submenu: <br>
 
<p> Here is an example for creating a new <b>application</b> page under the <b>Community</b> namespace and within the <b>Mentorship</b> submenu: <br>
−
<b> 2017.igem.org/Community/Mentorship/Apply </b>  
+
<b> 2019.igem.org/Community/Mentorship/Apply </b>  
 
  </p>
 
  </p>
  
Line 121: Line 135:
 
<div class="column full_size" id="menu">
 
<div class="column full_size" id="menu">
 
<h2> Updating the Menu </h2>
 
<h2> Updating the Menu </h2>
−
<p> Remember to update the menu appropriately when you make a new page and be careful when adding, closing and opening submenus. </p>
+
<p>  
 +
The 2019 Menu is loaded by the wiki template and the original code can be found here: <a href="https://2019.igem.org/HQ:Menu">https://2019.igem.org/HQ:Menu</a>
 +
The code has been updated so you do not need to include ids for the menu to highlight the current page you are in. Remember to update the menu appropriately when you make a new page and be careful when adding, closing and opening submenus. </p>
  
 
<div class="clear"></div>
 
<div class="clear"></div>
Line 129: Line 145:
 
<div class="column half_size" id="adding_menu">
 
<div class="column half_size" id="adding_menu">
 
<h3> Adding a menu item </h3>
 
<h3> Adding a menu item </h3>
−
<p> The first tier of the menu is reserved for highly important pages, usually hubs that showcase the subpages within that namespace. To create a menu item on the first tier, you can use the following code. This example creates a menu button for "Parts". In order for the menu sorting system to work, some ids need to be specified, you can replace everywhere it says parts with the page you need to create. </p>
+
<p> The first tier of the menu is reserved for highly important pages, usually hubs that showcase the subpages within that namespace. To create a menu item on the first tier, you can use the following code. This example creates a menu button for "Colors". </p>
 
</div>
 
</div>
  
Line 136: Line 152:
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
−
    &#60;div class="menu_item_wrapper"  id="Parts">   <br>
+
&#60;div class="igem_menu_item"><br><br>
−
  &#60;a href="https://2017.igem.org/Parts"><br>
+
&#60;a href="https://2019.igem.org/Colors"><br>
−
  &#60;div class="menu_icon"> <br>
+
&#60;div class="hub_icon"> <br>
−
  &#60;img src="url"><br>
+
&#60;img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg"><br>
−
  &#60;/div><br>
+
&#60;/div> <br><br>
−
  &#60;div class="menu_item hub_link"><br>
+
 
−
PARTS<br>
+
&#60;div class="hub_title"> <br>
−
  &#60;/div><br>
+
COLORS<br>
−
  &#60;/a>
+
&#60;/div> <br>
 +
&#60;/a><br><br>
 +
&#60;/div>
 
</p>
 
</p>
 
</div>
 
</div>
Line 152: Line 170:
  
 
<div class="column half_size" id="adding_submenu">
 
<div class="column half_size" id="adding_submenu">
−
<h3> Adding a submenu item </h3>
+
<h3> Adding a submenu and submenu items</h3>
−
<p> To add another submenu page to the menu, just copy the following code and place it inside the desired submenu wrapper. The specific code to add a submenu item is highlighted in black and is using "test" as an example. The "menu_title" class will create an empty button where you can place the title of that particular section of pages.
+
<p> To add another submenu page to the menu, just copy the following code and place it inside the desired submenu wrapper. In this example we are creating three subpages ("Yellow" and"Red") under the "Colors Hub" The "submenu_item subsection_title" class will create an empty button where you can place the title of that particular section of pages.
−
In order to activate the highlight current page function in the menu, you will have to define the id, specify it like name of the page and "_page".
+
 
  
 
   </p>
 
   </p>
Line 163: Line 181:
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
−
&#60;div class="submenu_access">  &#60;/div><br>
 
  
−
&#60;div class="submenu"><br>
 
  
−
&#60;div class="menu_title"> Parts Types: &#60;/div><br>
+
&#60;div class="igem_menu_item"><br><br>
 +
&#60;a href="https://2019.igem.org/Colors"><br>
 +
&#60;div class="hub_icon"> <br>
 +
&#60;img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg"><br>
 +
&#60;/div> <br><br>
  
 +
&#60;div class="hub_title"> <br>
 +
COLORS<br>
 +
&#60;/div> <br>
 +
&#60;/a><br><br>
  
−
<b> &#60;a href="url"><br>
 
−
&#60;div class="submenu_item" id="Parts-Test_One"><br>
 
−
Test One<br>
 
−
&#60;/div><br>
 
−
&#60;/a> </b><br>
 
  
 +
<b> &#60;div class="submenu_access">&#60;/div><br>
 +
 +
&#60;div class="igem_submenu"><br><br>
 +
 +
&#60;div class="submenu_item subsection_title"> Warm Colors &#60;/div><br><br>
  
−
&#60;a href="url"><br>
+
&#60;a href="https://2019.igem.org/Colors/Red"><br>
−
&#60;div class="submenu_item" id="Parts-Test_Two"><br>
+
&#60;div class="submenu_item"><br>
−
Test Two<br>
+
Red<br>
 
&#60;/div><br>
 
&#60;/div><br>
−
&#60;/a> <br>
+
&#60;/a><br><br>
  
 +
&#60;a href="https://2019.igem.org/Colors/Yellow"><br>
 +
&#60;div class="submenu_item"><br>
 +
Yellow<br>
 +
&#60;/div><br>
 +
&#60;/a><br><br>
 +
 +
 +
&#60;/div></b><br>
 +
<br>
 
&#60;/div>
 
&#60;/div>
  
Line 196: Line 229:
  
 
<div class="column half_size" id="adding_menu">
 
<div class="column half_size" id="adding_menu">
−
<h3> Adding a submenu item </h3>
+
<h3> Adding a subsubmenu and subsubmenu items </h3>
−
<p> To add a submenu within an existing submenu, you can use the following code. In this case we use "Example" as the new page created.
+
<p> If the subpage you created has pages under it, you will have to add a subsubmenu. First you need to indicate that the subpage, in this case we will use 'Reds' has a subsubmenu by adding the class "with_subsub_menu" and then you will have to follow a similar nesting process to adding a submenu. The following code shows the example of adding 'Colors/Reds/Scarlet'. </p>
−
</p>
+
 
</div>
 
</div>
  
Line 205: Line 237:
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
−
&#60;a href="url"> <br>
+
 
−
&#60;div class="submenu_item with_submenu_items" id="Parts-Test_One"><br>
+
 
−
Test One<br>
+
&#60;div class="igem_menu_item"><br><br>
 +
&#60;a href="https://2019.igem.org/Colors"><br>
 +
&#60;div class="hub_icon"> <br>
 +
&#60;img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg"><br>
 +
&#60;/div> <br><br>
 +
 
 +
&#60;div class="hub_title"> <br>
 +
COLORS<br>
 +
&#60;/div> <br>
 +
&#60;/a><br><br>
 +
 
 +
 
 +
&#60;div class="submenu_access">&#60;/div><br>
 +
 
 +
&#60;div class="igem_submenu"><br><br>
 +
 
 +
&#60;div class="submenu_item subsection_title"> Warm Colors &#60;/div><br><br>
 +
 
 +
&#60;a href="https://2019.igem.org/Colors/Reds"><br>
 +
&#60;div class="submenu_item <b>with_subsub_menu</b>"><br>
 +
Reds<br>
 
&#60;/div><br>
 
&#60;/div><br>
−
&#60;/a><br>
+
&#60;/a><br><br>
−
&#60;div class="submenu_access">   &#60;/div><br>
+
 
−
&#60;div class="submenu"  id="Example_submenu"><br>
+
<b> &#60;div class="submenu_access">&#60;/div><br>
−
&#60;a href="url"><br>
+
 
−
&#60;div class="sub_submenu_item" id="Parts-Test_One-Example" > <br>
+
&#60;div class="igem_subsubmenu"><br><br>
−
Example <br>
+
 
−
&#60;/div><br>
+
&#60;a href="https://2019.igem.org/Colors/Reds/Scarlet"><br>
−
&#60;/a><br>
+
&#60;div class="subsubmenu_item"><br>
 +
Scarlet<br>
 +
&#60;/div><br>
 +
&#60;/a><br>
 +
 
 +
&#60;/div></b> <br> </br>
 +
 
 +
&#60;a href="https://2019.igem.org/Colors/Yellow"><br>
 +
&#60;div class="submenu_item"><br>
 +
Yellow<br>
 
&#60;/div><br>
 
&#60;/div><br>
 +
&#60;/a><br><br>
 +
 +
 +
 +
 +
&#60;/div><br>
 +
<br>
 +
&#60;/div>
  
 
</p>
 
</p>
Line 512: Line 581:
 
<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 four types of layout options, which vary between one column up to four in the same row. <br>
 
<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 four types of layout options, which vary between one column up to four in the same row. <br>
 
<ul>
 
<ul>
−
<li> One column: class="column full_size" </li>
+
<li> One column (100%) : class="column full_size" </li>
−
<li> Two columns: class="column half_size" </li>
+
<li> Three quarters column  (75%) : class="column three_quarter_size" </li>
−
<li> Three columns: class="column third_size" </li>
+
<li> Two thirds column (66%) : class="column two_thirds_size" </li>
−
<li> Four columns: class="column fourth_size" </li>
+
<li> Two columns (50%) : class="column half_size" </li>
 +
<li> Three columns (33%): class="column third_size" </li>
 +
<li> Four columns (25%) : class="column quarter_size" </li>
 
</ul>
 
</ul>
 
</div>
 
</div>
 +
 +
 +
  
 
<div class="column half_size">
 
<div class="column half_size">
Line 530: Line 604:
  
  
 +
<div class="clear extra_space"></div>
 +
 +
<div class="column full_size">
 +
<img src="https://placehold.it/1050x200">
 +
</div>
 +
 +
<div class="clear"></div>
 +
 +
<div class="column half_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
 +
<div class="column half_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
 +
 +
<div class="clear"></div>
 +
 +
<div class="column quarter_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
<div class="column quarter_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
<div class="column quarter_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
<div class="column quarter_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
 +
 +
<div class="clear"></div>
 +
 +
 +
<div class="column quarter_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
 +
<div class="column three_quarter_size">
 +
<img src="https://placehold.it/1050x100">
 +
</div>
 +
 +
 +
<div class="clear"></div>
 +
 +
<div class="column third_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
<div class="column third_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
<div class="column third_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
<div class="clear"></div>
 +
 +
<div class="column third_size">
 +
<img src="https://placehold.it/550x200">
 +
</div>
 +
 +
 +
<div class="column two_thirds_size">
 +
<img src="https://placehold.it/1050x180">
 +
</div>
 +
 +
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
  
Line 555: Line 717:
  
  
−
<div class="clear"></div>
+
<div class="clear extra_space"></div>
  
  
Line 565: Line 727:
 
<ul>  
 
<ul>  
 
<li> <b> class="highlight gray" </b> to add a gray background </li>
 
<li> <b> class="highlight gray" </b> to add a gray background </li>
−
<li> <b> class="highlight turquoise_top"</b> to add a blue decorative line on top </li>
+
<li> <b> class="highlight decoration_top"</b> to add a decorative line on top </li>
−
<li> <b> class="highlight turquoise_border" </b> to add a blue border around the div </li>
+
<li> <b> class="highlight decoration_full" </b> to add a border around the div </li>
 +
<li> <b> class="highlight decoration_light_top"</b> to add a  light color decorative line on top </li>
 +
<li> <b> class="highlight decoration_light_full" </b> to add a light color border around the div </li>
 +
<li> <b> class="highlight decoration_dark_top"</b> to add a  dark color decorative line on top </li>
 +
<li> <b> class="highlight decoration_dark_full" </b> to add a dark color border around the div </li>
 
</ul>
 
</ul>
  
Line 573: Line 739:
  
  
−
<div class="column fourth_size">
+
<div class="column quarter_size">
−
<div class="highlight gray turquoise_top" >
+
<div class="highlight decoration_dark_full" >
 
<p>
 
<p>
−
&#60;div class="column half_size" > <br>
+
&#60;div class="column quarter_size" > <br>
−
&#60;div class="highlight gray blue_top"><br><br>
+
&#60;div class="highlight decoration_dark_full"><br><br>
 
&#60;/div><br>
 
&#60;/div><br>
 
&#60;/div>
 
&#60;/div>
Line 585: Line 751:
 
</div>
 
</div>
  
−
<div class="column fourth_size">
+
<div class="column quarter_size">
−
<div class="highlight gray turquoise_border">
+
<div class="highlight gray decoration_light_top">
 
<p>
 
<p>
−
&#60;div class="column half_size" > <br>
+
&#60;div class="column quarter_size" > <br>
−
&#60;div class="highlight gray blue_border"><br><br>
+
&#60;div class="highlight gray decoration_light_top"><br><br>
 
&#60;/div><br>
 
&#60;/div><br>
 
&#60;/div>
 
&#60;/div>
Line 597: Line 763:
 
</div>
 
</div>
  
−
 
+
<div class="clear extra_space"></div>
−
<div class="clear"></div>
+
  
 
<div class="column half_size" id="button">
 
<div class="column half_size" id="button">
Line 624: Line 789:
  
  
−
<div class="clear"></div>
+
<div class="clear extra_space"></div>
  
 
<div class="column half_size" id="clear">
 
<div class="column half_size" id="clear">
Line 648: Line 813:
 
<div class="line_divider"></div>
 
<div class="line_divider"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
 +
  
 
<div class="column full_size">
 
<div class="column full_size">
−
<h2> Interactive Resources  </h2>
+
<h2> SPECIAL CASES</h2>
−
<p> Here are a few documented resources that can used to make pages interactive!</p>
+
<p> There are some specific sections in the wiki where certain support classes are called or when a different resource is called. Here a few of them.</p>
 
</div>
 
</div>
 +
  
 
<div class="column half_size">
 
<div class="column half_size">
−
<h3> Image Carrousel </h3>
+
<h3> News items </h3>
−
<p> You will need to load the style sheet and the js in order to make this code work. Place the code to the right on the top of your page.</p>
+
<p> News items are displayed in the main page but they are stored and loaded form the News Archive page ( <a href="https://2019.igem.org/Community/News_Archive">https://2019.igem.org/Community/News_Archive</a> ) to avoid losing data.
−
<p> Bellow you will find an example of how this resources works and to its right the naming for the image list  that you will need to use on your page.</p>
+
The following code shows how to create a news item on the Archive. Instructions can also be found on the top of page when clicking "edit".
 +
</p>
 
</div>
 
</div>
  
 
<div class="column half_size">
 
<div class="column half_size">
 +
<br>
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
−
<b> CSS  </b> <br>
+
    &#60; div class="highlight news_item"><br>
−
     &#60;link rel="stylesheet" type="text/css" href="https://igem.org/wiki/index.php?title=HQ:Carrousel.css&action=raw&ctype=text/css" /> <br><br>
+
     &#60;div class="news_date"> Month - Day  &#60;/div><br>
−
<b> JS </b><br>
+
    &#60;h3> Title    &#60;/h3><br>
−
     &#60;script src="https://igem.org/wiki/index.php?title=HQ:Carrousel.js&action=raw&ctype=text/javascript"></script>
+
     &#60;p> Description    &#60;/p><br>
 +
    &#60;div>
 
</p>
 
</p>
 +
 
</div>
 
</div>
 
</div>
 
</div>
  
  
−
<div class="clear"></div>
 
  
−
<div class="column half_size">
 
−
<div id="prev" class="carrousel control">  </div>
 
  
−
<ul class="carrousel images">
+
<div class="clear extra_space"></div>
−
<li class="image_list current_image"><img src="https://placehold.it/350x150"></li>
+
 
−
<li class="image_list"><img src="https://placehold.it/350x152"></li>
+
 
−
<li class="image_list"><img src="https://placehold.it/350x153"></li>
+
<div class="column half_size" >
−
</ul>
+
<h3> Calendar </h3>
 +
<p> The Calendar uses a set of special classes that display and control the viewing of the deadlines in each month. Information is divided in the date of the event and the information pertinent to it. The following code shows how to create a month with one event, the final result can be seen bellow.
 +
</p>
 +
<div class="clear extra_space"></div>
 +
 
 +
<div class="calendar_month">
 +
 
 +
<h1> MONTH  <div class="calendar_month_access content_control displaying_content"> </div> </h1>
 +
 
 +
<div class="calendar_month_content" >
 +
 
 +
<div class="deadline_date">
 +
##
 +
</div>
 +
 
 +
<div class="deadline_content">
 +
<h3>Title </h3>
 +
<p>Lorem ipsum dolor sit amet, mundi similique at nam, ius soleat efficiantur te. Reque errem voluptatibus in his. </p>
 +
</div>
 +
 
 +
 
 +
<div class="clear extra_space"></div>
 +
 
 +
</div>
 +
</div>
  
−
<div id="next" class="carrousel control"> </div>
 
  
 
</div>
 
</div>
Line 691: Line 883:
 
<div class="highlight gray">
 
<div class="highlight gray">
 
<p>
 
<p>
−
    &#60;div id="prev" class="carrousel control">     &#60;/div>  <br> <br>
+
&#60;div class="calendar_month"><br><br>
  
−
    &#60;ul class="carrousel images"><br>
+
&#60;h1> MONTH &#60;div class="calendar_month_access content_control displaying_content"> &#60;/div> &#60;/h1> <br><br>
−
    &#60;li class="image_list current_image">    &#60;img src="https://placehold.it/350x150">  &#60;/li> <br>
+
−
    &#60;li class="image_list">   &#60;img src="https://placehold.it/350x152">&#60;/li><br>
+
−
    &#60;li class="image_list">    &#60;img src="https://placehold.it/350x153">    &#60;/li><br>
+
−
    &#60;/ul><br><br>
+
  
−
    &#60;div id="next" class="carrousel control">     &#60;/div>
+
&#60;div class="calendar_month_content" ><br><br>
 +
 
 +
&#60;div class="deadline_date"><br>
 +
##<br>
 +
&#60;/div><br><br>
 +
 
 +
&#60;div class="deadline_content"><br>
 +
&#60;h3>Title &#60;/h3><br>
 +
&#60;p> Text &#60;/p><br>
 +
&#60;/div><br><br>
 +
 
 +
 
 +
&#60;div class="clear extra_space">&#60;/div><br>
 +
 
 +
&#60;/div><br>
 +
&#60;/div>
 
</p>
 
</p>
 +
  
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
<div class="column half_size" >
 +
<h3> Image Slider </h3>
 +
 +
<p>Remember to keep the same number of items in both lists so the numbers match and work correctly.</p>
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
<div id="image_carrousel">
 +
 +
<ul class="image_slider" >
 +
<li class="current_image"><img src="https://placehold.it/550x200"></li>
 +
<li><img src="https://placehold.it/550x200"></li>
 +
<li><img src="https://placehold.it/550x200"></li>
 +
</ul>
 +
 +
<div class="image_controller prev"> </div>
 +
<ul class="image_number">
 +
<li class="current_image_number"> 1</li>
 +
<li> 2</li>
 +
<li> 3</li>
 +
</ul>
 +
<div class="image_controller next">  </div>
 +
 +
</div>
 +
 +
</div>
 +
 +
<div class="column half_size" >
 +
<div class="highlight gray">
 +
 +
 +
 +
 +
<p>&#60;div id="image_carrousel"><br><br>
 +
 +
&#60;ul class="image_slider" ><br>
 +
&#60;li class="current_image">&#60;img src="https://placehold.it/550x200">&#60;/li><br>
 +
&#60;li>&#60;img src="https://placehold.it/550x200">&#60;/li><br>
 +
&#60;li>&#60;img src="https://placehold.it/550x200">&#60;/li><br>
 +
&#60;/ul><br><br>
 +
 +
&#60;div class="image_controller prev"> &#60;/div><br>
 +
&#60;ul class="image_number"><br>
 +
&#60;li class="current_image_number"> 1&#60;/li><br>
 +
&#60;li> 2&#60;/li><br>
 +
&#60;li> 3&#60;/li><br>
 +
&#60;/ul><br><br>
 +
 +
&#60;div class="image_controller next">  &#60;/div><br>
 +
 +
&#60;/div></p>
 +
 +
</div>
 +
 +
</div>
 +
 +
 +
 +
 +
<div class="clear extra_space"></div>

Revision as of 18:12, 30 January 2018

Loading...

CODE DOCUMENTATION

Website Visuals

Colors

The colors used on 2019.igem.org are:

#542160 #90528f #b48cb7 #c7aaca #d9c5dd #ffffff #f2f2f2 #d3d3d3 #989898 #000000

Icons

The icons used on our website where obtained from the noun project website. The credits can be found on the list below.

Creating a new page

Pages created in the 2019.igem.org website must follow a naming convention in order fit the website structure and to be reflected properly in the menu system. The naming convention should make them fall under these categories:

  • About
  • Calendar
  • Teams
  • Community
    • Mentorship
  • Competition
    • Registration
    • Deliverables
    • Tracks
  • Giant Jamboree
  • Judging
  • Safety
  • Human Practices
  • Measurement
  • Sponsors
    • Special Offers
  • Resources
  • Sitemap


Here is an example for creating a new application page under the Community namespace and within the Mentorship submenu:
2019.igem.org/Community/Mentorship/Apply

If a page that doesn't fall under the previous categories needs to be created, please contact Ana or Traci before creating said page.