Difference between revisions of "HQ:Code Documentation"
m (Converted https to http in links) |
|||
| Line 53: | Line 53: | ||
<ul> | <ul> | ||
| − | <li> <a href=" | + | <li> <a href="http://thenounproject.com/giuditta.gentile/uploads/?i=532841"> Safety Googles </a> by Giuditta Gentile </li> |
| − | <li> <a href=" | + | <li> <a href="http://thenounproject.com/search/?q=star&i=827235"> Star</a> by Eagle Eye </li> |
| − | <li> <a href=" | + | <li> <a href="http://thenounproject.com/bernar.novalyi/uploads/?i=684226"> Gabel </a> by Bernar Novalyi </li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/asteryou/uploads/?i=783472">Fireworks</a> by Yeoul Kwon</li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/search/?q=sitemap&i=564708">Sitemap</a> by Pro Symbols </li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/search/?q=community&i=642224">Volunteers</a> by MRFA </li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/search/?q=information&i=1009847">Information</a> by i cons</li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/search/?q=calendar&i=800713">Calendar </a> Nook Fulloption </li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/search/?q=gear&i=716650">Gears</a> by Aya Sofya </li> |
| − | <li><a href=" | + | <li><a href="http://thenounproject.com/search/?similar=10353&i=629844"> Book </a> by MRFA </li> |
</div> | </div> | ||
Revision as of 14:12, 6 July 2017
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.
<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>
<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>
<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:
- 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 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.
<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>
