Difference between revisions of "Template:Washington"
| (335 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | |||
<!-- Declare that you are going to use html code instead of wiki code --> | <!-- Declare that you are going to use html code instead of wiki code --> | ||
<html> | <html> | ||
| Line 5: | Line 4: | ||
<style type="text/css"> | <style type="text/css"> | ||
| + | /* WIKI SETTINGS*/ | ||
| + | |||
| + | /* Hide first heading */ | ||
| + | .firstHeading { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /*-- Remove borders, float content left and remove padding/margin */ | ||
| + | #globalWrapper, #content{ | ||
| + | background-color: transparent; | ||
| + | border: 0px; | ||
| + | float: center; | ||
| + | margin:0 auto; | ||
| + | padding: 0px; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | /*left align Black Menu Bar */ | ||
| + | #top_menu_inside { | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | |||
/* PAGE LAYOUT */ | /* PAGE LAYOUT */ | ||
/* page background color*/ | /* page background color*/ | ||
body { | body { | ||
| − | background-color: # | + | background-color: #77525B; |
| − | + | text-align: center; | |
} | } | ||
| Line 16: | Line 37: | ||
/* Creates a container that will wrap all of the content inside your wiki pages. */ | /* Creates a container that will wrap all of the content inside your wiki pages. */ | ||
#mainContainer { | #mainContainer { | ||
| − | width: | + | width: auto; |
| − | + | ||
| − | + | margin: 0 auto; | |
| − | margin | + | background-color: #683f49; |
| − | background-color: # | + | |
border-bottom: 6px solid #b48a27; | border-bottom: 6px solid #b48a27; | ||
font-family: "Open Sans", Helvetica, sans-serif; | font-family: "Open Sans", Helvetica, sans-serif; | ||
| + | |||
} | } | ||
| + | |||
| + | #main { | ||
| + | background-image:url("https://static.igem.org/mediawiki/2015/2/2d/Huskyigemtrans.png"); | ||
| + | background-repeat:no-repeat; | ||
| + | background-position: 20% 6%; | ||
| + | background-size: 707.25px 636.75px; | ||
| + | } | ||
/* Creates the container for the menu */ | /* Creates the container for the menu */ | ||
#menuContainer { | #menuContainer { | ||
| − | + | width: 100%; | |
| − | width: | + | background-color: #EEEDEA; |
| − | background-color: # | + | height: auto; |
| − | height: | + | |
border-bottom: 6px solid #b48a27; | border-bottom: 6px solid #b48a27; | ||
font-family: "Open Sans", Helvetica, sans-serif; | font-family: "Open Sans", Helvetica, sans-serif; | ||
| Line 37: | Line 64: | ||
/* Creates the container for the content */ | /* Creates the container for the content */ | ||
#contentContainer { | #contentContainer { | ||
| − | + | margin: 0 auto; | |
| − | + | height: auto; | |
| − | + | text-align: left; | |
padding: 10px; | padding: 10px; | ||
| + | padding-right:24px; | ||
| + | color: white; | ||
} | } | ||
| Line 46: | Line 75: | ||
/*Set up height place holder for the banner*/ | /*Set up height place holder for the banner*/ | ||
#bannerContainer { | #bannerContainer { | ||
| − | height: | + | height:0; |
| + | padding-top:32%; | ||
| + | //background-image: url("https://static.igem.org/mediawiki/2015/6/69/Igem_front_page_UW.png"); | ||
| + | //background-image: url("https://static.igem.org/mediawiki/2015/7/7b/Igem_skyline_seattle.png"); | ||
| + | background-image: url("https://static.igem.org/mediawiki/2015/d/d6/Igem_banner.jpg"); | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: 100%; | ||
| + | width: 100%; | ||
margin:auto; | margin:auto; | ||
text-align:center; | text-align:center; | ||
| − | |||
} | } | ||
| + | |||
| + | #wrapper{ | ||
| + | width: 960px; | ||
| + | margin:0 auto: | ||
| + | text-align:center; | ||
| + | } | ||
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
| Line 56: | Line 97: | ||
/*Change the styling of text for everything inside main container*/ | /*Change the styling of text for everything inside main container*/ | ||
| − | #mainContainer | + | #mainContainer p, p2 { |
font-family: "Open Sans", Helvetica, sans-serif; | font-family: "Open Sans", Helvetica, sans-serif; | ||
font-size: 12px; | font-size: 12px; | ||
color: #0e232f; | color: #0e232f; | ||
| − | width: | + | width: 95%; |
| + | line-height: 200%; | ||
| + | line-spacing: 10px; | ||
} | } | ||
/*This changes the color and font family */ | /*This changes the color and font family */ | ||
| − | #contentContainer | + | #contentContainer h2, h3, h4, h5, h6 { |
font-family: "Uni Sans", Helvetica, sans-serif; | font-family: "Uni Sans", Helvetica, sans-serif; | ||
| − | color: | + | color: white; |
| + | line-spacing: 5px; | ||
border-bottom: none; | border-bottom: none; | ||
| − | font-weight: | + | font-weight: bold; |
| − | ; | + | font-size: 25px; |
| + | line-height:100%; | ||
| + | padding-top: 1em; | ||
| + | padding-bottom: 1em; | ||
| + | text-align: center; | ||
| + | margin-right: 20%; | ||
| + | margin-left: 20%; | ||
| + | |||
} | } | ||
| + | |||
| + | #contentContainer h1 { | ||
| + | font-family: "Uni Sans", Helvetica, sans-serif; | ||
| + | color: white; | ||
| + | line-spacing: 5px; | ||
| + | border-bottom: none; | ||
| + | font-weight: bold; | ||
| + | font-size: 25px; | ||
| + | line-height:100%; | ||
| + | padding-top: 1em; | ||
| + | padding-bottom: 1em; | ||
| + | margin-right: 20%; | ||
| + | margin-left: 20%; | ||
| + | |||
| + | } | ||
| + | |||
| + | #contentContainer p { | ||
| + | margin-right: 15%; | ||
| + | margin-left: 15%; | ||
| + | font-family: "Uni Sans", Helvetica, sans-serif; | ||
| + | color: white; | ||
| + | line-spacing: 5px; | ||
| + | border-bottom: none; | ||
| + | font-weight: normal; | ||
| + | line-height: 200%; | ||
| + | font-size: 15.5px; | ||
| + | } | ||
| + | |||
| + | #contentContainer p1 { | ||
| + | font-family: "Uni Sans", Helvetica, sans-serif; | ||
| + | color: white; | ||
| + | line-spacing: 5px; | ||
| + | border-bottom: none; | ||
| + | font-weight: normal; | ||
| + | line-height: 200%; | ||
| + | font-size: 15.5px; | ||
| + | } | ||
| + | #contentContainer p2 { | ||
| + | margin-right: 30%; | ||
| + | margin-left: 30%; | ||
| + | font-family: "Uni Sans", Helvetica, sans-serif; | ||
| + | color: white; | ||
| + | line-spacing: 5px; | ||
| + | border-bottom: none; | ||
| + | font-weight: normal; | ||
| + | line-height: 200%; | ||
| + | font-size: 15.5px; | ||
| + | } | ||
| + | |||
/*Style of the links - links are different inside the menu */ | /*Style of the links - links are different inside the menu */ | ||
#contentContainer a { | #contentContainer a { | ||
| − | + | font-family: "Open Sans", sans-serif; | |
font-weight: bold; | font-weight: bold; | ||
color: #85754d; | color: #85754d; | ||
} | } | ||
| − | + | /* Styling links on hover- links are different inside the menu */ | |
#contentContainer a:hover{ | #contentContainer a:hover{ | ||
color: #85754d; | color: #85754d; | ||
| Line 114: | Line 214: | ||
} | } | ||
| − | + | #links { | |
| − | + | display: inline-block; | |
| − | + | position: relative; | |
| − | + | width: 450px; | |
| − | + | height: 450px; | |
| − | + | float: inherit; | |
| − | + | } | |
| − | + | #links p { | |
| − | + | text-align: right; | |
| − | + | padding-top: 10px; | |
| − | + | padding-bottom: 10px; | |
| − | + | } | |
| − | + | #links a { | |
| − | + | font-size: 24px; | |
| − | + | font-weight: bold; | |
| − | + | font-family: "Encode Sans Normal"; | |
| − | + | color: #4b2e83; | |
| − | + | text-decoration: none; | |
| − | + | } | |
| − | + | #links a:hover { | |
| − | + | font-size: 36px; | |
| − | + | } | |
| + | |||
| + | img { | ||
| + | float: center; | ||
| + | margin: 0px 0px 15px 20px; | ||
| + | } | ||
| Line 147: | Line 252: | ||
color: #4b2e83; | color: #4b2e83; | ||
text-decoration:none; | text-decoration:none; | ||
| − | + | font-weight: bold; | |
| − | + | font-size: 16px; | |
} | } | ||
| Line 155: | Line 260: | ||
list-style: none; | list-style: none; | ||
margin-left: auto; | margin-left: auto; | ||
| − | + | margin-right: auto; | |
| − | + | margin-bottom: 0px; | |
| − | + | margin-top: -7px; | |
| − | + | padding-left: 0px; | |
| − | + | padding-right: 0px; | |
| − | + | text-align: center; | |
| − | + | z-index: 1; | |
| − | + | width: auto; | |
| − | + | max-width: 950px; | |
| − | + | height: auto; | |
| − | + | background: #ffffff; | |
| − | + | font-style: bold; | |
} | } | ||
| Line 173: | Line 278: | ||
#menuContainer ul li { | #menuContainer ul li { | ||
display: inline-block; | display: inline-block; | ||
| − | + | width: 100px; | |
| − | padding: | + | padding: 21px 5px 20px 5px; |
| − | + | position: relative; | |
} | } | ||
| Line 206: | Line 311: | ||
} | } | ||
| − | #menuContainer li ul li:hover { | + | #menuContainer ul li ul li:hover { |
background: #444444; | background: #444444; | ||
color: #fff; | color: #fff; | ||
| Line 237: | Line 342: | ||
padding-top: 5px; | padding-top: 5px; | ||
} | } | ||
| + | /* side bar css */ | ||
| + | #sidebar { | ||
| + | width:200px; | ||
| + | float:right; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* navigation */ | ||
| + | nav { | ||
| + | width:300px; | ||
| + | background-color:rgb(240,240,240); | ||
| + | border:solid 1px rgb(220,220,220); | ||
| + | padding:0 12px; | ||
| + | } | ||
| + | |||
| + | nav.stick { | ||
| + | position: fixed; | ||
| + | top: 12px; | ||
| + | z-index: 10000; | ||
| + | margin-top:12px; | ||
| + | } | ||
| + | |||
| + | nav ul { | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png"); | ||
| + | } | ||
| + | |||
| + | nav li { | ||
| + | |||
| + | } | ||
| + | |||
| + | nav li a { | ||
| + | |||
| + | color:rgb(50,50,50); | ||
| + | font-weight:700; | ||
| + | color: #000; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | a.nav-active { | ||
| + | color:#ccc; | ||
| + | } | ||
| + | |||
| + | ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; margin-right: 20%; margin-left: 20%; } | ||
| + | ul#tabs li { display: inline; } | ||
| + | ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; font-size: 17px; } | ||
| + | ul#tabs li a:hover { background-color: #f1f0ee; } | ||
| + | ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-size: 18px; padding: 0.7em 0.3em 0.38em 0.3em; } | ||
| + | div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #b7a57a; font-size: 16px; line-height:1.5em; margin-right: 20%; margin-left: 20%;} | ||
| + | div.tabContent.hide { display: none; } | ||
</style> | </style> | ||
<!-- End of CSS --> | <!-- End of CSS --> | ||
| + | <head> | ||
| + | <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="https://2015.igem.org/Template:Washington_jquary?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function () { | ||
| + | // Read the cookie and if it's defined scroll to id | ||
| + | var scroll = $.cookie('scroll'); | ||
| + | if(scroll){ | ||
| + | scrollToID(scroll, 1000); | ||
| + | $.removeCookie('scroll'); | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | } | ||
| + | |||
| + | // Handle event onclick, setting the cookie when the href != # | ||
| + | $('.nav a').click(function (e) { | ||
| + | e.preventDefault(); | ||
| + | var id = $(this).data('id'); | ||
| + | var href = $(this).attr('href'); | ||
| + | if(href === '#'){ | ||
| + | scrollToID(id, 1000); | ||
| + | }else{ | ||
| + | $.cookie('scroll', id); | ||
| + | window.location.href = href; | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | // scrollToID function | ||
| + | function scrollToID(id, speed) { | ||
| + | var offSet = 70; | ||
| + | var obj = $('#' + id).offset(); | ||
| + | var targetOffset = obj.top - offSet; | ||
| + | $('html,body').animate({ scrollTop: targetOffset }, speed); | ||
| + | } | ||
| + | $(window).scroll(function(){ | ||
| + | var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick | ||
| + | var div_top = $('#nav-anchor').offset().top; | ||
| + | if (window_top > div_top) { | ||
| + | $('nav').addClass('stick'); | ||
| + | } else { | ||
| + | $('nav').removeClass('stick'); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | |||
| + | $(document).ready(function(e){ | ||
| + | var str= location.hash; | ||
| + | var n=str.replace("_temp",""); | ||
| + | $('html,body').animate({scrollTop:$(n).offset().top}, 1000); | ||
| + | }); | ||
| + | |||
| + | |||
| + | /* to make the sidebar anchor*/ | ||
| + | |||
| + | |||
| + | var tabLinks = new Array(); | ||
| + | var contentDivs = new Array(); | ||
| + | |||
| + | function init() { | ||
| + | |||
| + | // Grab the tab links and content divs from the page | ||
| + | var tabListItems = document.getElementById('tabs').childNodes; | ||
| + | for ( var i = 0; i < tabListItems.length; i++ ) { | ||
| + | if ( tabListItems[i].nodeName == "LI" ) { | ||
| + | var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' ); | ||
| + | var id = getHash( tabLink.getAttribute('href') ); | ||
| + | tabLinks[id] = tabLink; | ||
| + | contentDivs[id] = document.getElementById( id ); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // Assign onclick events to the tab links, and | ||
| + | // highlight the first tab | ||
| + | var i = 0; | ||
| + | |||
| + | for ( var id in tabLinks ) { | ||
| + | tabLinks[id].onclick = showTab; | ||
| + | tabLinks[id].onfocus = function() { this.blur() }; | ||
| + | if ( i == 0 ) tabLinks[id].className = 'selected'; | ||
| + | i++; | ||
| + | } | ||
| + | |||
| + | // Hide all content divs except the first | ||
| + | var i = 0; | ||
| + | |||
| + | for ( var id in contentDivs ) { | ||
| + | if ( i != 0 ) contentDivs[id].className = 'tabContent hide'; | ||
| + | i++; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function showTab() { | ||
| + | var selectedId = getHash( this.getAttribute('href') ); | ||
| + | |||
| + | // Highlight the selected tab, and dim all others. | ||
| + | // Also show the selected content div, and hide all others. | ||
| + | for ( var id in contentDivs ) { | ||
| + | if ( id == selectedId ) { | ||
| + | tabLinks[id].className = 'selected'; | ||
| + | contentDivs[id].className = 'tabContent'; | ||
| + | } else { | ||
| + | tabLinks[id].className = ''; | ||
| + | contentDivs[id].className = 'tabContent hide'; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // Stop the browser following the link | ||
| + | return false; | ||
| + | } | ||
| + | |||
| + | function getFirstChildWithTagName( element, tagName ) { | ||
| + | for ( var i = 0; i < element.childNodes.length; i++ ) { | ||
| + | if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i]; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function getHash( url ) { | ||
| + | var hashPos = url.lastIndexOf ( '#' ); | ||
| + | return url.substring( hashPos + 1 ); | ||
| + | } | ||
| + | |||
| + | |||
| + | </script> | ||
| + | </head> | ||
<!-- Start of the template html elements. --> | <!-- Start of the template html elements. --> | ||
<div id ="mainContainer"> | <div id ="mainContainer"> | ||
| Line 246: | Line 528: | ||
<br> | <br> | ||
<br> | <br> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | + | </div> | |
| − | + | <!-- Start of menu --> | |
| − | + | <!-- End of menu --> | |
| − | + | <!-- Start of content --> | |
| − | + | </html> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Latest revision as of 22:39, 18 September 2015