Difference between revisions of "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>

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.

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

?

@@ Line 235: / Line 235: @@
 <div class="clear"></div><div class="clear"></div>
 <h3 id="clearclass">Clear</h3>
-<p>Clear class helps add vertical spacing</p>
+<p>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).</p>
 <pre>&#60;div class="clear"&#62;&#60;/div&#62;
 </pre>
+<p>If you want the clearing effect but without the added vertical spacing, use class="clear-noheight":</p>
+<pre>&lt;div class="clear-noheight"&gt;&lt;/div&gt;</pre>
+<p>Don't put any content inside these divs. (You generally wouldn't want to, anyway!)</p>
 <div class="clear"></div><div class="clear"></div>