Difference between revisions of "Code Documentation"
Line 4: | Line 4: | ||
<div id="leftColumn"> | <div id="leftColumn"> | ||
− | <h4> | + | |
+ | <h4>Creating Content </h4> | ||
+ | <ul> | ||
+ | <a href= "https://2015.igem.org/Code_Documentation#page"> <li>New Page</li></a> | ||
+ | <a href= "https://2015.igem.org/Code_Documentation#links"> <li>Links</li></a> | ||
+ | <a href= "https://2015.igem.org/Code_Documentation#tables"> <li>Table</li></a> | ||
+ | <a href= "https://2015.igem.org/Code_Documentation#newspost"> <li>News Post</li></a> | ||
+ | </ul> | ||
+ | |||
+ | <br><br> | ||
+ | |||
+ | <h4>Using Classes </h4> | ||
<ul> | <ul> | ||
− | <a href= "https://2015.igem.org/Code_Documentation# | + | <a href= "https://2015.igem.org/Code_Documentation#clearclass"> <li>Clear</li></a> |
<a href= "https://2015.igem.org/Code_Documentation#button"> <li>Buttons</li></a> | <a href= "https://2015.igem.org/Code_Documentation#button"> <li>Buttons</li></a> | ||
− | |||
</ul> | </ul> | ||
</div> | </div> | ||
Line 49: | Line 59: | ||
</pre> | </pre> | ||
− | < | + | <div class="clear"></div> |
<p> To create a Page that will use a side menu use: </p> | <p> To create a Page that will use a side menu use: </p> | ||
Line 86: | Line 96: | ||
</html> | </html> | ||
</pre> | </pre> | ||
− | |||
− | |||
<div class="clear"></div><div class="clear"></div> | <div class="clear"></div><div class="clear"></div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <p> | + | |
− | < | + | <h3 id="links">Links</h3> |
− | + | <p> Regular links </p> | |
− | + | <a href="link"> text </a> | |
− | + | <pre> | |
− | </a> | + | <a href="link"> link text </a> |
</pre> | </pre> | ||
Line 110: | Line 113: | ||
− | <h3 id=" | + | <h3 id="tables"> 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 159: | Line 148: | ||
+ | <div class="clear"></div><div class="clear"></div> | ||
+ | <h3 id="newspost"> Creating a News post on the Main Page</h3> | ||
+ | <pre><div class="newsItem"> | ||
+ | <div class="newsDate"> Day/Month</div> | ||
+ | <h5>Title of your post</h5> | ||
+ | <p>The text will go here </p> | ||
+ | </div> | ||
+ | </pre> | ||
− | < | + | |
− | < | + | <div class="clear"></div><div class="clear"></div> |
− | < | + | |
− | < | + | |
− | < | + | <div class="clear"></div><div class="clear"></div> |
+ | |||
+ | <h3 id="clearclass">Clear</h3> | ||
+ | <p>Clear class helps add vertical spacing</p> | ||
+ | <pre><div class="clear"></div> | ||
</pre> | </pre> | ||
+ | <div class="clear"></div><div class="clear"></div> | ||
+ | <h3 id="button"> Creating a Button</h3> | ||
+ | <P> Buttons will align center and will display: </p> | ||
+ | <a href=""><div class="button"> | ||
+ | NAME BUTTON | ||
+ | </div></a> | ||
+ | |||
+ | <p> To create a button use: </p> | ||
+ | <pre><a href="Your link goes here "> | ||
+ | <div class="button"> | ||
+ | TITLE GOES HERE | ||
+ | </div> | ||
+ | </a> | ||
+ | </pre> | ||
<!-- end of content ----------------------------------------> | <!-- end of content ----------------------------------------> | ||
</div> | </div> |
Revision as of 15:00, 19 March 2015
This page documents and explains the CSS and HTML used in the 2015 site.
Creating a Page
To create a full width page, use:
{{2015Top}} <html> <div id="fullWidth"> <!-- alert message, the text can be edited ----> <div id="alertMessage"> Please note that the information on this page is information migrated from 2014.igem.org. <br>iGEM HQ is currently working on updating this information for the iGEM 2015 competition. </div> <!-- start of content ----------------------------------------> ********** Your html should be placed here. ********** <!-- end of content ----------------------------------------> </div> <div class="clear"></div> </html> {{2015Bottom}}<html> </div> </html>
To create a Page that will use a side menu use:
{{2015Top}} <html> <div id="leftColumn"> <h4>On this page </h4> <ul> <a href="You link goes here"> <li>Name goes here </li></a> <a href="You link goes here"> <li>Name goes here </li></a> <a href="You link goes here"> <li>Name goes here </li></a> </ul> </div> <div id="rightColumn"> <!-- alert message, the text can be edited ----> <div id="alertMessage"> Please note that the information on this page is information migrated from 2014.igem.org. <br>iGEM HQ is currently working on updating this information for the iGEM 2015 competition. </div> <!-- start of content ----------------------------------------> ********** Your html should be placed here. ********** <!-- end of content ----------------------------------------> </div> <div class="clear"></div> </html> {{2015Bottom}}<html> </div> </html>
Links
Regular links
text<a href="link"> link text </a>
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 |
To create a table use the following html code
<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>
Creating a News post on the Main Page
<div class="newsItem"> <div class="newsDate"> Day/Month</div> <h5>Title of your post</h5> <p>The text will go here </p> </div>
Clear
Clear class helps add vertical spacing
<div class="clear"></div>
Creating a Button
Buttons will align center and will display:
To create a button use:
<a href="Your link goes here "> <div class="button"> TITLE GOES HERE </div> </a>