Difference between revisions of "Code Documentation"

Line 4: Line 4:
  
 
<div id="leftColumn">
 
<div id="leftColumn">
−
                       <h4>On this page </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#page> <li>New Page</li></a>
+
                               <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>
−
                              <a href= "https://2015.igem.org/Code_Documentation#newspost"> <li>Posting News</li></a>
 
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 49: Line 59:
 
</pre>
 
</pre>
  
−
<br>
+
<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:
 
&#60;/html&#62;
 
&#60;/html&#62;
 
</pre>
 
</pre>
−
 
−
 
  
 
<div class="clear"></div><div class="clear"></div>
 
<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>&#60;a href="Your link goes here "&#62;
+
<h3 id="links">Links</h3>
−
    &#60;div class="button"&#62;
+
<p> Regular links </p>
−
        TITLE GOES HERE 
+
<a href="link"> text </a>
−
    &#60;/div&#62;
+
<pre>
−
&#60;/a&#62;
+
&#60;a href="link"&#62; link text &#60;/a&#62;
 
</pre>
 
</pre>
  
Line 110: Line 113:
  
  
−
<h3 id="newspost"> Creating a News post on the Main Page</h3>
+
<h3 id="tables"> Tables</h3>
−
 
+
−
<pre>&#60;div class="newsItem"&#62;
+
−
    &#60;div class="newsDate"&#62; Day/Month&#60;/div&#62;
+
−
        &#60;h5&#62;Title of your post&#60;/h5&#62;
+
−
        &#60;p&#62;The text will go here &#60;/p&#62;
+
−
&#60;/div&#62;
+
−
</pre>
+
−
 
+
−
 
+
−
<h4> Writing html  in 2015</h4>
+
−
<p>Text, tables, lists and links are already styled with help of 2015CSS template, </p>
+
−
 
+
−
 
+
−
<h3> Creating a table</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>&#60;div class="newsItem"&#62;
 +
    &#60;div class="newsDate"&#62; Day/Month&#60;/div&#62;
 +
        &#60;h5&#62;Title of your post&#60;/h5&#62;
 +
        &#60;p&#62;The text will go here &#60;/p&#62;
 +
&#60;/div&#62;
 +
</pre>
  
−
<h3>Links</h3>
+
 
−
<p> Regular links </p>
+
<div class="clear"></div><div class="clear"></div>
−
<a href="link"> text </a>
+
 
−
<pre>
+
 
−
&#60;a href="link"&#62; link text &#60;/a&#62;
+
<div class="clear"></div><div class="clear"></div>
 +
 
 +
<h3 id="clearclass">Clear</h3>
 +
<p>Clear class helps add vertical spacing</p>
 +
<pre>&#60;div class="clear"&#62;&#60;/div&#62;
 
</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>&#60;a href="Your link goes here "&#62;
 +
    &#60;div class="button"&#62;
 +
        TITLE GOES HERE 
 +
    &#60;/div&#62;
 +
&#60;/a&#62;
 +
</pre>
 
<!-- end of content ---------------------------------------->
 
<!-- end of content ---------------------------------------->
 
</div>
 
</div>

Revision as of 15:00, 19 March 2015

Creating Content



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

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:

NAME BUTTON

To create a button use: 

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