Code Documentation
Creating Content
Classes
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 class="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 class="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>
Text
To create text simply call the < p > tag:
<p> Lorem ipsum dolor sit amet, vis in paulo munere, mel commune ocurreret ex. </p>
List
To create a simple list you will need to open a < ul > tag and then create < li > list item for every bulleted item you wish to create. You can also use < ol > (ordered list) instead of < ul > (unordered list) to replace the bullet points with numbers
<ol> <li> List item 1 </li> <li> List item 2 </li> <li> List item 3 </li> </ol>
Lists can also be nested within themselves, here is an example:
<ul> <li> List item 1 <ol> <li> sublist item 1 </li> <li> sublist item 2 </li> <li> sublist item 3 </li> </ol> </li> </ul>
Creating a News post
<div class="newsItem"> <div class="newsDate"> Day/Month</div> <h5>Title of your post</h5> <p>The text will go here </p> </div>
Title of your post
The text will go here
Calendar Events
These classes are used in the calendar page to frame different events and dates. Every month has a different color
<div class="calendarDate_Feb"><p> Month day </p> </div> <div class="calendarEvent">><h4>Your event </h4> </div>
February
March
April
June
July
August
September
Clear
Clear class helps add vertical spacing
<div class="clear"></div>
Creating a Button
To create a button use:
<a href="Your link goes here "> <div class="button"> TITLE GOES HERE </div> </a>
Images with links
Make images change when hovering, this should be used when the image links to another page.
<img class="imageHover" src=" image address ">
Highlight Text
This class will make your text be red and bold.
<p class="highlightText">Your highlighted text</p>
Your highlighted text
Alert Message
Create an alert message for important information
<div class="alertMessage"><p>Place your message here.</p></div>
Place your message here.
Highlight Boxes
There are two types of boxes that can be created to highlight a particular part of the page.
Highlight box A creates a box that will float on the right side of the page
<div class="highlightBoxA"><p>Place your message here.</p></div>
Title
Place your message here.
Highlight box B creates a box that will float center
<div class="highlightBoxB"><p>Place your message here.</p></div>
Title
Place your message here.
Click-to-Expand Boxes
You can enclose supplementary information or details in a "click-to-expand" box, where the user can click to show or hide the inner content:
<div class="highlightBoxB"> <a class="click_expand">Click here to read more about X...</a> <div> <p>The contents of this inner <div> will be shown and hidden.</p> </div> </div>
The contents of this inner <div> will be shown and hidden.
These are best used in combination with class highlightBoxB, described above. However, strictly speaking, the only requirement is that you have an <a class="click_expand"> element followed immediately by the inner <div> that is to be shown/hidden.
If the user has JavaScript disabled, the inner div content will simply stay visible all the time.
NOTE: we expect this click-to-expand box to be obsoleted by jQuery UI, which will come along with the expected MediaWiki upgrade. It will not stop working — there will just be something better available.
Centering Images
Centers an images to the middle of the page
<div class="centerImages"><img src=" your image " ></div>
Pop up whys
The whypop class helps provide further explanation.
To use the class, you will need to create a separate page where you write the explanation, please remember to create it under the
" More/ " namespace.
It needs to be created under this name space since you will need to provide it later : data-poptitle="/More/ Your_Page_Name"
Here is an example https://2015.igem.org/More/RiskGroup34
in this example, data-poptitle will require you to write: data-poptitle="/More/RiskGroup34"
<span> Text before you call the class </span> <span class="pop_why" data-poptitle="/More/Your_Page_Name">?</span>?