Team:UCLondon/Templates/Header
From 2012e.igem.org
(Difference between revisions)
(190 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | {{:Team:UCLondon/Templates/ | + | {{:Team:UCLondon/Templates/Navigationv4}} |
<html> | <html> | ||
- | <div id="logo"><h1>Morph Bioinformatics</h1></div> | + | <div id="shadow" style="display:none;" > |
+ | <div id="close-box" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div> | ||
+ | |||
+ | <div id="box-content" style="width:95%; height:95%; margin:auto;"> | ||
+ | <div id="load" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div id="logo"><h1>Morph<img src="https://dl.dropbox.com/u/45600819/Morph%20Logo-bright.png" height="55"/>Bioinformatics</h1></div> | ||
+ | |||
+ | <div id="page-title"><h2></html>{{{1}}}<html></h2></div> | ||
Line 12: | Line 24: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | body { | |
- | body { background-image: url(http://db.tt/A6rAg7D9); | + | background-color: rgb(242, 242, 242); |
- | + | background-image: url(http://db.tt/A6rAg7D9); | |
+ | background-image: url(http://db.tt/A6rAg7D9), -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgb(242, 242, 242) ), to( rgb(242, 242, 242) ) ); | ||
+ | background-image: url(http://db.tt/A6rAg7D9), -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242)),; | ||
+ | background-image: url(http://db.tt/A6rAg7D9), -moz-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) ); | ||
+ | background-image: url(http://db.tt/A6rAg7D9), -ms-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) ); | ||
+ | background-image: url(http://db.tt/A6rAg7D9), -o-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) ); | ||
+ | background-image: url(http://db.tt/A6rAg7D9), linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) ); | ||
+ | |||
+ | background-position: top; | ||
+ | background-repeat: repeat-x; | ||
+ | } | ||
+ | .firstHeading { display: none; } | ||
- | #logo { width: 70%; clear:both; margin: auto; border-bottom-width: 0px; | + | |
+ | #logo { width: 70%; clear:both; margin: auto; border-bottom-width: 0px; height: 80px; } | ||
#logo h1 { | #logo h1 { | ||
border-bottom-width: 0px; border: none; width: 70%; clear:both; margin: auto; text-align: center ; font-variant:small-caps; | border-bottom-width: 0px; border: none; width: 70%; clear:both; margin: auto; text-align: center ; font-variant:small-caps; | ||
- | font-family: 'Gill Sans', Arial, sans-serif; font-size: | + | font-family: 'Gill Sans', Arial, sans-serif; font-size: 40px; color: rgb(189, 214, 227); text-shadow: rgb(0, 0, 0) 2px 1px 2px; |
+ | } | ||
+ | #logo img {} | ||
+ | |||
+ | |||
+ | #page-title { width: 833px; clear:both; margin:auto; height:40px; padding-right: 1px; background-color: rgba(5, 5, 5, 0.7); border-radius: 10px 10px 0 0; | ||
+ | position:relative; bottom:-20px; padding-bottom:10px;} | ||
+ | #page-title h2 { | ||
+ | border-bottom-width: 0px; border: none; width: 70%; clear:both; margin: auto; text-align: center ; | ||
+ | font-family: 'Gill Sans', Arial, sans-serif; font-size: 25px; color: rgb(179, 179, 179); text-shadow: rgb(0, 0, 0) 2px 1px 2px; | ||
} | } | ||
/* attempts to change footer doesn't work */ | /* attempts to change footer doesn't work */ | ||
#footer-box { background-color: rgba (255, 255, 255, 0.5); } | #footer-box { background-color: rgba (255, 255, 255, 0.5); } | ||
- | |||
+ | |||
+ | .MBWikiStyle { | ||
+ | background-color:white; | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.7) ), to( rgb(249, 249, 249) ) ); | ||
+ | background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) ); | ||
+ | background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) ); | ||
+ | background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) ); | ||
+ | background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) ); | ||
+ | background-image: linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) ); | ||
+ | |||
+ | box-shadow: 2px 5px 5px #888; | ||
+ | border-radius: 5px; | ||
+ | |||
+ | width:833px; | ||
+ | margin:auto; | ||
+ | position:relative; | ||
+ | z-index:1; | ||
+ | top: 5px; | ||
+ | } | ||
+ | |||
+ | .MBWikiStyle *:not(table), .MBWikiStyle #toc { border: none !important; } | ||
+ | .MBWikiStyle #toc, .MBWikiStyle #toc a:hover { background-color: rgba(0, 0, 0, 0); text-decoration:none; width:98%; margin:auto; } | ||
+ | .MBWikiStyle .sidebar { width:20% !important; float: left !important; height: 100%; background-color: rgba(0, 0, 0, 0); } | ||
+ | .MBWikiStyle .sidebar a { font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: bold; color: rgb(56, 90, 79); } | ||
+ | .MBWikiStyle .sidebar a:hover { color: rgb(64, 128, 0); } | ||
+ | .MBWikiStyle .sidebar a .tocnumber {display: none; } | ||
+ | .MBWikiStyle .sidebar li li:before { content:"-";} | ||
+ | |||
+ | |||
+ | #toctitle { display: none; } | ||
+ | .MBWikiStyle .MBContent { | ||
+ | float:right; width: 75%; margin:auto; | ||
+ | border-left-color: rgb(231, 230, 230) !important; border-left-width: 1px !important; border-left-style:solid !important; | ||
+ | padding-left: 20px; padding-right: 20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .MBWikiStyle .MBContent h2 { color: rgb(56, 90, 79); font-family: 'Myriad Pro', Helvetica, sans-serif; font-size: 24px; font-weight: bold; } | ||
+ | .MBWikiStyle .MBContent h3 { color: rgb(73, 117, 103); } | ||
+ | .MBWikiStyle .MBContent .editsection { font-size: 9px; font-family: Helvetica, sans-serif; } | ||
+ | .MBWikiStyle .MBContent p, .MBWikiStyle .MBContent li { color: rgb(117, 117, 117); font-family: Helvetica, sans-serif; font-size: 13px; } | ||
+ | |||
+ | |||
+ | .MBWikiStyle #toc.fixed { position:fixed; top:0; } | ||
+ | |||
+ | #shadow { | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) ); | ||
+ | background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-color: rgb(255,255,255); | ||
+ | |||
+ | |||
+ | box-shadow: 1px 2px 5px 5px #888; | ||
+ | border-radius: 5px; | ||
+ | |||
+ | position:fixed; | ||
+ | height: 400px; | ||
+ | width:50%; | ||
+ | margin:auto; | ||
+ | z-index: 999999999999999999999999; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <script src="https://dl.dropbox.com/u/3703109/igeme/js/mb-additions.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | var nHeight = $('.MBContent').height(); | ||
+ | $('.MBWikiStyle').css('height', nHeight); | ||
+ | |||
+ | setTimeout(function(){ | ||
+ | var nHeight = $('.MBContent').height(); | ||
+ | $('.MBWikiStyle').css('height', nHeight); | ||
+ | },2000); | ||
+ | |||
+ | |||
+ | |||
+ | var top = $('#toc').offset().top - parseFloat($('#toc').css('marginTop').replace(/auto/,0)); | ||
+ | |||
+ | $(window).scroll(function (event) { | ||
+ | var y = $(this).scrollTop(); | ||
+ | |||
+ | if (y >= top) { | ||
+ | // if so, ad the fixed class | ||
+ | $('#toc').addClass('fixed'); | ||
+ | } else { | ||
+ | $('#toc').removeClass('fixed'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 00:02, 28 October 2012