|
|
| Line 76: |
Line 76: |
| | <div id="alertMessage"> <p> Please note that all information on this page is in a draft version. | | <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> | | <br>Please check back often for details. </p></div> |
| − | <!-- start of content ----------------------------------------> | + | <!-- start of content ----------------------------------------> |
| − |
| + | |
| | ********** Your html should be placed here. ********** | | ********** Your html should be placed here. ********** |
| − |
| |
| | <!-- end of content ----------------------------------------> | | <!-- end of content ----------------------------------------> |
| | </div> | | </div> |
Revision as of 21:36, 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:
<![CDATA[
{{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:
<![CDATA[
{{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>
</xmp>
</p><p><br />
</p><p><br />
</p><p><br />
</p><p><br />
</p><p><br />
</p><p> </div>
</p>
<div class="clear"></div>
<p> </html>
<!--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.006 seconds
Real time usage: 0.015 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>
]]> 