Difference between revisions of "Code Documentation"

Line 17: Line 17:
  
 
<p> To create  a full width page, use: </p>
 
<p> To create  a full width page, use: </p>
−
<pre>{{2015CSS}}
+
<pre>{{2015Top}}
 
&#60;html&#62;                                       
 
&#60;html&#62;                                       
  
−
 
−
&#60;!-- Here is where you change the title of page --&#62;
 
−
&#60;div id="pageTitle"&#62;
 
−
&#60;h2> Page Title</h2&#62;       
 
−
&#60;/div>&#60;/div&#62;
 
−
 
−
&#60;div id="grayLine_Clear">&#60;/div&#62;
 
 
&#60;div id="fullWidth"&#62;
 
&#60;div id="fullWidth"&#62;
  
Line 43: Line 36:
 
&#60;/div&#62;
 
&#60;/div&#62;
 
&#60;div class="clear">&#60;/div&#62;
 
&#60;div class="clear">&#60;/div&#62;
−
&#60;/html&#62; {{2015Footer}}&#60;html&#62;
+
&#60;/html&#62; {{2015Bottom}}&#60;html&#62;
 
&#60;/div&#62;
 
&#60;/div&#62;
 
&#60;/html&#62;
 
&#60;/html&#62;
Line 51: Line 44:
  
 
<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>
−
<pre>{{2015CSS}}
+
<pre>{{2015Top}}
 
&#60;html&#62;                                       
 
&#60;html&#62;                                       
  
−
 
−
&#60;!-- Here is where you change the title of page --&#62;
 
−
&#60;div id="pageTitle"&#62;
 
−
&#60;h2> Page Title</h2&#62;       
 
−
&#60;/div>&#60;/div&#62;
 
−
 
−
&#60;div id="grayLine_Clear">&#60;/div&#62;
 
  
 
&#60;div id="leftColumn"&#62;
 
&#60;div id="leftColumn"&#62;
Line 89: Line 75:
 
&#60;/div&#62;
 
&#60;/div&#62;
 
&#60;div class="clear">&#60;/div&#62;
 
&#60;div class="clear">&#60;/div&#62;
−
&#60;/html&#62; {{2015Footer}}&#60;html&#62;
+
&#60;/html&#62; {{2015Bottom}}&#60;html&#62;
 
&#60;/div&#62;
 
&#60;/div&#62;
 
&#60;/html&#62;
 
&#60;/html&#62;
Line 190: Line 176:
 
</div>
 
</div>
 
<div class="clear"></div>
 
<div class="clear"></div>
−
</html> {{2015Footer}}<html>
+
</html> {{2015Bottom}}<html>
 
</div>
 
</div>
  
 
</html>
 
</html>

Revision as of 21:41, 9 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.
		 <br>When that process has been completed, this notice will be removed. </p></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.
		 <br>When that process has been completed, this notice will be removed. </p></div>


	<!-- start of content ----------------------------------------> 


         **********           Your html should be placed here.          **********


	<!-- end of content ---------------------------------------->

		</div>
		<div class="clear"></div>
		</html> {{2015Bottom}}<html>
	</div>
</html>

Creating a Button

Buttons will align center and will display:

NAME BUTTON

To create a button use: 

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

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>

Writing html in 2015

Text, tables, lists and links are already styled with help of 2015CSS template,

Creating a table

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>

Links

Regular links

text 
<a href="link"> link text </a>

WHY links (used to further explain reasons behind something)

why? 
<a href="https://2015.igem.org/More/__choose a name__" class="why"> why? </a>