Code Documentation

{{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>

Classes

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>

Day/Month

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

An empty div with class="clear" will create an invisible element that forms a clean break between floating elements and content below them on the page. It also helps add vertical spacing (20px).

<div class="clear"></div>

If you want the clearing effect but without the added vertical spacing, use class="clear-noheight":

<div class="clear-noheight"></div>

Don't put any content inside these divs. (You generally wouldn't want to, anyway!)

Creating a Button

To create a button use:

<a href="Your link goes here ">
    <div class="button"> 	
        TITLE GOES HERE  
    </div>
</a>

NAME BUTTON

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. Both of these are "floating" boxes, meaning that surrounding text will wrap around them.

Highlight box A creates a box that will float on the right side of the page

<div class="highlightBoxA">
<h4>Title</h4>
<p>Place your message here.</p>
</div>
<p>Surrounding text will wrap around the highlight box like this, 
if you just put the box right before the text of interest [...]</p>

Title

Place your message here.

Surrounding text will wrap around the highlight box like this, if you just put the box right before the text of interest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus a ipsum blandit congue. In condimentum magna maximus, euismod dui id, porta sapien. Curabitur at fringilla nulla. Aliquam facilisis ex sed fermentum imperdiet. Sed feugiat pretium metus, vel ornare nulla semper eget. Morbi vehicula laoreet risus ac tristique. Curabitur porta ante id condimentum ultricies. Proin suscipit et nisl et rutrum. Aenean non tincidunt est, pellentesque rutrum tellus. Donec id nulla viverra erat tristique vulputate vitae ut nisl.

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.

Two-Column Divs (using display: inline-block)

Use two divs with class="twoColumnInline" to create a plain two-column display. It comes with a one-pixel gray border, which you probably want to replace with your own border style (or "border: none;" for no border at all). Do not leave any space, even a newline, between the closing tag of the first div and the opening tag of the second! Otherwise they will not appear side-by-side.

<div class="twoColumnInline">
	<p>This div appears on the left. Lorem ipsum dolor sit amet [...]</p>
</div><div class="twoColumnInline" style="border: 3px solid green;">
	<p>This div appears on the right. Notice that its opening tag immediately follows 
	the closing tag of the previous div. It also has a custom border style to replace 
	the default simple gray line.</p>
</div>

This div appears on the left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus a ipsum blandit congue. In condimentum magna maximus, euismod dui id, porta sapien. Curabitur at fringilla nulla. Aliquam facilisis ex sed fermentum imperdiet. Sed feugiat pretium metus, vel ornare nulla semper eget. Morbi vehicula laoreet risus ac tristique. Curabitur porta ante id condimentum ultricies. Proin suscipit et nisl et rutrum. Aenean non tincidunt est, pellentesque rutrum tellus. Donec id nulla viverra erat tristique vulputate vitae ut nisl.

This div appears on the right. Notice that its opening tag immediately follows the closing tag of the previous div. It also has a custom border style to replace the default simple gray line.

twoColumnInline is an alternative to using floats or tables. Surrounding text will NOT wrap around these, even if there is space. Note that this paragraph does not penetrate into the space below the right column, even though the right column is much shorter than the left. (Clear is not necessary for this effect.)

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. The Javascript that runs these is in the 2015Bottom template.

<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>

Click here to read more about X...

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>

?