HQ:Code Documentation

Loading...

CODE DOCUMENTATION

Website Visuals

Colors

The colors used on 2019.igem.org are:

#00A19B #007B8A #085156 #00BFD6 #FF9012 #FFB819 #F42534

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.

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

<div class="igem_menu_item">

<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>

<div class="hub_title">
COLORS
</div>
</a>

</div>

Adding a submenu and submenu items

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.

<div class="igem_menu_item">

<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>

<div class="hub_title">
COLORS
</div>
</a>

<div class="submenu_access"></div>
<div class="igem_submenu">

<div class="submenu_item subsection_title"> Warm Colors </div>

<a href="https://2019.igem.org/Colors/Red">
<div class="submenu_item">
Red
</div>
</a>

<a href="https://2019.igem.org/Colors/Yellow">
<div class="submenu_item">
Yellow
</div>
</a>

</div>

</div>

Adding a subsubmenu and subsubmenu items

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

<div class="igem_menu_item">

<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>

<div class="hub_title">
COLORS
</div>
</a>

<div class="submenu_access"></div>
<div class="igem_submenu">

<div class="submenu_item subsection_title"> Warm Colors </div>

<a href="https://2019.igem.org/Colors/Reds">
<div class="submenu_item with_subsub_menu">
Reds
</div>
</a>

<div class="submenu_access"></div>
<div class="igem_subsubmenu">

<a href="https://2019.igem.org/Colors/Reds/Scarlet">
<div class="subsubmenu_item">
Scarlet
</div>
</a>
</div>

<a href="https://2019.igem.org/Colors/Yellow">
<div class="submenu_item">
Yellow
</div>
</a>

</div>

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

<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 (100%) : class="column full_size"
  • Three quarters column (75%) : class="column three_quarter_size"
  • Two thirds column (66%) : class="column two_thirds_size"
  • Two columns (50%) : class="column half_size"
  • Three columns (33%): class="column third_size"
  • Four columns (25%) : class="column quarter_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 decoration_top" to add a decorative line on top
  • class="highlight decoration_full" to add a border around the div
  • class="highlight decoration_light_top" to add a light color decorative line on top
  • class="highlight decoration_light_full" to add a light color border around the div
  • class="highlight decoration_dark_top" to add a dark color decorative line on top
  • class="highlight decoration_dark_full" to add a dark color border around the div

These classes can be combined to create different effects, as seen in the next examples.

<div class="column quarter_size" >
<div class="highlight decoration_dark_full">

</div>
</div>

<div class="column quarter_size" >
<div class="highlight gray decoration_light_top">

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

SPECIAL CASES

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.

News items

News items are displayed in the main page but they are stored and loaded form the News Archive page ( https://2019.igem.org/Community/News_Archive ) to avoid losing data. 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".


< div class="highlight news_item">
<div class="news_date"> Month - Day </div>
<h3> Title </h3>
<p> Description </p>
<div>

Reminder

Calendar

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.

MONTH

##

Title

Lorem ipsum dolor sit amet, mundi similique at nam, ius soleat efficiantur te. Reque errem voluptatibus in his.

<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> Text </p>
</div>

<div class="clear extra_space"></div>
</div>
</div>

Image Slider

Remember to keep the same number of items in both lists so the numbers match and work correctly.

  • 1
  • 2
  • 3

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