Difference between revisions of "Template:Example"

(Prototype team template page)
 
(57 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
−
 
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
 
+
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
Line 37: Line 36:
 
.menu_item:hover {  
 
.menu_item:hover {  
 
color:#000000;  
 
color:#000000;  
−
background-color: #32ddb5;
+
background-color: #72c9b6;
 
}
 
}
−
 
−
/* button on top of the page that takes you back to home */
 
−
.team_home {
 
−
padding: 35px 15px;
 
−
font-size:18px;
 
−
font-weight:bold;
 
−
border-bottom: 1px solid #d2d2d2;
 
−
background-color: #32ddb5;
 
−
 
−
cursor: pointer;
 
−
 
−
}
 
−
 
−
 
−
.team_home a {
 
−
text-overflow: clip;
 
−
color:#000000;
 
−
  -ms-transform:rotate(270deg); /* IE 9 */
 
−
  -moz-transform:rotate(270deg); /* Firefox */
 
−
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
 
−
  -o-transform:rotate(270deg); /* Opera */
 
−
}
 
−
 
−
/* hover state for the back to home button */
 
−
.team_home:hover  {
 
−
background-color:#000000;
 
−
color: #32ddb5;
 
−
}
 
−
 
  
 
/* decoration icon for the menu buttons*/
 
/* decoration icon for the menu buttons*/
Line 122: Line 92:
 
/* When hovering on a menu item */
 
/* When hovering on a menu item */
 
.menu_items li:hover {  
 
.menu_items li:hover {  
−
background-color:#32ddb5;  
+
background-color:#72c9b6;
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 165: Line 135:
 
.submenu li a:hover  {
 
.submenu li a:hover  {
 
background-color:#000000;  
 
background-color:#000000;  
−
color: #32ddb5;  
+
color: #72c9b6;
 
}
 
}
  
Line 177: Line 147:
 
text-align:center;   
 
text-align:center;   
 
font-weight:bold;  
 
font-weight:bold;  
−
color:#32ddb5;  
+
color:#72c9b6;
 
cursor:pointer;  
 
cursor:pointer;  
 
-webkit-transition: all 0.4s ease;  
 
-webkit-transition: all 0.4s ease;  
Line 188: Line 158:
 
/* when hovering on that button */
 
/* when hovering on that button */
 
.collapsable_menu_control:hover {  
 
.collapsable_menu_control:hover {  
−
background-color: #32ddb5;
+
background-color: #72c9b6;
 
color:#000000;   
 
color:#000000;   
 
}
 
}
Line 238: Line 208:
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
 +
 +
.judges-will-not-evaluate {
 +
border: 4px solid #72c9b6;
 +
display: block;
 +
margin: 5px 15px;
 +
width: 95%;
 +
font-weight:bold;
 +
}
 +
  
 
/*STYLING */
 
/*STYLING */
Line 243: Line 222:
 
/* styling for the titles */
 
/* styling for the titles */
 
.content_wrapper h1, .content_wrapper h2 {
 
.content_wrapper h1, .content_wrapper h2 {
−
padding:0px 15px;  
+
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #32ddb5;  
+
color:#72c9b6;
 +
 
 
}
 
}
 
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
 
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
−
padding:0px 15px;  
+
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
 
color: #000000;   
 
color: #000000;   
Line 265: Line 245:
 
font-weight: bold;  
 
font-weight: bold;  
 
text-decoration: underline;
 
text-decoration: underline;
−
text-decoration-color:#32ddb5;  
+
text-decoration-color:#72c9b6;
−
color: #32ddb5;  
+
color: #72c9b6;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-moz-transition: all 0.4s ease;  
 
-moz-transition: all 0.4s ease;  
Line 325: Line 305:
 
text-align:center;  
 
text-align:center;  
 
font-weight:bold;  
 
font-weight:bold;  
−
background-color: #32ddb5;
+
background-color: #72c9b6;
 
cursor:pointer;   
 
cursor:pointer;   
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
Line 337: Line 317:
 
.button_click:hover {   
 
.button_click:hover {   
 
background-color:#000000;  
 
background-color:#000000;  
−
color: #32ddb5;  
+
color:#72c9b6;
 
}
 
}
  
Line 387: Line 367:
 
<div class="menu_wrapper" >
 
<div class="menu_wrapper" >
  
−
<div class="team_home">
+
 
−
<a href="https://2016.igem.org/Team:Example">UPF-CRG_Barcelona </a>
+
−
</div>
+
  
  
Line 395: Line 373:
  
 
<ul id="accordion" class="accordion">
 
<ul id="accordion" class="accordion">
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example">HOME </a> </li>
 +
  
 
<li class="menu_item"> <div class="icon plus"></div> TEAM
 
<li class="menu_item"> <div class="icon plus"></div> TEAM
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team  </a> </li>
 
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team  </a> </li>
−
<li> <a href="https://2016.igem.org/Team:Example/Collaborations"> Collaborations </a> </li>
+
<li> <a href="https://2016.igem.org/Team:Example/Collaborations">★  Collaborations </a> </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 405: Line 386:
 
<li class="menu_item"> <div class="icon plus"></div> PROJECT   
 
<li class="menu_item"> <div class="icon plus"></div> PROJECT   
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href="https://2016.igem.org/Team:Example/Description"> Description </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Description"> ★  Description </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Design"> Design </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Design"> ★ Design </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Experiments"> Experiments </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Experiments"> Experiments </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Proof"> Proof of Concept </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Proof"> ★ Proof of Concept </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Demonstrate"> Demonstrate </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Demonstrate"> ★ Demonstrate </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Notebook"> Notebook </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Notebook"> Notebook </a></li>
Line 418: Line 399:
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href="https://2016.igem.org/Team:Example/Parts">Parts </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Parts">Parts </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Basic_Part"> Basic Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Basic_Part"> ★ Basic Parts </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Composite_Part"> Composite Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Composite_Part"> ★ Composite Parts </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Part_Collection"> Part Collection </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Part_Collection"> ★ Part Collection </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 428: Line 409:
  
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example/Attributions"> ATTRIBUTIONS </a></li>
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example/Attributions">★  ATTRIBUTIONS </a></li>
  
  
Line 434: Line 415:
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href="https://2016.igem.org/Team:Example/Human_Practices"> Human Practices </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Human_Practices"> Human Practices </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/HP/Silver"> Silver </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/HP/Silver">★ Silver </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/HP/Gold">Gold </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/HP/Gold">★ Gold </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Integrated_Practices"> Integrated Practices </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Integrated_Practices"> ★ Integrated Practices </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Engagement">Engagement </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Engagement">★ Engagement </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 444: Line 425:
 
<li class="menu_item"> <div class="icon plus"></div> AWARDS  
 
<li class="menu_item"> <div class="icon plus"></div> AWARDS  
 
<ul class="submenu">
 
<ul class="submenu">
−
<li><a href="https://2016.igem.org/Team:Example/Entrepreneurship"> Entrepreneurship </a></li>
+
<li><a href="https://2016.igem.org/Team:Example/Entrepreneurship"> ★ Entrepreneurship </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Hardware"> Hardware </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Hardware"> ★ Hardware </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Software"> Software </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Software">★ Software </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Measurement">  Measurement </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Measurement">★ Measurement </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Model"> Model </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Model">★ Model </a></li>
  
 
                     </ul>
 
                     </ul>
Line 462: Line 443:
 
<div class="content_wrapper">
 
<div class="content_wrapper">
  
 +
 +
 +
<h1 id="team_name">  </h1>
 +
<h4 id="page_name">  </h4>
  
  
Line 478: Line 463:
  
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 +
 +
 +
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 +
$("#team_name").html( wgPageName );
 +
}
 +
 +
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
}
 +
 +
else {
 +
// this adds the team's name as an h1
 +
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 +
 +
// this adds the page's title as an h4
 +
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
}
 +
 +
 +
if( ($(location).attr('href')).indexOf("submit") >= 0  ) {
 +
$(".menu_wrapper").css( { "position": "absolute", "height": "auto"});
 +
$("#wpTextbox1").css( 'margin-top', '440px');
 +
}
 +
 +
 +
  
 
$('#accordion').find('.menu_item').click(function(){
 
$('#accordion').find('.menu_item').click(function(){

Latest revision as of 16:05, 22 March 2017

MENU ▤