Difference between revisions of "TemplateforTeams"

Line 1: Line 1:
−
<html>
+
<html>
−
<!-- The styling for the website is placed here -->
+
  
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 +
<html>
 +
 +
<!-- The styling for the website is placed here -->
 +
<head>
 
 
−
<!-- start of css -->
+
<!-- start of css -->
−
<style type="text/css">
+
<style type="text/css">
 
 
 
/* Clear the default wiki settings */
 
/* Clear the default wiki settings */
 
 
−
/* Remove footer, catlinks and logos */
+
/* Remove footer, catlinks and logos */
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading {
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading {
−
display: none;
+
display: none;
−
}
+
}
 
 
 +
/* set up a white background */
 +
body {
 +
width: 100%;
 +
height: 100%;
 +
background-color: #fff;
 +
}
  
−
body {
+
/*-- Make page full width and remove borders */
−
width: 100%;  
+
#globalWrapper, #content {
−
height: 100%;  
+
width: 100%;  
−
  background-color: #fffff;
+
height: 100%;
−
}
+
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
  
−
/*-- Make page full width and remove borders */
+
−
#globalWrapper, #content {  
+
/*Clear wiki default settings for the top part and create mock "black navigation bar" */
−
width: 100%;  
+
#top-section {
−
height: 100%;
+
background-color: #383838;
−
border: 0px;
+
border: 0 none;
−
background-color: transparent;
+
height: 14px;
−
margin: 0px;
+
z-index: 100;
−
padding: 0px;
+
top: 0;
−
}
+
position: fixed;
 +
width: 100%;
 +
margin:auto;
 +
}
 +
 
 +
 
 +
/* Create layout divs */
 +
 
 +
/* General content wrap */
 +
#contentWrap { 
 +
width: 975px;
 +
height: auto;
 +
margin-left: auto;
 +
margin-right: auto;
 +
padding-top: 5px;
 +
}
 +
 
 +
#fullWidthBanner {
 +
margin:auto;
 +
width: 975px;
 +
z-index:100;
 +
}
 +
 
 +
#leftColumn {
 +
background-color: #d3d3d3;
 +
width: 215px;
 +
height: 100%;
 +
float: left;
 +
padding: 15px 5px 5px 5px;
 +
border-radius: 5px;
 +
margin-top: 10px;
 +
}
 +
 
 +
#rightColumn {
 +
background-color: #fff;
 +
width: 740px;
 +
height: 100%;
 +
padding: 5px 5px 5px 5px;
 +
float: left;
 +
}
 +
 
 +
#featureBoxLeft {
 +
background-color: #ffffff;
 +
padding: 5px 10px 10px 10px;
 +
margin: 0px 10px 20px 10px;
 +
border: 1px solid #cccccc;
 +
border-radius: 5px;
 +
}
 +
 
 +
 
 +
.fullWidthRight {
 +
background-color: #ffffff;
 +
padding: 5px 10px 10px 10px;
 +
margin-bottom: 5px;
 +
}
 +
 
 +
 
 +
.smallBlockRight{
 +
margin-bottom: 5px;
 +
padding: 5px 20px 10px 20px;
 +
width : 200px;
 +
float: left;
 +
}
 +
 
 +
.newsItem {
 +
background-color: #fff;
 +
padding: 5px 20px 5px 20px;
 +
border: 1px solid #cccccc;
 +
margin-bottom: 5px;
 +
border-radius: 5px;
 +
}
 +
 
 +
.newsDate {
 +
font-style: italic;
 +
display: inline-block;
 +
color: #383838;
 +
float: right;
 +
padding: 7px 0px 10px 15px;
 +
}
 +
 
 +
.clear {
 +
    clear: both;
 +
}
 +
 
 +
        .button {
 +
    width: 120px;
 +
    border: 1px solid #cccccc;
 +
    background-color: fff;
 +
    height: 30px;
 +
    text-align: center;
 +
        border-radius: 5px;
 +
        padding-top: 10px;
 +
        margin: auto;
 +
    }       
 +
 
 +
    .button:hover {
 +
    background-color: #c1dfa6;
 +
    }
 +
 
 +
/* general styling */
 +
 
 +
/* Titles are switched to Arial Black with no line decoration */
 +
h1, h2, h3, h4, h5 {
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
border-bottom:none;
 +
font-weight: bold;
 +
color: #434343;
 +
}
 +
 
 +
/* Establish font size and family for all text */
 +
p {
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
font-size: 12px;
 +
}
 +
 
 +
/*styling for the links*/
 +
#rightColumn a, #featureBoxLeft a {
 +
color:#3aa76c;
 +
font-weight: bold;
 +
text-decoration: none;
 +
opacity: 1.0;
 +
    filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
 
 +
#rightColumn a:hover, #featureBoxLeft a:hover {
 +
opacity: 0.4;
 +
filter: alpha(opacity=40); /* For IE8 and earlier */
 +
}
 +
 
 +
#featureBoxLeft img {
 +
margin:auto;
 +
text-align: center;
 +
display: block;
 +
opacity: 1.0;
 +
filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
 
 +
#featureBoxLeft img:hover {
 +
opacity: 0.4;
 +
filter: alpha(opacity=40); /* For IE8 and earlier */
 +
}
 +
 
 +
 
 +
.smallBlockRight img {
 +
width:200px;
 +
height: 116px;
 +
padding-bottom: 5px;
 +
opacity: 1.0;
 +
filter: alpha(opacity=100); /* For IE8 and earlier */
 +
}
 +
 
 +
 
 +
.smallBlockRight img:hover {
 +
opacity: 0.4;
 +
filter: alpha(opacity=40); /* For IE8 and earlier */
 +
}
 +
 
 +
 
 +
 
 +
/* menu styling */
 +
#menuWrap {
 +
background: #d3d3d3;
 +
padding: 5px 10px 10px 10px;
 +
-moz-box-shadow: 0 5px 15px #cccccc;
 +
-webkit-box-shadow: 0 5px 15px #cccccc;
 +
}
 +
 
 +
/*styling for the menu header */
 +
.accordion-header {
 +
background: #f2f2f2
 +
margin: 5px 0 0 0;
 +
padding: 5px 20px;
 +
border: 1px solid #cccccc;
 +
cursor: pointer;
 +
color: #434343;
 +
border-radius: 5px;
 +
-moz-box-shadow: 0 5px 15px #cccccc;
 +
-webkit-box-shadow: 0 5px 15px #cccccc;
 +
}
 +
 
 +
/* switches background color to green */
 +
.active-header {
 +
background: #95cea0;
 +
}
 +
 +
/* switches background color to light green */
 +
.active-header:hover {
 +
background: #c1dfa6;
 +
}
 +
 
 +
/* switches background color to default gray */
 +
.inactive-header {
 +
background: #f2f2f2;
 +
}
 +
 
 +
/* switches background color to light green */
 +
.inactive-header:hover {
 +
background: #c1dfa6;
 +
}
 +
 
 +
/* styling for the submenus */
 +
.accordion-content {
 +
display: none;
 +
padding: 10px 20px 10px 20px;
 +
margin-bottom: 10px;
 +
background: #ffffff;
 +
border: 1px solid #cccccc;
 +
border-top: 0;
 +
border-radius: 5px;
 +
color: #434343;
 +
-moz-box-shadow: 0 5px 15px #cccccc;
 +
-webkit-box-shadow: 0 5px 15px #cccccc;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
}
 +
 
 +
 +
/*styling the links inside the submenus */
 +
ul.submenuoptions {
 +
                                list-style: none;
 +
                                margin: 0px;
 +
                                margin-left: -15px;
 +
                                padding: 0px;
 +
}
 +
 
 +
/* change the color and styling of the links */
 +
ul.submenuoptions li a{
 +
color: #383838;
 +
font-size: 12px;
 +
font-weight: bold;
 +
padding-left: 15px;
 +
border-radius: 5px;
 +
}
 +
 
 +
/* change background color on hover */
 +
ul.submenuoptions li:hover a, ul.submenuoptions li:hover {
 +
background-color: #c1dfa6;
 +
text-decoration: none;
 +
border-radius: 5px;
 +
}
 +
 
 +
</style>
 +
<!-- end of css -->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!-- jquery -->
 +
 
 +
<script ="text/javascript">
 +
$(document).ready(function() {
 +
//Add Inactive Class To All Accordion Headers
 +
$('.accordion-header').toggleClass('inactive-header');
 
 
−
/*Clear wiki default settings for the top part and create mock "black navigation bar" */
+
//Set The Accordion Content Width
−
#top-section {
+
var contentwidth = $('.accordion-header').width();
−
background-color: #000000;
+
$('.accordion-content').css({'width' : contentwidth });
−
border: 0 none;
+
−
height: 240px;
+
//Open The First Accordion Section When Page Loads
−
z-index: 100;
+
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
−
top: 0;
+
$('.accordion-content').first().slideDown().toggleClass('open-content');
−
position: fixed;
+
−
width: 100%;  
+
// The Accordion Effect
−
margin:auto;
+
$('.accordion-header').click(function () {
−
}
+
if($(this).is('.inactive-header')) {
 +
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
 +
$(this).toggleClass('active-header').toggleClass('inactive-header');
 +
$(this).next().slideToggle().toggleClass('open-content');
 +
}
 +
 +
else {
 +
$(this).toggleClass('active-header').toggleClass('inactive-header');
 +
$(this).next().slideToggle().toggleClass('open-content');
 +
}
 +
});
 +
 +
return false;
 +
});
  
 +
$(".button").click(function(){
 +
    if($(this).find("a").length){
 +
        window.location.href = $(this).find("a:first").attr("href");
 +
    }
 +
});
  
−
#mainContainer { 
 
−
width: 975px;
 
−
height: auto;
 
−
margin-left: auto;
 
−
margin-right: auto;
 
−
padding-top: 5px;
 
−
}
 
  
  
Line 55: Line 333:
  
  
−
<div id="mainContainer">
 
  
 +
</script>
  
 +
<!-- end of html -->
  
−
</div>
 
  
  
  
  
 +
<!-- menu css -->
 +
<div id ="contentWrap">
 +
<div id="fullwidthBanner">
 +
<img src="https://static.igem.org/mediawiki/2014/c/cb/Demobannerimage2.jpg" width="970px">
 +
</div>
 +
 +
<div class="clear"></div>
 +
<div id="leftColumn">
 +
<!-- this is where the menu and feature box go -->
 +
 +
 +
<div id="featureBoxLeft">
 +
<h3>Registrations ends in one week!</h3> 
 +
<a href=""> <img src="https://static.igem.org/mediawiki/2014/4/4c/Featureboxdemo.jpg" height="180px" > </a>
 +
<p>Registration ends March 31st. More information: <a href="">Registration </a></p>
 +
</div>
 +
 +
<div class="clear"></div>
 +
 +
 +
<div id="menuWrap">
 +
 +
<h3 class="accordion-header">iGEM</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="https://2014.igem.org/sifuentes_anita3">What is iGEM?</a></li>
 +
<li><a href="www.html">Previous Competitions</a></li>
 +
<li><a href="www.html">iGEM Headquarters</a></li>
 +
<li><a href="www.html">Press Kit</a></li>
 +
<li><a href="www.html">Join our Newsletter</a></li>
 +
<li><a href="www.html">Sponsor iGEM</a></li>
 +
</ul>
 +
</div>
 +
 +
<h3 class="accordion-header">Starting a Team</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="https://2014.igem.org/Sifuentes_contentpage3">General iGEM Guide</a></li>
 +
<li><a href="www.html">General Requirements</a></li>
 +
<li><a href="www.html">Calendar of Events</a></li>
 +
</ul>
 +
</div>
 +
 +
<h3 class="accordion-header">Registration</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="www.html">How to register</a></li>
 +
<li><a href="www.html">Fees</a></li>
 +
<li><a href="www.html">Funding</a></li>
 +
<li><a href="www.html">Tracks</a></li>
 +
<li><a href="www.html">New Tracks</a></li>
 +
<li><a href="www.html">High School</a></li>
 +
</ul>
 +
</div>
 +
 +
<h3 class="accordion-header">Summer Work</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="www.html">Registry at a glance</a></li>
 +
<li><a href="www.html">2015 DNA distribution</a></li>
 +
 +
</ul>
 +
</div>
 +
 +
 +
<h3 class="accordion-header">2015 Teams</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="www.html">Wikis</a></li>
 +
<li><a href="www.html">List</a></li>
 +
<li><a href="www.html">Parts</a></li>
 +
<li><a href="www.html">Tracks</a></li>
 +
<li><a href="www.html">Meetups</a></li>
 +
<li><a href="www.html">Community page</a></li>
 +
</ul>
 +
</div>
 +
 +
<h3 class="accordion-header">Requirements</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="">General Requirements</a></li>
 +
<li><a href="www.html">Wiki how-to</a></li>
 +
<li><a href="www.html">Poster Guidelines</a></li>
 +
<li><a href="www.html">Presentation Guidelines</a></li>
 +
<li><a href="www.html">Two Page Summary</a></li>
 +
<li><a href="www.html">Safety Requirements</a></li>
 +
 +
</ul>
 +
</div>
 +
 +
<h3 class="accordion-header">Safety</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="www.html">Introduction</a></li>
 +
<li><a href="www.html">Risk Groups</a></li>
 +
<li><a href="www.html">Biosafety Levels</a></li>
 +
<li><a href="www.html">Safety Committee</a></li>
 +
<li><a href="www.html">Deadlines</a></li>
 +
<li><a href="www.html">Help</a></li>
 +
<li><a href="www.html">About our Lab</a></li>
 +
<li><a href="www.html">Safety Form</a></li>
 +
</ul>
 +
</div>
 +
 +
 +
<h3 class="accordion-header">Judging</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="www.html">Introduction</a></li>
 +
<li><a href="www.html">Medals and Awards</a></li>
 +
<li><a href="www.html">Deadlines</a></li>
 +
<li><a href="www.html">Judging Handbook</a></li>
 +
<li><a href="www.html">Judging Form</a></li>
 +
</ul>
 +
</div>
 +
 +
<h3 class="accordion-header">Giant Jamboree</h3>
 +
<div class="accordion-content">
 +
<ul class="submenuoptions">
 +
<li><a href="www.html">General Information</a></li>
 +
<li><a href="www.html">Event Website</a></li>
 +
</ul>
 +
</div>
 +
 +
 +
 +
</div> <!-- this closes the menu div -->
 +
 +
</div> <!-- this closes the content wrap div -->
 +
     
 +
 +
 +
 +
</div>
 
</html>
 
</html>

Revision as of 21:15, 3 February 2015