Code Documentation2
Loading ...
Styling
Color palette
Lime green |
Orange |
Turquoise |
Red |
Navy |
White |
Light gray |
Medium gray |
Charcoal |
Black |
Text
To write text<p> Text </p>
<a href="link"> LINK </a>
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>
To create a numbered list, use the following example
Things to buy:- Milk
- Eggs
- Flour
<b>Things to buy: </b> <ol> <li> Milk </li> <li> Eggs </li> <li> Flour </li> </ol>
Nested Lists
- Cold Colors
- Warm Colors
- Red
- Orange
- Yellow
<ul> <li> Warm Colors <ol> <li> Red </li> <li> Orange </li> <li> Yellow </li> </ol> </li> </ul>
H titles
<h2> </h2>
H1 Title
Used only on the first title of the page.
H4 Title
Used for red highlight text
H2 Title
Used for the main item titles of the page.
H5 Title
Highlighting text, similar to bold.
H3 Title
Used for subtitles
H6 Title
Not used
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>
Images
<div class="twoColumns photo_container"> <img src= " URL " > </div>
Full width
width = 950 px
height = 300 px (suggested)
Half width
width = 474 px
height = 300 px (suggested)
Third width
width = 315 px
height = 215 px (suggested)
Quarter width
width = 236 px
height = 156 px (suggested)
<a href=" URL "> <div class="button"> BUTTON NAME </div> </a>
Why ? pop up
The ? button is used to provide a more detailed explanation
The answer code must be written in: https://2015.igem.org/Why_demo
Make sure you follow the naming convention " why_NAME "
NAME being the title you chose for your ? and its corresponding answer.
Also make sure that "which_why" and div id are the same so the button calls the correct answer.
Title
Text
<span class="pop_why" onclick="which_why='why_NAME'"> ? </span>
<div id="why_NAME"> <div class="pop_close">X</div> <h3>Title </h3> <p>Text</p> </div>
Layout classes
Full width Column
Lorem ipsum dolor sit amet, ubique vivendo his at, eruditi officiis molestiae pro cu, ne per admodum recteque intellegat. Mea id inani nusquam tractatos, ea vei.
Half width Columns
Lorem ipsum dolor sit amet, ubique vivendo his at, eruditi officiis molestiae.
Third width Columns
Lorem ipsum dolor sit amet, ubique vivendo his
Quarter width Columns
Lorem ipsum dolor sit amet, ubique
Full width
<div class="oneColumn"> </div>
Half width
<div class="twoColumns"> </div>
Third width
<div class="threeColumns"> </div>
Quarter width
<div class="fourColumns"> </div>
Styling layout classes
Gray background
<div class="threeColumns background_gray">
Solid Border
<div class="threeColumns full_border">
Dotted Border
<div class="threeColumns dot_border">
Alert
When creating an alert !
<div class="twoColumns alert_box">
Highlight
Hover to see !
This can be used to make the whole div highlight and indicate that it is clickable
<div class="twoColumns highlight" onClick=" parent.location= ' URL '">
Examples
Title
Per ut minim iriure aliquid, eam posse dicunt impetus id. Deleniti reprimique ut vel, consul ignota te eos, his facete equidem pertinacia et. Laoreet detracto scribentur has an, ad vis elitr vituperata. Nec at copiosae consectetuer, regione consulatu ius ne, nec laboramus consectetuer te.
Ex homero labores adversarium pri, sanctus assentior vis ea. Postea convenire vituperata nam ne, ius vocibus phaedrum consequat in, scaevola honestatis nec id. Has te verterem constituam, sed omnes fuisset an.
Sea blandit sadipscing reprehendunt et.
Deadlines
Header 1 | Header 2 |
---|---|
Content A 1 | Content B 1 |
Content A 2 | Content B 2 |
Title
Per ut minim iriure aliquid, ? eam posse dicunt impetus id. Deleniti reprimique ut vel, consul ignota te eos, his facete equidem pertinacia et. Laoreet detracto scribentur has an, ad vis elitr vituperata. Nec at copiosae consectetuer, regione consulatu ius ne, nec laboramus consectetuer te.
Title
Per ut minim iriure aliquid, eam posse dicunt impetus id. Deleniti reprimique ut vel, consul ignota te eos, his facete equidem pertinacia et. Laoreet detracto scribentur has an, ad vis elitr vituperata. Nec at copiosae consectetuer, regione consulatu ius ne, nec laboramus consectetuer te.
Naming
URL should be:
https://2016.igem.org/Elements_of_Art
<div id="Elements_of_Art"> <div> <a class="switch_Menus">◀</a> </div> <a href="URL"> <div class="sideMenuTitle">Elements of Art</div> </a> <div><a class="expand_subMenus"> + </a></div> <div class="clear"> </div>
<h4> Color</h4> <ul> <a href="URL"><li>Cold Colors</li></a>
<a href="URL"><li>Warm Colors</a> <a class="subMenu_toggle">▼</a> <div class="subMenu"> <ul> <a href="URL"><li>Red</li></a> <a href="URL"><li>Orange</li></a> <a href="URL"><li>Yellow</li></a> </ul> </div> </li> </ul>
<div id="Elements_of_Art"> <div><a class="switch_Menus"> ◀ </a> </div> <a href=" https://2016.igem.org/Elements_of_Art "> <div class="sideMenuTitle">Elements of Art </div> </a> <div><a class="expand_subMenus"> + </a> </div> <div class="clear"></div> <h4>Color</h4> <ul> <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors "><li>Warm Colors</a> <a class="subMenu_toggle">▼</a> <div class="subMenu"> <ul> <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Blue"><li>Blue</li></a> <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Purple"><li>Purple</li></a> <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Green"><li>Green</li></a> </ul> </div> </li> <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors "><li>Warm Colors</a> <a class="subMenu_toggle">▼</a> <div class="subMenu"> <ul> <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Red"><li>Red</li></a> <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Orange"><li>Orange</li></a> <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Yellow"><li>Yellow</li></a> </ul> </div> </li> </ul> <h4>Line</h4> <ul> <a href="https://2016.igem.org/Elements_of_Art/Line/Direction"><li>Direction</li></a> <a href="https://2016.igem.org/Elements_of_Art/Line/Width"><li>Width</li></a> <a href="https://2016.igem.org/Elements_of_Art/Line/Length"><li>Length</li></a> </ul> </div>