HQ:Code Documentation

MENU

Loading...

CODE DOCUMENTATION

Website Visuals

Colors

The colors used on 2017.igem.org are:

#00bdcd	#dddddd	#f2f2f2	#000000	#ffffff	#004789

Icons

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

• Safety Googles by Giuditta Gentile
• Star by Eagle Eye
• Gabel by Bernar Novalyi
• Fireworks by Yeoul Kwon
• Sitemap by Pro Symbols
• Volunteers by MRFA
• Information by i cons
• Calendar Nook Fulloption
• Gears by Aya Sofya
• Book by MRFA

Creating a new page

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:

• About
• Calendar
• Community
  • Mentorship
• Competition
  • Registration
  • Deliverables
  • Tracks
• Giant Jamboree
• Judging
• Safety
• Sponsors
  • Special Offers
• Resources

Here is an example for creating a new application page under the Community namespace and within the Mentorship submenu:
2017.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.

Updating the Menu

Remember to update the menu appropriately when you make a new page and be careful when adding, closing and opening submenus.

Adding a menu item

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.

<div class="menu_item_wrapper" id="Parts">
<a href="https://2017.igem.org/Parts">
<div class="menu_icon">
<img src="url">
</div>
<div class="menu_item hub_link">
PARTS
</div>
</a>

Adding a submenu item

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

<div class="submenu_access"> </div>
<div class="submenu">
<div class="menu_title"> Parts Types: </div>
<a href="url">
<div class="submenu_item" id="Parts-Test_One">
Test One
</div>
</a>
<a href="url">
<div class="submenu_item" id="Parts-Test_Two">
Test Two
</div>
</a>
</div>

Adding a submenu item

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.

<a href="url">
<div class="submenu_item with_submenu_items" id="Parts-Test_One">
Test One
</div>
</a>
<div class="submenu_access"> </div>
<div class="submenu" id="Example_submenu">
<a href="url">
<div class="sub_submenu_item" id="Parts-Test_One-Example" >
Example
</div>
</a>
</div>

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

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:

1. Milk
2. Eggs
3. 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
  1. Red
  2. Orange
  3. 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 four types of layout options, which vary between one column up to four in the same row.

• One column: class="column full_size"
• Two columns: class="column half_size"
• Three columns: class="column third_size"
• Four columns: class="column fourth_size"

<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 turquoise_top" to add a blue decorative line on top
• class="highlight turquoise_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.

REGISTER NOW!

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

Interactive Resources

Here are a few documented resources that can used to make pages interactive!

Image Carrousel

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.

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.

CSS
<link rel="stylesheet" type="text/css" href="https://igem.org/wiki/index.php?title=HQ:Carrousel.css&action=raw&ctype=text/css" />

JS
<script src="https://igem.org/wiki/index.php?title=HQ:Carrousel.js&action=raw&ctype=text/javascript">

• 
• 
• 

<div id="prev" class="carrousel control"> </div>

<ul class="carrousel images">
<li class="image_list current_image"> <img src="http://placehold.it/350x150"> </li>
<li class="image_list"> <img src="http://placehold.it/350x152"></li>
<li class="image_list"> <img src="http://placehold.it/350x153"> </li>
</ul>

<div id="next" class="carrousel control"> </div>