Difference between revisions of "Code Documentation"

Line 62: Line 62:
 
<p> For a full width page with a side menu: </p>
 
<p> For a full width page with a side menu: </p>
 
<xmp>  
 
<xmp>  
−
 
+
{{2015CSS}}
 +
<html>
 +
<!-- change the page title -->
 +
<div id="pageTitle">
 +
<h2> Starting a team</h2>
 +
</div></div>
 +
<div id="grayLine_Clear"></div>
 +
<div id="leftColumn">
 +
<!-- this is where the submenu is placed -->
 +
</div>
 +
<div id="rightColumn">
 +
<!-- alert message, the text can be edited -->
 +
<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>
 
</xmp>
 
</xmp>
  

Revision as of 21:37, 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

Top part of the page

For a full width page with no side menu:

{{2015CSS}} <html> <!-- change the page title --> <div id="pageTitle"> <h2>Poster Guidelines</h2> </div></div> <div id="grayLine_Clear"></div> <!-- this is where the content is placed ---> <div id="fullWidth"> <!-- alert message, the text can be edited --> <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 ---------------------------------------->

For a full width page with a side menu:

{{2015CSS}} <html> <!-- change the page title --> <div id="pageTitle"> <h2> Starting a team</h2> </div></div> <div id="grayLine_Clear"></div> <div id="leftColumn"> <!-- this is where the submenu is placed --> </div> <div id="rightColumn"> <!-- alert message, the text can be edited --> <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> <!--css: footer styling --> <style type="text/css"> .footerWrap { background-color: #f2f2f2; width: 980px; height: 125px; } #insideFooter { float:left; width: 170px; padding: 10px 10px 10px 10px; border-right: 1px solid #ccc; height: 103px; margin: auto; background-color: #f2f2f2; } .footerWrap ul li{ font-family: "Arial", Helvetica, sans-serif; font-size: 11px; list-style:none; } .insideFooter img{ margin: auto; text-align:center; display:block; } .footerWrap ul li a{ font-weight: bold; color: #434343; text-decoration:none; } .footerWrap ul li a:hover{ color:#3aa76c; text-decoration:none; } </style> <!-- footer links --> <div class="footerWrap"> <div style="height:2px; background-color: #ccc; width:980px"></div> <div style="clear:both;"></div> <div id="insideFooter"> <ul> <li><a href="https://igem.org/About">About</a></li> <li><a href="https://igem.org/Contact">Contact</a></li> <li><a href="https://igem.org/Sponsorship"> Sponsor</a></li> <li><a href="http://parts.igem.org/Main_Page">Registry</a></li> <li><a href="https://igem.org/Main_Page"> igem.org</a></li> </ul> </div> <div id="insideFooter"> <ul> <li><a href="https://2015.igem.org/Requirements">Requirements</a></li> <li><a href="https://2015.igem.org/Calendar_of_Events">Calendar</a></li> <li><a href="https://2015.igem.org/Meetups">Meetups</a></li> <li><a href="https://2015.igem.org/Giant_Jamboree">Giant Jamboree </a></li> </ul> </div> <div id="insideFooter"> <ul> <li><a href="">Login </a></li> <li><a href="https://2015.igem.org/Special:Upload">Upload Files</a> </li> <li><a href="https://2015.igem.org/Special:RecentChanges">Recent Changes</a></li> <li><a href="https://2015.igem.org/Special:SpecialPages">Special Pages</a></li> </ul> </div> <div id="insideFooter"> <ul> <li><a href="https://igem.org/Press_Kit">Press Kit </a></li> <li><a href="https://igem.org/Newsletters">Newsletter</a></li> </ul> </div> <div id="insideFooter" style="border-right: none; width:177px;"> <img src="http://i.creativecommons.org/l/by/3.0/88x31.png" > <p> powered by MediaWiki </p> </div> </div> </div> &lt;/xmp&gt; </p><p><br /> </p><p><br /> </p><p><br /> </p><p><br /> </p><p><br /> </p><p> &lt;/div&gt; </p> <div class="clear"></div> <p> &lt;/html&gt; <!--css: footer styling --> <style type="text/css"> .footerWrap { background-color: #f2f2f2; width: 980px; height: 125px; } #insideFooter { float:left; width: 170px; padding: 10px 10px 10px 10px; border-right: 1px solid #ccc; height: 103px; margin: auto; background-color: #f2f2f2; } .footerWrap ul li{ font-family: "Arial", Helvetica, sans-serif; font-size: 11px; list-style:none; } .insideFooter img{ margin: auto; text-align:center; display:block; } .footerWrap ul li a{ font-weight: bold; color: #434343; text-decoration:none; } .footerWrap ul li a:hover{ color:#3aa76c; text-decoration:none; } </style> <!-- footer links --> <div class="footerWrap"> <div style="height:2px; background-color: #ccc; width:980px"></div> <div style="clear:both;"></div> <div id="insideFooter"> <ul> <li><a href="https://igem.org/About">About</a></li> <li><a href="https://igem.org/Contact">Contact</a></li> <li><a href="https://igem.org/Sponsorship"> Sponsor</a></li> <li><a href="http://parts.igem.org/Main_Page">Registry</a></li> <li><a href="https://igem.org/Main_Page"> igem.org</a></li> </ul> </div> <div id="insideFooter"> <ul> <li><a href="https://2015.igem.org/Requirements">Requirements</a></li> <li><a href="https://2015.igem.org/Calendar_of_Events">Calendar</a></li> <li><a href="https://2015.igem.org/Meetups">Meetups</a></li> <li><a href="https://2015.igem.org/Giant_Jamboree">Giant Jamboree </a></li> </ul> </div> <div id="insideFooter"> <ul> <li><a href="">Login </a></li> <li><a href="https://2015.igem.org/Special:Upload">Upload Files</a> </li> <li><a href="https://2015.igem.org/Special:RecentChanges">Recent Changes</a></li> <li><a href="https://2015.igem.org/Special:SpecialPages">Special Pages</a></li> </ul> </div> <div id="insideFooter"> <ul> <li><a href="https://igem.org/Press_Kit">Press Kit </a></li> <li><a href="https://igem.org/Newsletters">Newsletter</a></li> </ul> </div> <div id="insideFooter" style="border-right: none; width:177px;"> <img src="http://i.creativecommons.org/l/by/3.0/88x31.png" > <p> powered by MediaWiki </p> </div> </div> </div> </p> <!-- NewPP limit report CPU time usage: 0.007 seconds Real time usage: 0.059 seconds Preprocessor visited node count: 22/1000000 Preprocessor generated node count: 118/1000000 Post‐expand include size: 123/2097152 bytes Template argument size: 0/2097152 bytes Highest expansion depth: 2/40 Expensive parser function count: 0/100 --> </div> <div class="visualClear"></div> </div> </div> </div> </body> </html>