Team:UGent/Templates/Header
From 2013.igem.org
(Difference between revisions)
(202 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | <!-- ####### Banner UGent ####### --> | ||
+ | <table cellspacing=0 cellpadding=0 border =0> | ||
+ | |||
+ | <!-- ####### Remove iGem-banner and wiki-parts + LAYOUT ###### --> | ||
<html> | <html> | ||
+ | <head> | ||
<style> | <style> | ||
- | #contentSub, #search-controls, .firstHeading | + | #contentSub, #search-controls, .firstHeading, #catlinks, #p-logo{display:none;} |
- | + | #top-section{border: none;height: 0px} | |
+ | #content{border: none; width:1200px;} | ||
+ | |||
+ | body{background-color:#ffffff} | ||
+ | ul{list-style-image:url('https://static.igem.org/mediawiki/2013/5/50/UGent_2013_TandwielWIKI.png');font-family:"Verdana";font-size:13px;padding-right:50px; | ||
+ | padding-left:60px;text-align:justify;} | ||
+ | ul.a{list-style-image:url('https://static.igem.org/mediawiki/2013/a/aa/UGent_2013_TandwielWIKI2.png');font-family:"Verdana";font-size:11px;padding-right:50px; | ||
+ | padding-left:30px;text-align:justify;} | ||
+ | h1{font-family:"Verdana";font-size:15px;font-weight: bold;} | ||
+ | h2{font-family:"Verdana";font-size:15px;} | ||
+ | h3{font-family:"Verdana";font-size:13px;padding-left:50px;} | ||
+ | p{font-family:"Verdana";font-size:13px; text-align:justify;padding-right:50px; | ||
+ | padding-left:50px;} | ||
+ | p.font{font-family:"Verdana";font-size:11px; text-align:justify;padding-right:50px; | ||
+ | padding-left:50px;font-weight: bold;} | ||
+ | p.home{font-family:"Verdana";font-size:18px; text-align:center;padding-right:50px; | ||
+ | padding-left:50px;font-weight: bold;color:#18204b;} | ||
+ | p.padding{font-family:"Verdana";font-size:13px; text-align:justify padding-right:50px;padding-left:75px;} | ||
+ | p.padding2{font-family:"Verdana";font-size:13px; text-align:justify padding-right:50px;padding-left:106px;} | ||
+ | .center{margin:auto;width:95%;} | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | </html> | ||
+ | |||
+ | <!-- ####### SlideShow ######## --> | ||
+ | <html> | ||
+ | <head> | ||
+ | |||
+ | <link rel="stylesheet" href="http://www.science.unitn.it/~igem/js/nivo/nivo-slider.css" type="text/css" media="screen"/> | ||
+ | <link rel="stylesheet" href="http://www.science.unitn.it/~igem/js/nivo/themes/default/default.css" type="text/css" media="screen"/> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
+ | <script src="http://www.science.unitn.it/~igem/js/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script> | ||
+ | <script> | ||
+ | jQuery(function($){ | ||
+ | $('#slider').nivoSlider({ | ||
+ | effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' | ||
+ | pauseTime: 3000, | ||
+ | directionNavHide: true, | ||
+ | pauseOnHover: true | ||
+ | }); | ||
+ | }) | ||
+ | </script> | ||
+ | <style> | ||
+ | .theme-default .nivo-controlNav { | ||
+ | left: 13%; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | </html> | ||
+ | |||
+ | <!-- ####### Drop down ####### --> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script type="text/javascript"> | ||
+ | // Copyright 2006-2007 javascript-array.com | ||
+ | |||
+ | var timeout = 50; | ||
+ | var closetimer = 0; | ||
+ | var ddmenuitem = 0; | ||
+ | |||
+ | // open hidden layer | ||
+ | function mopen(id) | ||
+ | { | ||
+ | // cancel close timer | ||
+ | mcancelclosetime(); | ||
+ | |||
+ | // close old layer | ||
+ | if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; | ||
+ | |||
+ | // get new layer and show it | ||
+ | ddmenuitem = document.getElementById(id); | ||
+ | ddmenuitem.style.visibility = 'visible'; | ||
+ | |||
} | } | ||
- | + | // close showed layer | |
- | + | function mclose() | |
- | + | { | |
+ | if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; | ||
} | } | ||
- | + | ||
- | + | // go close timer | |
+ | function mclosetime() | ||
+ | { | ||
+ | closetimer = window.setTimeout(mclose, timeout); | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | + | // cancel close timer | |
+ | function mcancelclosetime() | ||
+ | { | ||
+ | if(closetimer) | ||
+ | { | ||
+ | window.clearTimeout(closetimer); | ||
+ | closetimer = null; | ||
+ | } | ||
+ | } | ||
- | + | // close layer when click-out | |
+ | document.onclick = mclose; | ||
+ | </script> | ||
+ | </head> | ||
+ | <style> | ||
+ | #sddm | ||
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 40} | ||
- | + | #sddm li | |
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
- | + | #sddm li a | |
- | + | { display: block; | |
- | + | margin: 0 1px 0 0; | |
- | + | padding: 15.3px 15.3px; | |
- | + | height: 20px; | |
+ | width: auto; | ||
+ | background: #F9BD05 ; | ||
+ | color: #18204b ; | ||
+ | text-align: center; | ||
+ | vertical-align:middle; | ||
+ | text-decoration: none; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
- | + | #sddm li a img | |
- | + | { display: block; | |
+ | margin: 0 1px 0 0; | ||
+ | padding: 0px 0px; | ||
+ | height: 20px; | ||
+ | width: auto; | ||
+ | background:#F9BD05 ; | ||
+ | color: #18204b; | ||
+ | text-align: center; | ||
+ | vertical-align:middle; | ||
+ | text-decoration: none; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
- | + | #sddm li a:hover | |
- | + | { background: #18204b; | |
- | + | color:#F9BD05 } | |
- | + | ||
- | + | #sddm li img:hover | |
- | < | + | { background: #18204b; |
+ | color:#F9BD05 } | ||
+ | |||
+ | #sddm div | ||
+ | { position: absolute; | ||
+ | visibility: hidden; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: #EAEBD8; | ||
+ | border: 1px solid #18204b} | ||
+ | |||
+ | #sddm div a | ||
+ | { position: relative; | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 5px 10px; | ||
+ | width: auto; | ||
+ | white-space: nowrap; | ||
+ | text-align: left; | ||
+ | text-decoration: none; | ||
+ | background: #EAEBD8; | ||
+ | color: #18204b; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
+ | |||
+ | #sddm div a:hover | ||
+ | { background: #18204b; | ||
+ | color: #F9BD05} | ||
+ | </style> | ||
</html> | </html> | ||
- | <!-- Script read more sections --> | + | |
+ | <!-- ####### Script read more sections ####### --> | ||
<html> | <html> | ||
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
+ | |||
//Hide (Collapse) the toggle containers on load | //Hide (Collapse) the toggle containers on load | ||
$(".toggle_container").hide(); | $(".toggle_container").hide(); | ||
Line 76: | Line 229: | ||
if(nextParent.is(".toggle_container")) { | if(nextParent.is(".toggle_container")) { | ||
nextParent.slideToggle("slow"); | nextParent.slideToggle("slow"); | ||
+ | |||
+ | |||
var prevElem = nextParent.prev(); | var prevElem = nextParent.prev(); | ||
while(prevElem!= null) { | while(prevElem!= null) { | ||
Line 95: | Line 250: | ||
</html> | </html> | ||
- | <!-- Lay-out read more sections --> | + | <!-- ####### Lay-out read more sections #######--> |
<html> | <html> | ||
<style> | <style> | ||
Line 101: | Line 256: | ||
{ | { | ||
padding-left: 17px; | padding-left: 17px; | ||
- | background-image: url(' | + | background-image: url(''); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center left; | background-position: center left; | ||
Line 108: | Line 263: | ||
{ | { | ||
padding-left: 17px; | padding-left: 17px; | ||
- | background-image: url(' | + | background-image: url(''); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center left; | background-position: center left; | ||
Line 116: | Line 271: | ||
div.toggle_container | div.toggle_container | ||
{ | { | ||
- | border-left: 1px solid # | + | border-left: 1px solid #F9BD05; |
- | padding-left: | + | padding-left: 17px; |
- | margin-left: | + | margin-left: 10px; |
margin-bottom: 25px; | margin-bottom: 25px; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |