Difference between revisions of "Template:Washington"

(Prototype team template page)
 
 
(358 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Template_All_Teams}}
 
−
 
 
<!-- 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>
 +
    <!-- Start of CSS-->
 +
    <style type="text/css">
  
−
<!-- Start of CSS-->
+
        /* WIKI SETTINGS*/
−
<style type="text/css">
+
 +
/* 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 */
−
 
+
−
/* Change Background color*/
+
/* page background color*/
 
body {  
 
body {  
−
background-color: #fff;
+
background-color: #77525B;
 +
                text-align: center;
 
}
 
}
 +
  
 
/* 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: 978px;
+
width: auto;
−
overflow:hidden;
+
−
float:left;
+
margin: 0 auto;
−
margin-left:20px;
+
background-color: #683f49;  
−
margin-bottom: 10px;
+
border-bottom: 6px solid #b48a27;
−
background-color: #fff;  
+
                                font-family: "Open Sans", Helvetica, sans-serif;
−
border-bottom: 14px solid #565656;
+
 
−
border-right: 2px solid #565656;
+
−
border-left: 2px solid #565656;
+
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", 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  {  
−
float:left;
+
width: 100%;
−
width: 134px;
+
background-color: #EEEDEA;
−
padding: 20px 0px;
+
height: auto;
−
border-top: 14px solid #565656;
+
border-bottom: 6px solid #b48a27;
−
background-color: #E8E8E9;
+
font-family: "Open Sans", Helvetica, sans-serif;
 
}
 
}
  
 
/* Creates the container for the content */
 
/* Creates the container for the content */
 
#contentContainer {
 
#contentContainer {
−
padding-top:20px;
+
                                margin: 0 auto;
−
padding-right:10px;
+
                                height: auto;
−
margin-bottom: 20px;
+
                                text-align: left;
−
width: 814px;
+
padding: 10px;
−
padding-left: 20px;
+
                                padding-right:24px;
−
float: left;
+
                                color: white;
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
 
}
 
}
 +
  
 
/*Set up height place holder for the banner*/
 
/*Set up height place holder for the banner*/
 
#bannerContainer {
 
#bannerContainer {
−
height:200px;
+
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;
−
color: #24B694;
 
 
}
 
}
 +
 +
                        #wrapper{
 +
                                width: 960px;
 +
                                margin:0 auto:
 +
                                text-align:center;
 +
                        }
  
 
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 +
  
 
/*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-size: 13px;
+
font-family: "Open Sans", Helvetica, sans-serif;
−
color: #000000;
+
font-size: 12px;
 +
color: #0e232f;
 +
                                width: 95%;
 +
                                line-height: 200%;
 +
                                line-spacing: 10px;
 
}
 
}
 
 
 
/*This changes the color and font family */
 
/*This changes the color and font family */
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
#contentContainer h2, h3, h4, h5, h6 {  
−
color: #565656;
+
font-family: "Uni Sans", Helvetica, sans-serif;
 +
color: white;
 +
                                line-spacing: 5px;
 
border-bottom: none;
 
border-bottom: none;
 
font-weight: bold;
 
font-weight: bold;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
                                font-size: 25px;
−
margin-top:10px;
+
                                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: #23b593;
+
color: #85754d;
 
}
 
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
/* Styling links on hover- links are different inside the menu */
−
#contentContainer a:hover {  
+
#contentContainer a:hover{
−
color: #59bf92;
+
color: #85754d;
 
}
 
}
  
 
/*Change the styling of tables */
 
/*Change the styling of tables */
 
         #contentContainer table {
 
         #contentContainer table {
−
     border: 1px solid #565656;
+
     border: 1px solid #0e232f;
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
     width: 90%
 
     width: 90%
Line 102: Line 199:
 
     #contentContainer  td {
 
     #contentContainer  td {
 
     padding: 10px;
 
     padding: 10px;
−
     border: 1px solid #565656;
+
     border: 1px solid #0e232f;
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
     vertical-align: text-top;
 
     vertical-align: text-top;
 +
    background-color: #EEEDEA;
 
     }
 
     }
  
 
/*Change the styling of table headers */
 
/*Change the styling of table headers */
 
     #contentContainer th {
 
     #contentContainer th {
−
    background-color: #E8E8E9;
 
 
     padding: 10px;
 
     padding: 10px;
−
     border: 1px solid #565656;
+
     border: 1px solid #0e232f;
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
     vertical-align: text-top;
 
     vertical-align: text-top;
 +
    background-color: #e8d5b7;
 
     }
 
     }
−
 
+
           
 +
                        #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 121: Line 249:
  
 
/*Styling for the links in the menu */
 
/*Styling for the links in the menu */
−
#menuContainer a {
+
#menuContainer ul a {
−
color: #565656;
+
color: #4b2e83;
 
text-decoration:none;
 
text-decoration:none;
−
font-weight: bold;
+
                                font-weight: bold;
 +
                                font-size: 16px;
 
}
 
}
  
−
/* Sets the style for lists inside menuContainer  */
+
/* Sets the style for lists inside menuContainer  */
−
#menuContainer ul {  
+
#menuContainer > ul {  
 
list-style: none;
 
list-style: none;
−
margin-left:0px;
+
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;
 +
 
 
}
 
}
  
−
/*Styles the list items to become menu buttons */
+
/*Styles the list items to become menu buttons */
−
#menuContainer ul li {  
+
#menuContainer ul li {
−
text-align: center;
+
display: inline-block;
−
display: block;
+
                                width: 100px;
−
width: 100%;
+
padding: 21px 5px 20px 5px;  
−
height:30px;
+
                                position: relative;
−
padding-top:10px;
+
 
 
}
 
}
  
−
/*For the menu buttons, changes the color when hovering*/
+
#menuContainer ul li:hover {
−
#menuContainer li:hover {
+
background: #d9d9d9;
−
color:  #FFF;
+
−
background-color: #24B694;
+
 
}
 
}
  
−
/*Submenus are not displayed as default*/
+
 
−
#menuContainer li ul {
+
/*HIde the submenus and removes the padding */
 +
#menuContainer ul li ul {
 
display: none;
 
display: none;
−
padding-top:15px;
+
                margin-top: 20px;
−
margin-left: -19px;
+
                position: absolute;
 +
                margin-left: -5px;
 +
                z-index: 1;
 +
                font-style: normal;
 
}
 
}
  
−
/*Submenus are displayed when hovering the menu button */
+
/*Shows the submenus once you hover*/
−
#menuContainer li:hover ul {
+
#menuContainer ul li:hover ul {
−
/*display: inline-block; */
+
display: block;
−
display: block;
+
}
−
position: absolute;
+
−
float:right;
+
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
  
−
/*Style the submenu buttons*/
+
/*style the submenu buttons*/
−
#menuContainer li ul li{
+
#menuContainer ul li ul li {
−
background-color: #59BF92;  
+
                display: block;
−
padding-left:20px;
+
background: #0E232F;
−
padding-right:20px;
+
                padding: 10px 5px 10px 5px;
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
 
}
 
}
  
−
/*CLASSES */
+
#menuContainer ul li ul li:hover {
 +
background: #444444;
 +
color: #fff;
 +
}
 +
           
 +
            #menuContainer li ul a {
 +
color: #ffffff;
 +
text-decoration:none;
 +
                font-weight: bold;
 +
                font-size: 12px;
 +
}
  
 +
 +
 +
/*CLASSES */
 
/*Clear class for all the pages, adds spacing too*/
 
/*Clear class for all the pages, adds spacing too*/
 
.clear{
 
.clear{
Line 184: Line 331:
 
height: 10px;
 
height: 10px;
 
}
 
}
−
 
  
 
/* highlight box for special messages */
 
/* highlight box for special messages */
 
     .highlightBox {
 
     .highlightBox {
−
        width:500px;  
+
    width:500px;  
−
        margin:auto;  
+
            margin:auto;  
−
        background-color: #E8E8E9;  
+
            background-color: #E8D5B7;  
−
margin-bottom: 15px;
+
    margin-bottom: 15px;
−
margin-top: 15px;
+
    margin-top: 15px;
−
padding: 15px;
+
    padding: 15px;
−
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');
 +
            }
 +
    });
  
 +
});
  
−
<!-- Start of the template html elements. -->
+
$(document).ready(function(e){ 
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
    var str= location.hash;
 +
    var n=str.replace("_temp","");
 +
    $('html,body').animate({scrollTop:$(n).offset().top}, 1000);
 +
});
  
  
−
<div id="bannerContainer">
+
/* to make the sidebar anchor*/
−
<br><br>
+
−
<h2> Add a banner to your wiki! </h2>
+
−
+
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_Washington_banner.jpg</i>" </p>
+
−
</div>
+
  
−
<!-- Start of menu -->
 
−
<div id="menuContainer">
 
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
  var tabLinks = new Array();
−
<ul>
+
    var contentDivs = new Array();
−
<a href="https://2015.igem.org/Team:Washington"><li>HOME</li></a>
+
  
−
<a href="https://2015.igem.org/Team:Washington/Team"><li>TEAM</li></a>
+
    function init() {
  
−
<a href="#"><li>PROJECT
+
      // Grab the tab links and content divs from the page
−
            <ul>
+
      var tabListItems = document.getElementById('tabs').childNodes;
−
<a href="https://2015.igem.org/Team:Washington/Description"><li>Description</li></a>
+
      for ( var i = 0; i < tabListItems.length; i++ ) {
−
<a href="https://2015.igem.org/Team:Washington/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
        if ( tabListItems[i].nodeName == "LI" ) {
−
<a href="https://2015.igem.org/Team:Washington/Results"><li>Results</li></a> 
+
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
−
<a href="https://2015.igem.org/Team:Washington/Design"><li>Design</li></a>
+
          var id = getHash( tabLink.getAttribute('href') );
−
</ul>
+
          tabLinks[id] = tabLink;
−
</li></a>
+
          contentDivs[id] = document.getElementById( id );
 +
        }
 +
      }
  
−
<a href="#"><li>PARTS
+
      // Assign onclick events to the tab links, and
−
            <ul>
+
      // highlight the first tab
−
<a href="https://2015.igem.org/Team:Washington/Parts"><li>Team Parts</li></a>
+
      var i = 0;
−
<a href="https://2015.igem.org/Team:Washington/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:Washington/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Washington/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
  
−
<a href="https://2015.igem.org/Team:Washington/Notebook"><li>NOTEBOOK</li></a>
+
      for ( var id in tabLinks ) {
−
     
+
        tabLinks[id].onclick = showTab;
−
<a href="https://2015.igem.org/Team:Washington/Attributions"><li>ATTRIBUTIONS</li></a>
+
        tabLinks[id].onfocus = function() { this.blur() };
 +
        if ( i == 0 ) tabLinks[id].className = 'selected';
 +
        i++;
 +
      }
  
−
<a href="https://2015.igem.org/Team:Washington/Collaborations"><li>COLLABORATIONS</li></a>
+
      // Hide all content divs except the first
 +
      var i = 0;
  
−
<a href="https://2015.igem.org/Team:Washington/Practices"><li>HUMAN PRACTICES</li></a>
+
      for ( var id in contentDivs ) {
 +
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
 +
        i++;
 +
      }
 +
    }
  
−
<a href="https://2015.igem.org/Team:Washington/Safety"><li>SAFETY</li></a>
+
    function showTab() {
 +
      var selectedId = getHash( this.getAttribute('href') );
  
−
<a href="https://2015.igem.org/Team:Washington/Modeling"><li>MODELING</li></a>
+
      // 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';
 +
        }
 +
      }
  
−
<a href="https://2015.igem.org/Team:Washington/Measurement"><li>MEASUREMENT</li></a>
+
      // Stop the browser following the link
 +
      return false;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Washington/Software"><li>SOFTWARE</li></a>
+
    function getFirstChildWithTagName( element, tagName ) {
 +
      for ( var i = 0; i < element.childNodes.length; i++ ) {
 +
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
 +
      }
 +
    }
  
−
<a href="https://2015.igem.org/Team:Washington/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
    function getHash( url ) {
 +
      var hashPos = url.lastIndexOf ( '#' );
 +
      return url.substring( hashPos + 1 );
 +
    }
  
−
</ul>
 
−
</div>
 
−
<!-- End of menu  -->
 
  
−
<!-- Start of content -->
+
</script>
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
    </head>
−
</html>
+
    <!-- Start of the template html elements. -->
 +
    <div id ="mainContainer">
 +
        <!--This div will close on the page.-->
 +
        <div id="bannerContainer">
 +
            <br>
 +
                <br>
 +
                </div>
 +
            </div>
 +
            <!-- Start of menu -->
 +
            <!-- End of menu  -->
 +
            <!-- Start of content -->
 +
        </html>

Latest revision as of 22:39, 18 September 2015