Difference between revisions of "Code Documentation"

Revision as of 21:52, 30 January 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">

			<!-- this is where the submenu is placed -->	

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

powered by MediaWiki

@@ Line 41: / Line 41: @@
 <p> To create  a full width page, use: </p>
-<pre> &#60;!-- Call the styling template  ---&#62;
+<pre>{{2015CSS}}
- {{2015CSS}}
- &#60;!-- declare that you are using HTML  ---&#62;
 &#60;html&#62;
@@ Line 53: / Line 51: @@
 		&#60;div id="grayLine_Clear">&#60;/div&#62;
- &#60;!-- This declares that the page will be Full width (980px) --&#62;
 		&#60;div id="fullWidth"&#62;
@@ Line 62: / Line 58: @@
 	&#60;!-- start of content ----------------------------------------&#62;
           **********           Your html should be placed here.          **********
 	&#60;!-- end of content ----------------------------------------&#62;
@@ Line 76: / Line 74: @@
 <p> To create  a Page that will use a side menu use: </p>
-<pre> {{2015CSS}}
+<pre>{{2015CSS}}
 &#60;html&#62;
-	&#60;!-- change the page title --&#62;
+ &#60;!-- Here is where you change the title of page --&#62;
 	&#60;div id="pageTitle"&#62;
-		&#60;h2> Starting a team</h2&#62;
+		&#60;h2> Page Title</h2&#62;
 	&#60;/div>&#60;/div&#62;
 		&#60;div id="grayLine_Clear">&#60;/div&#62;
@@ Line 91: / Line 92: @@
 		&#60;div id="rightColumn"&#62;
-		&#60;!-- alert message, the text can be edited --&#62;
+		 &#60;!-- This is the alert message. You can edit the  text and remove once the page is ready--&#62;
 		&#60;div id="alertMessage"> &#60;p&#62; Please note that all information on this page is in a draft version.
                  &#60;br>Please check back often for details. &#60;/p&#62;&#60;/div&#62;
 	&#60;!-- start of content ----------------------------------------&#62;
           **********           Your html should be placed here.          **********
 	&#60;!-- end of content ----------------------------------------&#62;
 		&#60;/div&#62;
 		&#60;div class="clear">&#60;/div&#62;