Difference between revisions of "Template:MIT-Header"

 
(109 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
  
Line 5: Line 6:
 
<style type="text/css">
 
<style type="text/css">
  
−
#headerimage {
+
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
−
position:relative;
+
 
−
top: 20px;
+
.topWikiNavBackground {
−
background-image: url("https://static.igem.org/mediawiki/2015/6/63/Team-MIT-Header2.png");
+
    height:18px;
 +
    margin-top: -32px;
 +
    background-color:transparent;
 +
}
 +
 
 +
.headerimage {
 +
position: relative;
 +
top:26px;
 +
margin: auto;
 
width: 100%;
 
width: 100%;
−
left:0;
+
height: 100%;
−
right:0;
+
 
−
z-index: 0;
+
−
width: auto;
+
−
background-size : cover;
+
 
}
 
}
 +
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 +
/*Title fonts*/
 +
#title, .subtitle{
 +
margin: 40px;
 +
text-align: center;
 +
font-family: 'Permanent Marker', cursive;
 +
color: white;
 +
}
 +
 +
.subtitle{
 +
font-size: 30px;
 +
}
 +
 +
#title{
 +
font-size: 40px;
 +
}
 +
 +
/*Text font for regular paragraph text on all pages*/
 +
.text{
 +
font-size: 15px;
 +
font-family: 'Cantarell', sans-serif;
 +
}
 +
 +
html, body, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 +
body{
 +
        background-color: black
 +
}
 +
 
.navmenu {
 
.navmenu {
 
position:fixed;
 
position:fixed;
Line 26: Line 74:
 
         align : center;
 
         align : center;
 
}
 
}
−
#mainLogo {
+
#mainLogo {  
−
vertical-align:
+
 
}
 
}
 
#navmenubox {
 
#navmenubox {
Line 35: Line 82:
 
width:100%;
 
width:100%;
 
height:45px;
 
height:45px;
−
        align : center;
 
 
}
 
}
 
.sidelogos {
 
.sidelogos {
Line 49: Line 95:
 
}
 
}
 
#home {
 
#home {
−
        width : 40px;
+
    width : 40px;
−
        top : 0;
+
    top : 0;
 
}
 
}
 
#mainpage {
 
#mainpage {
−
        float : left;
+
    float : left;
−
        margin-left : 50px;
+
    margin-left : 50px;
−
        margin-top : 7px;
+
    margin-top : 7px;
 
}
 
}
−
#fbnoticon{
+
#facebookicon{
 
margin-right: 0.75em;
 
margin-right: 0.75em;
 
width:1.9em;
 
width:1.9em;
 
}
 
}
−
#twnoticon{
+
#twittericon{
 
width:2.375em;
 
width:2.375em;
 
margin-right:auto;
 
margin-right:auto;
Line 73: Line 119:
 
background-color:rgb(0,153,102);
 
background-color:rgb(0,153,102);
 
}
 
}
−
#twnoticon img, #fbnoticon img, #igemlogo img{
+
#twittericon img, #facebookicon img, #igemlogo img{
 
margin-top:8px;
 
margin-top:8px;
 
margin-bottom:2px;
 
margin-bottom:2px;
Line 95: Line 141:
 
}
 
}
 
#nav li{
 
#nav li{
 +
font-family:'Permanent Marker', cursive;
 
display:inline-block;
 
display:inline-block;
 
color: white;
 
color: white;
 
position:relative;
 
position:relative;
−
width : 115px;
+
top : 12px;
−
top : 15px;
+
 
font-size : 16px;
 
font-size : 16px;
 
height : 40px;
 
height : 40px;
−
float:left;
 
 
     vertical-align : middle;
 
     vertical-align : middle;
 
     padding : 0;
 
     padding : 0;
 
     margin : 0;
 
     margin : 0;
−
}
 
−
#nav ul li{
 
−
display:inherit;
 
−
    width : 140px;
 
 
}
 
}
 
#nav li ul{
 
#nav li ul{
−
     vertical-align : middle;
+
     vertical-align : bottom;
−
    width : 140px;
+
 
}
 
}
 
#nav li ul li {
 
#nav li ul li {
−
    display : inline-block
+
font-family: 'Cantarell', sans-serif;
−
    top : 10px;
+
     height : 60px;
−
     height : 50px;
+
     vertical-align : top;
−
     vertical-align : middle;
+
     width : 200px;
−
    padding : 0;
+
     background : rgba(0,0,0,0.65);
−
     width : 140px;
+
     padding : 15px 0;
−
     background : white;
+
−
     padding : 4px 0;
+
 
     color : rgb(0,0,0);
 
     color : rgb(0,0,0);
 +
    border-bottom: 1px solid rgba(255,255,255,.2);
 +
    display: block;
 
}
 
}
 
#nav ul{
 
#nav ul{
−
     display : inline-block;
+
     display : block;
 
     width : 125px;
 
     width : 125px;
 
max-height:0px;
 
max-height:0px;
 
left: 0;
 
left: 0;
 
right: 0;
 
right: 0;
−
overflow:hidden;
+
visibility:hidden;
−
-moz-transition: .8s all .3s;
+
-moz-transition: .0s all .0s;
−
-webkit-transition: .8s all .3s;
+
-webkit-transition: .0s all .0s;
−
transition: .8s all .3s;
+
transition: .0s all .0s;
 
}
 
}
 
#nav li:hover ul{
 
#nav li:hover ul{
 +
visibility: visible;
 +
overflow: visible;
 
max-height:30em;
 
max-height:30em;
 
}
 
}
Line 143: Line 185:
 
text-decoration:none;
 
text-decoration:none;
 
display:block;
 
display:block;
−
font-family:'Permanent Marker', cursive;
+
font-weight : bold;
−
        font-weight : bold;
+
color : white;
−
        color : white;
+
vertical-align : middle;
−
        vertical-align : middle;
+
−
}
+
−
#nav ul a{
+
−
color : rgb(0,0,0);
+
 
}
 
}
 
#nav li:hover a {
 
#nav li:hover a {
Line 155: Line 193:
 
}
 
}
 
#nav li:hover ul .liste {
 
#nav li:hover ul .liste {
−
         color : rgb(0,0,0);
+
         color : white;
 
}
 
}
 
#nav li ul li .liste:hover {
 
#nav li ul li .liste:hover {
−
        color : #ccff00;
+
    color : #ccff00;
 +
}
 +
.side-by-side{
 +
display: inline;
 +
}
 +
#nav li ul div{
 +
display: inline;
 
}
 
}
 
</style>
 
</style>
  
−
</head>
+
<div class="navmenu">
−
<body>
+
<div id="navmenubox">
−
<div style="clear: both;"></div>
+
<ul id="nav" class = "col-md-10">
−
<div id = "headerimage">
+
<!--<li>
−
</div>
+
<a id = "mainLogo" href="https://2015.igem.org/Team:MIT" title="MIT iGEM" target="_blank"><img src="https://static.igem.org/mediawiki/2015/6/61/Team-MIT-MainLogo1.png" height="45px">
−
<div class="navmenu">
+
−
<div id="navmenubox">
+
−
<ul id="nav" class = "col-md-8">
+
−
<!--<li>
+
−
<a id = "mainLogo" href="https://2015.igem.org/Team:MIT" title="MIT iGEM" target="_blank"><img src="https://static.igem.org/mediawiki/2015/6/61/Team-MIT-MainLogo1.png" height="45px">
+
−
</a>
+
−
</li>
+
−
-->
+
−
<li><a href="https://2015.igem.org/Team:MIT">Home</a></li>
+
−
<li><a href="https://2014.igem.org/Team:MIT/Project"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Our Project</a>
+
−
<ul>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Project">Motivation</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Protein_sensor">Native Receptor</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/BCR">B-Cell Receptor</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/miRNA">miRNA Detection</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Treatment">Treatment Module</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Delivery">Delivery</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Modeling">Modeling</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="https://2014.igem.org/Team:MIT/Parts"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Lab Work</a>
+
−
<ul>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Parts">Parts</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Safety">Safety</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Notebook">Notebook</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Protocols">Protocols</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="https://2014.igem.org/Team:MIT/Outreach"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Outreach</a>
+
−
<ul>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Outreach">Outreach</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/2014.igem.org/Team:MIT/Interviews">Interviews</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Wiki/2014.igem.org/Team:MIT/Survey">Survey</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Manifold">DIY Vacuum Manifold</a></li>
+
−
        </ul>
+
−
            </li>
+
−
            <li><a href="https://2014.igem.org/Team:MIT/Team"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> About Us</a>
+
−
<ul>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Team">Student Bios</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Attributions">Acknowledgements</a></li>
+
−
<li><a class = liste href="https://2014.igem.org/Team:MIT/Actually Attributions">Attributions</a></li>
+
−
<li><a class = liste href="https://igem.org/Team.cgi?year=2014&team_name=MIT">Official iGEM page</a></li>
+
−
</ul>
+
−
            </li>
+
−
<li><a href="https://2014.igem.org/Team:MIT/Medals">Medals</a>
+
−
</li>
+
−
</ul>
+
−
<div class= "col-md-4">
+
−
<div id = "logos">
+
−
<div id="twnoticon" class="sidelogos">
+
−
<a href="http://twitter.com/MIT_iGEM" target="_blank">
+
−
<img id="twittericon" src="https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png" height="30px"/>
+
−
<div id="twitapp">
+
−
<a class="twitter-timeline" href="https://twitter.com/MIT_iGEM" data-widget-id="608663252705374209">@MIT_iGEM</a>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
<div id="fbnoticon" class="sidelogos">
+
−
<a href="https://www.facebook.com/MITiGEM" target="_blank">
+
−
<img id="fblogo" src="https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png" height="30px"/>                     
+
−
<div id="fbapp">
+
−
<div class="fb-like-box" data-href="https://www.facebook.com/MITiGEM" data-width="250" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
<div id="igemlogo" class="sidelogos">
+
−
<a href="https://2015.igem.org/Main_Page" title="iGEM 2015" target="_blank">
+
−
<img src="https://static.igem.org/mediawiki/2015/0/0a/Team_MIT_iGEM_logo.gif" height="30px">
+
 
</a>
 
</a>
 +
</li>
 +
-->
 +
<li><a href="https://2015.igem.org/Team:MIT">Home</a></li>
 +
 +
<li><a href="https://2015.igem.org/Team:MIT/Project"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Project</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Chutch">C. Hutchinsonii</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/BiodieselProduction">Biodiesel Production</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Coculture">The Co-Culture</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Parts">Parts</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Circuit">Circuit</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Modeling">Modeling</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Signaling">Signaling</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Practices"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Policy + Practice</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Practices">Practices</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Economics">Economics</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Notebooks"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Notebooks</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/WetlabDrylab">Wetlab/Drylab</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Team"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">About Us</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Team">Team Bios</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Acknowledgements">Acknowledgements</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Attributions">Attributions</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Medals">Medals</a></li>
 +
</ul>
 +
            </li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Outreach"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Externals</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Collaborations">Collaborations</a></li>
 +
<li><a class = liste href="https://2014.igem.org/Team:MIT/InterlabStudy">Interlab Study</a></li>
 +
        </ul>
 +
            </li>
 +
</ul>
 +
<div class= "col-md-2">
 +
<div id = "logos">
 +
<div id="twittericon" class="sidelogos">
 +
<a href="http://twitter.com/MIT_iGEM" target="_blank">
 +
<img id="twitterimg" src="https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png" height="30px"/>
 +
<div id="twitapp">
 +
<a class="twitter-timeline" href="https://twitter.com/MIT_iGEM" data-widget-id="608663252705374209">@MIT_iGEM</a>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="facebookicon" class="sidelogos">
 +
<a href="https://www.facebook.com/MITiGEM" target="_blank">
 +
<img id="fblogo" src="https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png" height="30px"/>                     
 +
<div id="fbapp">
 +
<div class="fb-like-box" data-href="https://www.facebook.com/MITiGEM" data-width="250" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="igemlogo" class="sidelogos">
 +
<a href="https://2015.igem.org/Main_Page" title="iGEM 2015" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2015/0/0a/Team_MIT_iGEM_logo.gif" height="30px">
 +
</a>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 249: Line 290:
  
 
$(document).ready(function(){
 
$(document).ready(function(){
−
$('div #twnoticon').mouseover(function(){
+
$('div #twittericon').mouseover(function(){
−
  div = $('#twitapp');
+
div = $('#twitapp');
−
  div.fadeIn(100);
+
div.show();
 
}).mouseout(function(){
 
}).mouseout(function(){
−
    div.fadeOut(100);
+
div.hide();
 
});
 
});
 
});
 
});
Line 259: Line 300:
 
//On hover the twitter logo turns clear and the blue shows through
 
//On hover the twitter logo turns clear and the blue shows through
 
$(document).ready(function(){
 
$(document).ready(function(){
−
     $('#twittericon').hover(function () {
+
     $('#twitterimg').hover(function () {
 
         this.src = "https://static.igem.org/mediawiki/2015/a/a1/Team_MIT_TwitterLogo2.png";
 
         this.src = "https://static.igem.org/mediawiki/2015/a/a1/Team_MIT_TwitterLogo2.png";
 
     }, function () {
 
     }, function () {

Latest revision as of 21:53, 11 September 2015