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.

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

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.

Text

To write text use the < p > tag

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

Links

When creating links use the < a > tag, links will display : Example

Images

You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server.

Unordered Lists

Use the following example to create a simple list.
Painting materials:

• Brushes
• Acrylic paint
• Watercolors

Numbered Lists

To create an ordered list, use:
Things to buy:

1. Milk
2. Eggs
3. Flour

Nested Lists

Here is an example of a nested list.

• Cold Colors
• Warm Colors
  1. Red
  2. Orange
  3. Yellow

Tables

Tables created within in a page already have styling and will display:

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"