Difference between revisions of "Code Documentation"

Line 144: Line 144:
  
 
<h3> Creating a table</h3>
 
<h3> Creating a table</h3>
 +
<p> Tables created within in a page already have styling and will display:</p>
 +
<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>
 +
 
<p> To create a table use the following html code </p>
 
<p> To create a table use the following html code </p>
 
<pre>
 
<pre>
Line 164: Line 180:
  
  
−
<p> Tables created within in a page already have styling and will display:</p>
 
−
<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>
 
  
  

Revision as of 19:32, 3 February 2015

CSS and HTML used in iGEM 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: 

{{2015CSS}}
<html>                                       


 <!-- Here is where you change the title of page -->
	<div id="pageTitle">
		<h2> Page Title</div>

		<div id="grayLine_Clear"></div>
		<div id="fullWidth">

		 <!-- This is the alert message. You can edit the  text and remove once the page is ready-->
		<div id="alertMessage"> <p> Please note that all information on this page is in a draft version.
                <br>Please check back often for details. </p></div>

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


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

	<!-- end of content ---------------------------------------->
		</div>
		<div class="clear"></div>
		</html> {{2015Footer}}<html>
	</div>
</html>

To create a Page that will use a side menu use: 

{{2015CSS}}
<html>                                       


 <!-- Here is where you change the title of page -->
	<div id="pageTitle">
		<h2> Page Title</div>

		<div id="grayLine_Clear"></div>

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

		 <!-- This is the alert message. You can edit the  text and remove once the page is ready-->
		<div id="alertMessage"> <p> Please note that all information on this page is in a draft version.
                <br>Please check back often for details. </p></div>

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


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


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

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

Adding HTML content

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

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>

Special highlighted links (used to further explain why of a decision

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

powered by MediaWiki