Difference between revisions of "Code Documentation"
| Line 139: | Line 139: | ||
<pre><div class="newsItem"> | <pre><div class="newsItem"> | ||
| − | + | <div class="newsDate"> Day/Month</div> | |
| − | + | <h5>Title of your post</h5> | |
| − | + | <p>The text will go here </p> | |
</div> | </div> | ||
Revision as of 22:41, 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. **********
Place all your content within the paragraph tag (
) to preserve proper spacing.
- To create a bulleted list, use the UL (unordered list) tag. Each item should use the LI tag
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>
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>
powered by MediaWiki