Difference between revisions of "Code Documentation2"
(344 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{2016Demo}} | {{2016Demo}} | ||
<html> | <html> | ||
+ | <style> | ||
+ | pre {margin: -5px;} | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h2> Styling </h2> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Colors"></div> | ||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h3> Color palette</h3> | ||
+ | |||
+ | <table> | ||
+ | |||
+ | <tr height="50px" align="center" > | ||
+ | <td width="180px" bgcolor="#e8edaa" > <h4 style="color:black;"> Lime green <br> #e8edaa</h4> </td> | ||
+ | <td width="180px" bgcolor="#f27631" > <h4 style="color:black;">Orange <br> #f27631 </h4> </td> | ||
+ | <td width="180px" bgcolor="#5ba88a" > <h4 style="color:white;"> Turquoise <br> #5ba88a </h4></td> | ||
+ | <td width="180px" bgcolor="#e9232f" > <h4 style="color:white ;"> Red <br> #e9232f </h4></td> | ||
+ | <td width="180px" bgcolor="#4e606e" > <h4 style="color:white;"> Navy <br>#4e606e </h4></td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | |||
+ | <table> | ||
+ | <tr height="50px" align="center"> | ||
+ | <td width="180px" bgcolor="#ffffff"> <h4 style="color:black;">White <br> #ffffff</h4> </td> | ||
+ | <td width="180px" bgcolor="#f2f2f2"> <h4 style="color:black;">Light gray <br> #f2f2f2</h4> </td> | ||
+ | <td width="180px" bgcolor="#d3d3d3"> <h4 style="color:black;"> Medium gray<br>#d3d3d3</h4> </td> | ||
+ | <td width="180px" bgcolor="#333333"><h4 style="color:white;">Charcoal <br> #333333</h4> </td> | ||
+ | <td width="180px" bgcolor="#000000"> <h4 style="color:white;">Black <br>#000000</h4> </td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Text"></div> | ||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <h3> Text </h3> | ||
+ | To write text | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <BR><BR> | ||
+ | <pre> | ||
+ | <p> Text </p> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Links"></div> | ||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <h3> Links </h3> | ||
+ | <p> When creating links </p> | ||
+ | |||
+ | <a href =""> Example </A> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <BR><BR> | ||
+ | <pre> | ||
+ | <a href="link"> LINK </a> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Lists"></div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h3> Lists </h3> | ||
+ | <p>Use the following example to create a simple list. </p> | ||
+ | |||
+ | <b> Painting materials </b> | ||
+ | <ul> | ||
+ | |||
+ | <li> Brushes </li> | ||
+ | <li> Acrylic paint </li> | ||
+ | <li> Watercolors </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <pre> | ||
+ | <b>Painting Materials</b> | ||
+ | |||
+ | <ul> | ||
+ | |||
+ | <li> Brushes </li> | ||
+ | <li> Acrylic paint </li> | ||
+ | <li> Watercolors </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | <p>To create a numbered list, use the following example </p> | ||
+ | <B> Things to buy: </b> | ||
+ | <ol> | ||
+ | |||
+ | <li> Milk </li> | ||
+ | <li> Eggs </li> | ||
+ | <li> Flour </li> | ||
+ | </ol> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <pre> | ||
+ | <b>Things to buy: </b> | ||
+ | |||
+ | <ol> | ||
+ | |||
+ | <li> Milk </li> | ||
+ | <li> Eggs </li> | ||
+ | <li> Flour </li> | ||
+ | |||
+ | </ol> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <h3> Nested Lists </h3> | ||
+ | <p> Here is an example of a nested list. </p> | ||
+ | <ul> | ||
+ | |||
+ | <li> Cold Colors </li> | ||
+ | <li> Warm Colors | ||
+ | <ol> | ||
+ | <li> Red </li> | ||
+ | <li> Orange </li> | ||
+ | <li> Yellow </li> | ||
+ | </ol> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <pre> | ||
+ | <ul> | ||
+ | |||
+ | <li> Cold Colors </li> | ||
+ | <li> Warm Colors | ||
+ | <ol> | ||
+ | <li> Red </li> | ||
+ | <li> Orange </li> | ||
+ | <li> Yellow </li> | ||
+ | </ol> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Titles"></div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h3> H titles </h3> | ||
+ | |||
+ | <pre> | ||
+ | <h2> Title </h2> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="threeColumns"> | ||
+ | <h1> H1 Title </h1> | ||
+ | <p> Used only on the first title of the page.</p> | ||
+ | |||
+ | <h4> H4 Title </h4> | ||
+ | <p> Used for red highlight text</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="threeColumns"> | ||
+ | <h2> H2 Title </h2> | ||
+ | <p> Used for the main item titles of the page.</p> | ||
+ | |||
+ | <h5> H5 Title </h5> | ||
+ | <p> Highlighting text, similar to bold. </p> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="threeColumns"> | ||
+ | |||
+ | <h3> H3 Title </h3> | ||
+ | <p> Used for subtitles</p> | ||
+ | |||
+ | |||
+ | <h6> H6 Title </h6> | ||
+ | <p> Not used </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Tables"></div> | ||
<div class="twoColumns"> | <div class="twoColumns"> | ||
− | < | + | <h3> Tables</h3> |
<p> Tables created within in a page already have styling and will display:</p> | <p> Tables created within in a page already have styling and will display:</p> | ||
<table> | <table> | ||
Line 48: | Line 295: | ||
+ | |||
+ | <div class="clear_id" id="Images"></div> | ||
<div class="twoColumns"> | <div class="twoColumns"> | ||
+ | <h3> Images </h3> | ||
+ | <p>You will need to call the "photo_container" class. Images width for the different layout classes are specified bellow. </p> | ||
− | + | </div> | |
− | < | + | <div class="twoColumns"> |
− | + | <pre> | |
+ | <div class="twoColumns <b class="red_text">photo_container</b>"> | ||
+ | <img src= "<b class="red_text">URL</b>" > | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | <h5> Full width </h5> | ||
+ | <p> width = 950 px<br> | ||
+ | height = 300 px (suggested) | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | <h5> Half width </h5> | ||
+ | <p> width = 474 px<br> | ||
+ | height = 300 px (suggested) | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | <h5> Third width </h5> | ||
+ | <p> width = 315 px<br> | ||
+ | height = 215 px (suggested) | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | <h5> Quarter width </h5> | ||
+ | <p> width = 236 px<br> | ||
+ | height = 156 px (suggested) | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Button"></div> | ||
+ | |||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h2> Classes </h2> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <h3>Button </h3> | ||
+ | <p> When naming a button, please remember to use the style convention and write it in CAPS. </p> | ||
+ | <a href=""><div class="button"> | ||
+ | REGISTER NOW! | ||
+ | </div></a> | ||
+ | </div> | ||
+ | |||
+ | <div class="twoColumns"> | ||
<br><br> | <br><br> | ||
− | < | + | <pre><a href="<b class="red_text">URL</b>"> |
+ | <div class="button"> | ||
+ | <b class="red_text">REGISTER NOW!</b> | ||
+ | </div> | ||
+ | </a> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | <div class="clear_id" id="Pop_up"></div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | |||
+ | <h3> Why ? pop up </h3> | ||
+ | |||
+ | <p> The <span class="pop_why" onclick="which_why='why_schools'">?</span> button is used to provide a more detailed explanation <br> <br> | ||
+ | The answer code must be written in: <a href="https://2015.igem.org/Why_demo">https://2015.igem.org/Why_demo</a><br> | ||
+ | Make sure you follow the naming convention <b> " why_NAME "</b> <br> NAME being the title you chose for your ? and its corresponding answer. <br><br> | ||
+ | Also make sure that "which_why" and div id are the same so the button calls the correct answer. </p> | ||
+ | |||
+ | <br> | ||
+ | <div style ="padding: 15px;width: 400px;border: 3px solid #4e606e;border-radius: 3px;"> | ||
+ | <div class="pop_close">×</div> | ||
+ | <h3> Title </h3> | ||
+ | |||
+ | <p> Text </p> | ||
+ | </div> | ||
</div> | </div> | ||
<div class="twoColumns"> | <div class="twoColumns"> | ||
+ | <br><br> | ||
<pre> | <pre> | ||
− | <span class="pop_why" | + | <span class="pop_why" onclick="which_why='<b class="red_text">why_NAME</b>'"> |
− | onclick="which_why='why_NAME'"> | + | |
? | ? | ||
</span> | </span> | ||
</pre> | </pre> | ||
− | |||
+ | <br><br><br><br><br><br> | ||
<pre> | <pre> | ||
− | <div id=" | + | <div id="<b class="red_text">why_NAME</b>"> |
<h3>Title </h3> | <h3>Title </h3> | ||
− | |||
<p>Text</p> | <p>Text</p> | ||
Line 84: | Line 431: | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | |||
+ | |||
+ | <h3> Expandable content </h3> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="click_open"> <h5>Title</h5> <div class="click_icon">▼</div> | ||
+ | |||
+ | <div class="click_content"> | ||
+ | <p> Example content </p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="layout"></div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h3> Layout classes</h3> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="oneColumn dot_border"> | ||
+ | <h3> Full width Column</h3> | ||
+ | <p>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.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns dot_border"> | ||
+ | <h3> Half width Columns</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, ubique vivendo his at, eruditi officiis molestiae.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | <div class="threeColumns dot_border"> | ||
+ | <h3> Third width Columns</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, ubique vivendo his</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns dot_border"> | ||
+ | <h3> Quarter width Columns</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, ubique</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Full width </h5> | ||
+ | <pre> | ||
+ | <div class="<b class="red_text">oneColumn</b>"> | ||
+ | </div> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Half width </h5> | ||
+ | <pre> | ||
+ | <div class="<b class="red_text">twoColumns</b>"> | ||
+ | </div> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Third width </h5> | ||
+ | <pre> | ||
+ | <div class="<b class="red_text">threeColumns</b>"> | ||
+ | </div> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Quarter width </h5> | ||
+ | <pre> | ||
+ | <div class="<b class="red_text">fourColumns</b>"> | ||
+ | </div> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="style_layout"></div> | ||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h3> Styling layout classes</h3> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Gray background </h5> | ||
+ | <p> This can be used to highlight some text</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns background_gray"> | ||
+ | <p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <pre> | ||
+ | <div class="threeColumns <b class="red_text">background_gray</b>"> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Solid Border</h5> | ||
+ | </div> | ||
+ | |||
+ | <div class="fourColumns full_border"> | ||
+ | <p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <pre> | ||
+ | <div class="threeColumns <b class="red_text">full_border</b>"> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Dotted Border</h5> | ||
+ | </div> | ||
+ | |||
+ | <div class="fourColumns dot_border"> | ||
+ | <p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <pre> | ||
+ | <div class="threeColumns <b class="red_text">dot_border</b>"> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Alert box </h5> | ||
+ | </div> | ||
+ | |||
+ | <div class="fourColumns alert_box"> | ||
+ | <p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <pre> | ||
+ | <div class="twoColumns <b class="red_text">alert_box</b>"> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h5> Highlight </h5> | ||
+ | <p> Hover to see ! <br> This can be used to make the whole div highlight and indicate that it is clickable</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="fourColumns highlight"> | ||
+ | <p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. <a href="">Quo lorem periculis definitionem an</a>, quo no labores definitionem.</p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | <pre> | ||
+ | <div class="twoColumns <b class="red_text"> highlight</b>" | ||
+ | onClick=" parent.location= ' <b class="red_text">URL</b> '"> | ||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="example_layout"></div> | ||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | <div class="oneColumn"> | ||
+ | <h3> Examples</h3> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="twoColumns highlight"> | ||
+ | <h3> Title </h3> | ||
+ | <p>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. <br> | ||
+ | <a href=""> Sea blandit sadipscing reprehendunt et. </a> </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | <h3> Deadlines </h3> | ||
+ | <table width="100%"> | ||
+ | |||
+ | <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> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | <h3> Register </h3> | ||
+ | |||
+ | <p>Per ut minim iriure aliquid, eam posse dicunt impetus id.</p> | ||
+ | |||
+ | <br><br> | ||
+ | <a href=" URL "> | ||
+ | <div class="button"> | ||
+ | REGISTER | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class=" clear"></div> | ||
+ | <div class=" clear"></div> | ||
+ | <div class=" clear"></div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="threeColumns photo_container"> | ||
+ | <a href=""> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/9/95/HQposter_judging.jpg" width="315px"> | ||
+ | </a> | ||
+ | |||
+ | <p> Image 1.1 - text </p> | ||
+ | </div> | ||
+ | |||
+ | <div class="threeColumns"> | ||
+ | <h3> Title </h3> | ||
+ | <p>Per ut minim iriure aliquid, <span class="pop_why" onclick="which_why='why_schools'">?</span> 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. <a href="">Nec at copiosae consectetuer</a>, regione consulatu ius ne, nec laboramus consectetuer te. </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="threeColumns background_gray"> | ||
+ | <h3> Title </h3> | ||
+ | <p>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. </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear_id" id="Menu"></div> | ||
+ | |||
+ | <div class="oneColumn"> | ||
+ | |||
+ | <h2>Menu </h2> | ||
+ | |||
+ | <p> In this example the menu will be created for pages that have "Elements_of_Art" in their name space.</p> | ||
+ | |||
+ | |||
+ | <h3> Placing your code </h3> | ||
+ | <p> All the menus live in : <a href="https://2015.igem.org/Menu/DemoSafety">https://2015.igem.org/Menu/DemoSafety </a> | ||
+ | Please be careful to not delete any of the other menus, look for the section where it says "PLACE YOUR MENU HERE" to make sure everything is properly wrapped. </p> | ||
+ | |||
+ | |||
+ | <h3> Activating your hub menu </h3> | ||
+ | <p> To enable the code to know that your menu exists, you will need to add to the array that holds the list of hub menus</p> | ||
+ | |||
+ | <p> Got to: <a href="" > https://2016.igem.org/HQ_Hub_List</a> and add the following line </p> | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | hub_list[#] ="Elements_of_Art"; (# stands for the next number in the list) | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | |||
+ | |||
+ | <h3> Naming </h3> | ||
+ | |||
+ | <p>All pages that have "Elements_of_Art" under their namespace will have the same menu. </p> | ||
+ | |||
+ | |||
+ | <ul> | ||
+ | <b>The name has to be exactly the same in three places:</b> | ||
+ | <br> | ||
+ | |||
+ | <li> Array with the list of hub menus <br> | ||
+ | <b>hub_list[4] ="<b class="red_text">Elements_of_Art</b>"; </b> </li> | ||
+ | |||
+ | <li> Menu code page | ||
+ | <br> <b> div id="<b class="red_text">Elements_of_Art</b>" </b> | ||
+ | |||
+ | <li> URLs | ||
+ | <br><b>https://2016.igem.org/<b class="red_text">Elements_of_Art </b></b></li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns"> | ||
+ | |||
+ | |||
+ | <h3> Addind Section Titles</h3> | ||
+ | The Section Title needs to be placed in the h4 tag. | ||
+ | |||
+ | |||
+ | <h3> Adding a Page </h3> | ||
+ | The first page under it is "Cold Colors". | ||
+ | |||
+ | |||
+ | |||
+ | <h3> Listing Page Sections </h3> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="twoColumns"> | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | <div id="<b class="red_text">Elements_of_Art</b>"> | ||
+ | |||
+ | <div> <a class="switch_Menus">◀</a> </div> | ||
+ | |||
+ | <a href="<b class="red_text">URL</b>"> | ||
+ | <div class="sideMenuTitle"><b class="red_text">Elements of Art</b></div> | ||
+ | </a> | ||
+ | |||
+ | <div><a class="expand_subMenus"> + </a></div> | ||
+ | |||
+ | <div class="clear"> </div> | ||
+ | |||
+ | </pre> | ||
+ | <br> | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | <h4> <b class="red_text">Color</b></h4> | ||
+ | |||
+ | <ul> | ||
+ | |||
+ | <a href="<b class="red_text">URL</b>"><li><b class="red_text">Cold Colors</b></li></a> | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | <br> | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | <a href="<b style="color:red">URL</b>"><li><b style="color:red">Warm Colors</b></a> | ||
+ | <a class="subMenu_toggle">▼</a> | ||
+ | |||
+ | <div class="subMenu"> | ||
+ | |||
+ | <ul> | ||
+ | <a href="<b style="color:red">URL</b>"><li><b style="color:red">Red</b></li></a> | ||
+ | <a href="<b style="color:red">URL</b>"><li><b style="color:red">Orange</b></li></a> | ||
+ | <a href="<b style="color:red">URL</b>"><li><b style="color:red">Yellow</b></li></a> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="fourColumns photo_container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/3/3d/2016_menu_documentation_example.png" width="236px"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="oneColumn"> | ||
+ | |||
+ | <pre> | ||
+ | <div id="<b class="red_text">Elements_of_Art</b>"> | ||
+ | |||
+ | <div><a class="switch_Menus"> ◀ </a> </div> | ||
+ | |||
+ | <a href="<b class="red_text"> https://2016.igem.org/Elements_of_Art </b>"> | ||
+ | <div class="sideMenuTitle"><b class="red_text">Elements of Art</b> | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <div><a class="expand_subMenus"> + </a> </div> | ||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | <h4><b class="red_text">Color</b></h4> | ||
+ | |||
+ | <ul> | ||
+ | |||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Cold_Colors </b>"><li><b class="red_text">Warm Colors</b></a> | ||
+ | <a class="subMenu_toggle">▼</a> | ||
+ | <div class="subMenu"> | ||
+ | <ul> | ||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Blue</b>"><li><b class="red_text">Blue</b></li></a> | ||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Purple</b>"><li><b class="red_text">Purple</b></li></a> | ||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Green</b>"><li><b class="red_text">Green</b></li></a> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Warm_Colors </b>"><li><b class="red_text">Warm Colors</b></a> | ||
+ | <a class="subMenu_toggle">▼</a> | ||
+ | <div class="subMenu"> | ||
+ | <ul> | ||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Red</b>"><li><b class="red_text">Red</b></li></a> | ||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Orange</b>"><li><b class="red_text">Orange</b></li></a> | ||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Yellow</b>"><li><b class="red_text">Yellow</b></li></a> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | <h4><b class="red_text">Line</b></h4> | ||
+ | |||
+ | <ul> | ||
+ | |||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Line/Direction</b>"><li><b class="red_text">Direction</b></li></a> | ||
+ | |||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Line/Width</b>"><li><b class="red_text">Width</b></li></a> | ||
+ | |||
+ | <a href="<b class="red_text">https://2016.igem.org/Elements_of_Art/Line/Length</b>"><li><b class="red_text">Length</b></li></a> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | </pre> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
</html> | </html> | ||
{{2016Demo_bottom}} | {{2016Demo_bottom}} |
Latest revision as of 17:45, 30 November 2015
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
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>
H titles
<h2> Title </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
You will need to call the "photo_container" class. Images width for the different layout classes are specified bellow.
<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)
Classes
<a href="URL"> <div class="button"> REGISTER NOW! </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"> <h3>Title </h3> <p>Text</p> </div>
Expandable content
Title
Example content
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
This can be used to highlight some text
Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.
<div class="threeColumns background_gray">
Solid Border
Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.
<div class="threeColumns full_border">
Dotted Border
Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.
<div class="threeColumns dot_border">
Alert box
Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.
<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
Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.
<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.
Menu
In this example the menu will be created for pages that have "Elements_of_Art" in their name space.
Placing your code
All the menus live in : https://2015.igem.org/Menu/DemoSafety Please be careful to not delete any of the other menus, look for the section where it says "PLACE YOUR MENU HERE" to make sure everything is properly wrapped.
Activating your hub menu
To enable the code to know that your menu exists, you will need to add to the array that holds the list of hub menus
Got to: https://2016.igem.org/HQ_Hub_List and add the following line
hub_list[#] ="Elements_of_Art"; (# stands for the next number in the list)
Naming
All pages that have "Elements_of_Art" under their namespace will have the same menu.
-
The name has to be exactly the same in three places:
- Array with the list of hub menus
hub_list[4] ="Elements_of_Art"; - Menu code page
div id="Elements_of_Art" - URLs
https://2016.igem.org/Elements_of_Art
Addind Section Titles
The Section Title needs to be placed in the h4 tag.Adding a Page
The first page under it is "Cold Colors".Listing Page Sections
<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>