Difference between revisions of "Template:Team:MIT/Header"
(Created page with "__NOTOC__<html lang="en"> <head> <script> $(document).ready(function(){ $('p:empty').css('display','none'); }); function nav_notebook( dest ){ if (window.location.pathname =...") |
Mollybrennan (Talk | contribs) |
||
(39 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
− | + | <!--To insert this as a template use {{Team:MIT/Header}}--> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <!-- Declare that you are going to use html code instead of wiki code --> | |
− | + | <html> | |
− | + | ||
− | + | <link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Cantarell:400,700,400italic,700italic' rel='stylesheet' type='text/css'> | |
− | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> | |
− | + | <style type="text/css"> | |
− | + | ||
− | + | #contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/ | |
+ | |||
+ | .topWikiNavBackground { | ||
+ | height:18px; | ||
+ | margin-top: -32px; | ||
+ | background-color:transparent; | ||
} | } | ||
− | + | .headerimage { | |
− | + | position: relative; | |
− | + | top:26px; | |
− | + | margin: auto; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #globalWrapper, #content { /*-- changes default wiki settings --*/ | |
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
} | } | ||
− | + | ||
− | + | /*Title fonts*/ | |
+ | #title, .subtitle, .smallersubtitle{ | ||
+ | margin: 40px; | ||
+ | text-align: center; | ||
+ | font-family: 'Permanent Marker', cursive; | ||
+ | color: white; | ||
} | } | ||
− | + | ||
− | + | .subtitle{ | |
+ | font-size: 30px; | ||
} | } | ||
− | + | ||
− | font- | + | #title{ |
− | + | font-size: 40px; | |
} | } | ||
− | + | ||
− | + | table, th, td { | |
+ | border: 1px solid white; | ||
+ | border-collapse: collapse; | ||
+ | padding: 10px; | ||
} | } | ||
− | + | ||
− | + | a:link { | |
+ | color: white; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | + | a:visited{ | |
− | + | color: white; | |
} | } | ||
− | + | a:hover { | |
− | { | + | color: #ccff00; |
− | + | text-decoration:none; | |
− | + | } | |
+ | |||
+ | a:active { | ||
+ | color: white; | ||
} | } | ||
− | + | ||
− | { | + | .smallersubtitle{ |
− | + | font-size:25px; | |
} | } | ||
− | # | + | #spacer{ |
− | + | width: 60%; | |
− | + | margin: auto; | |
− | + | position: relative; | |
− | + | ||
− | + | ||
} | } | ||
− | # | + | #largerspacer{ |
− | + | margin-top: 20px; | |
+ | margin-bottom: 20px; | ||
+ | width: 75%; | ||
+ | margin: auto; | ||
+ | position: relative; | ||
} | } | ||
− | . | + | .col-md-6{ |
− | + | padding: 0px; | |
− | + | ||
} | } | ||
− | + | ||
− | + | #contents{ | |
− | + | display: inline-block; | |
− | + | width: 20%; | |
− | + | text-align: right; | |
− | + | float: left; | |
− | + | ||
} | } | ||
− | /* | + | |
− | + | /*Text font for regular paragraph text on all pages*/ | |
− | + | .text{ | |
− | + | font-size: 15px; | |
+ | font-family: 'Cantarell', sans-serif; | ||
+ | margin: auto; | ||
+ | position:relative; | ||
+ | color: white; | ||
} | } | ||
− | + | ||
− | + | html, body, .wrapper { /*-- changes default wiki settings --*/ | |
− | + | width: 100%; | |
− | /* | + | height: 100%; |
− | + | background-color: transparent; | |
− | + | ||
} | } | ||
− | + | body{ | |
− | + | background-color: black | |
} | } | ||
− | + | .navmenu { | |
− | + | position:fixed; | |
− | + | top:16px; | |
− | + | left:0; | |
− | + | right:0; | |
− | + | background:black; | |
− | + | z-index : 100; | |
− | + | height : 50px; | |
− | + | align : center; | |
− | + | ||
− | + | ||
} | } | ||
− | # | + | #mainLogo { |
− | + | ||
} | } | ||
− | # | + | #navmenubox { |
− | + | padding:0; | |
− | + | margin-left:0; | |
− | + | margin-right:0; | |
− | + | width:100%; | |
+ | height:45px; | ||
} | } | ||
− | + | .sidelogos { | |
− | . | + | float:left; |
− | float:left; | + | display:block; |
− | + | margin-left:auto; | |
− | margin: | + | height:100%; |
− | + | width:auto; | |
− | + | top : 0; | |
− | + | } | |
− | + | #logos{ | |
− | + | float:right; | |
− | + | } | |
− | + | #home { | |
+ | width : 40px; | ||
+ | top : 0; | ||
} | } | ||
− | + | #mainpage { | |
− | + | float : left; | |
− | + | margin-left : 50px; | |
− | + | margin-top : 7px; | |
} | } | ||
− | + | #facebookicon{ | |
− | + | margin-right: 0.75em; | |
+ | width:1.9em; | ||
} | } | ||
− | + | #twittericon{ | |
− | + | width:2.375em; | |
− | + | margin-right:auto; | |
− | + | ||
− | width: | + | |
− | + | ||
} | } | ||
− | + | #igemlogo img{ | |
− | + | width:2.3em; | |
− | + | position: relative; | |
− | + | background-color: white; | |
− | + | ||
− | + | ||
− | background-color: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #igemlogo:hover img { | |
− | + | background-color:rgb(0,153,102); | |
− | background-color: | + | |
} | } | ||
− | + | #twittericon img, #facebookicon img, #igemlogo img{ | |
− | + | margin-top:8px; | |
− | + | margin-bottom:2px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | margin-top: | + | |
− | margin- | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | #twitapp, #fbapp { | |
− | + | display:none; | |
− | + | width:250px; | |
− | + | height:auto; | |
} | } | ||
− | + | #fbapp{ | |
− | + | margin-left:-149px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #twitapp{ | |
− | + | margin-left:-111px; | |
− | left: | + | |
− | + | ||
} | } | ||
− | + | #nav, #nav ul{ | |
− | + | padding:0; | |
− | + | margin:0; | |
− | + | list-style:none; | |
+ | text-align : center; | ||
} | } | ||
− | + | #nav li{ | |
− | + | font-family:'Permanent Marker', cursive; | |
− | + | display:inline-block; | |
+ | color: white; | ||
+ | position:relative; | ||
+ | top : 12px; | ||
+ | font-size : 16px; | ||
+ | height : 40px; | ||
+ | vertical-align : middle; | ||
+ | padding : 0; | ||
+ | margin : 0; | ||
} | } | ||
− | + | #nav li ul{ | |
− | + | vertical-align : bottom; | |
− | + | ||
− | + | ||
} | } | ||
− | + | #nav li ul li { | |
− | + | font-family: 'Cantarell', sans-serif; | |
− | + | height : 60px; | |
− | + | vertical-align : top; | |
− | + | width : 200px; | |
− | + | background : rgba(0,0,0,0.65); | |
− | + | padding : 15px 0; | |
+ | color : rgb(0,0,0); | ||
+ | border-bottom: 1px solid rgba(255,255,255,.2); | ||
+ | display: block; | ||
} | } | ||
− | + | #nav ul{ | |
− | + | display : block; | |
+ | width : 125px; | ||
+ | max-height:0px; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | visibility:hidden; | ||
+ | -moz-transition: .0s all .0s; | ||
+ | -webkit-transition: .0s all .0s; | ||
+ | transition: .0s all .0s; | ||
} | } | ||
− | + | #nav li:hover ul{ | |
− | + | visibility: visible; | |
− | + | overflow: visible; | |
− | # | + | max-height:30em; |
− | + | } | |
+ | #nav a{ | ||
+ | text-decoration:none; | ||
+ | display:block; | ||
+ | font-weight : bold; | ||
+ | color : white; | ||
+ | vertical-align : middle; | ||
+ | } | ||
+ | #nav li:hover a { | ||
+ | color : #ccff00; | ||
+ | } | ||
+ | #nav li:hover ul .liste { | ||
+ | color : white; | ||
+ | } | ||
+ | #nav li ul li .liste:hover { | ||
+ | color : #ccff00; | ||
+ | } | ||
+ | .side-by-side{ | ||
+ | display: inline; | ||
+ | } | ||
+ | #nav li ul div{ | ||
+ | display: inline; | ||
} | } | ||
− | + | </style> | |
− | + | ||
− | + | ||
+ | <div class="navmenu"> | ||
+ | <div id="navmenubox"> | ||
+ | <ul id="nav" class = "col-md-10"> | ||
+ | <!--<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://2015.igem.org/Team:MIT/Description"><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/Coculture">The Co-Culture</a></li> |
− | < | + | <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/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/Promoter">Promoter Characterization</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"> Human Practices</a> | ||
+ | <ul> | ||
+ | <li><a class = liste href="https://2015.igem.org/Team:MIT/CBP">Consolidated Bioprocessing</a></li> | ||
+ | <li><a class = liste href="https://2015.igem.org/Team:MIT/Economics">Economics</a></li> | ||
+ | <li><a class = liste href="https://2015.igem.org/Team:MIT/Experts">Experts</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2015.igem.org/Team:MIT/WetlabDrylab"><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/Measurement">Measurement</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/Collaborations"><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://2015.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> | ||
</div> | </div> | ||
− | < | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
− | </ | + | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
+ | <script> | ||
− | + | $(document).ready(function(){ | |
− | + | $('div #twittericon').mouseover(function(){ | |
− | + | div = $('#twitapp'); | |
− | + | div.show(); | |
+ | }).mouseout(function(){ | ||
+ | div.hide(); | ||
+ | }); | ||
+ | }); | ||
− | + | //On hover the twitter logo turns clear and the blue shows through | |
− | + | $(document).ready(function(){ | |
− | + | $('#twitterimg').hover(function () { | |
− | + | this.src = "https://static.igem.org/mediawiki/2015/a/a1/Team_MIT_TwitterLogo2.png"; | |
− | + | }, function () { | |
− | + | this.src = "https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png"; | |
− | + | }); | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | //On hover faceboook logo turns blue (changes images) | |
− | + | $(document).ready(function(){ | |
− | + | $('#fblogo').hover(function () { | |
− | + | this.src = "https://static.igem.org/mediawiki/2015/2/20/Team-MIT-FacebookIcon2.png"; | |
− | + | }, function () { | |
− | + | this.src = "https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png"; | |
− | + | }); | |
− | + | }); | |
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + |
Latest revision as of 03:41, 19 September 2015