Difference between revisions of "Template:Washington"
| (109 intermediate revisions by the same user not shown) | |||
| Line 30: | Line 30: | ||
/* page background color*/ | /* page background color*/ | ||
body { | body { | ||
| − | background-color: # | + | background-color: #77525B; |
text-align: center; | text-align: center; | ||
} | } | ||
| Line 43: | Line 43: | ||
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 */ | ||
| Line 49: | Line 57: | ||
width: 100%; | width: 100%; | ||
background-color: #EEEDEA; | background-color: #EEEDEA; | ||
| − | height: | + | height: auto; |
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 56: | Line 64: | ||
/* Creates the container for the content */ | /* Creates the container for the content */ | ||
#contentContainer { | #contentContainer { | ||
| − | |||
| − | |||
| − | |||
margin: 0 auto; | margin: 0 auto; | ||
height: auto; | height: auto; | ||
| Line 64: | Line 69: | ||
padding: 10px; | padding: 10px; | ||
padding-right:24px; | padding-right:24px; | ||
| + | color: white; | ||
} | } | ||
| Line 70: | Line 76: | ||
#bannerContainer { | #bannerContainer { | ||
height:0; | height:0; | ||
| − | padding-top: | + | 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/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-repeat: no-repeat; | ||
background-size: 100%; | background-size: 100%; | ||
| Line 90: | Line 97: | ||
/*Change the styling of text for everything inside main container*/ | /*Change the styling of text for everything inside main container*/ | ||
| − | #mainContainer p { | + | #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: 95%; | 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; | ||
| + | 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; | line-spacing: 5px; | ||
border-bottom: none; | border-bottom: none; | ||
font-weight: normal; | 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 */ | ||
| Line 173: | Line 239: | ||
font-size: 36px; | font-size: 36px; | ||
} | } | ||
| + | |||
| + | img { | ||
| + | float: center; | ||
| + | margin: 0px 0px 15px 20px; | ||
| + | } | ||
| Line 191: | Line 262: | ||
margin-right: auto; | margin-right: auto; | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
| − | margin-top: - | + | margin-top: -7px; |
padding-left: 0px; | padding-left: 0px; | ||
padding-right: 0px; | padding-right: 0px; | ||
text-align: center; | text-align: center; | ||
z-index: 1; | z-index: 1; | ||
| − | width: | + | width: auto; |
| − | height: | + | max-width: 950px; |
| + | height: auto; | ||
background: #ffffff; | background: #ffffff; | ||
font-style: bold; | font-style: bold; | ||
| Line 272: | Line 344: | ||
/* side bar css */ | /* side bar css */ | ||
#sidebar { | #sidebar { | ||
| − | width: | + | width:200px; |
float:right; | float:right; | ||
} | } | ||
| Line 314: | Line 386: | ||
} | } | ||
| − | + | 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> | <head> | ||
| − | <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="// | + | <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"> | <script type="text/javascript"> | ||
$(document).ready(function () { | $(document).ready(function () { | ||
| Line 327: | Line 405: | ||
scrollToID(scroll, 1000); | scrollToID(scroll, 1000); | ||
$.removeCookie('scroll'); | $.removeCookie('scroll'); | ||
| + | |||
| + | |||
| + | |||
| + | |||
} | } | ||
| Line 366: | Line 448: | ||
$('html,body').animate({scrollTop:$(n).offset().top}, 1000); | $('html,body').animate({scrollTop:$(n).offset().top}, 1000); | ||
}); | }); | ||
| + | |||
/* to make the sidebar anchor*/ | /* 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> | </script> | ||
Latest revision as of 22:39, 18 September 2015