Difference between revisions of "Template:Columbia NYC Template"

(Undo revision 91933 by Jacky96Cheung (talk))
Line 2: Line 2:
 
<html>
 
<html>
  
 +
<!-- Closing Wiki Divs -->
 +
</div>
 +
</div>
  
 
<head>
 
<head>
  
<!-- CSS START -->
+
<style>
<style>
+
  
/* Masking Wiki Contents START */
+
/* Changing Body */
/* Hiding Default Wiki Content Divs */
+
body {
#content {
+
background-color: rgba(211,211,211,.75);
visibility: hidden;
+
margin: 0px;
height: 0;
+
}
padding: 0;
+
margin: 0;
+
}
+
  
#bodyContent {
+
/* Content Boxes */
visibility: hidden;
+
#superContainer {
}
+
  
/* Hiding Default Wiki Title */
+
}
#content h1.firstheading {
+
#menuContainer {
visibility: hidden;
+
position: fixed;
}
+
width: 220px;
 +
height: 100%;
 +
border-right: 2px solid gray;
 +
background-color: rgb(118, 178, 222);
 +
}
 +
#contentContainer {
 +
overflow: auto;
 +
margin-left: 230px;
 +
}
  
/* Maintaining Wiki globalWrapper */
+
/*menuContainer Design*/
#globalWrapper {
+
#menuContainer ul {
max-height: 20px;
+
padding: 0;
padding: 0;
+
margin: 0;
}
+
list-style: none;
/* Masking Wiki Contents END */
+
text-align: center;
 +
}
 +
#menuContainer li {
 +
padding-top: 5px;
 +
padding-bottom: 5px;
 +
}
 +
#menuContainer li:hover {
 +
background-color: rgba(255, 255, 255, 0.5);
 +
}
 +
#menuContainer li ul {
 +
display: none;
 +
}
 +
#menuContainer li:hover ul{
 +
display: block;
 +
background-color: rgb(196, 216, 226);
 +
width: 100%;
 +
position: absolute;
 +
border-left: 2px solid gray;
 +
margin-left: 220px;
 +
margin-top: -31px;
 +
}
 +
#menuContainer a {
 +
text-decoration: none;
 +
font-family: "Arial Black", Gadget, sans-serif;
 +
font-size: 18px;
 +
color: black;
 +
}
  
/* Changing Background */
+
/* Header Styling */
body {
+
#contentContainer h1 {
background-image: url("https://static.igem.org/mediawiki/2015/d/db/Columbia_NYC_Background.png");
+
text-align: center;
overflow-x: hidden;
+
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
+
font-size: 50px;
}
+
font-style: bold;
 +
border-bottom: 5px solid black;
 +
}
  
/* Menu Formatting START*/
+
</style>
#menu {
+
position: fixed;
+
width: 220px;
+
height: 100%;
+
border-right: 2px solid gray;
+
margin: 0;
+
background-color: rgba(196, 216, 226, 0.5);
+
}
+
  
#menu img {
+
</head>
display: block;
+
padding: 10px 0;
+
margin: auto;
+
opacity: 0.75;
+
}
+
  
#menu a {
+
<body>
color: black;
+
text-decoration: none;
+
font-family: Verdana, Geneva, sans-serif;
+
font-size: 16px;
+
font-weight: bold;
+
}
+
  
#menu ul {
+
<div id = "superContainer">
list-style: none;
+
text-align: center;
+
padding: 0;
+
margin: 0;
+
}
+
  
#menu li {
+
<nav>
height: 16px;
+
<div id = "menuContainer">
padding: 20px 0;
+
border-bottom: 2px solid gray;
+
margin: 0;
+
}
+
  
/* Color Change On Mouse Over */
+
<ul>
#menu li:hover {
+
background-color: rgba(207, 207, 207, 0.25);
+
}
+
  
#menu ul.subTab li:hover {
+
<a href= "https://2015.igem.org/Team:Columbia_NYC"> <img src="https://static.igem.org/mediawiki/2015/c/ca/Columbia_NYC_Logo.jpg" alt="Columbia iGEM Logo" style="width:100%"> </a>
background-color: rgba(207, 207, 207, 0.5)
+
}
+
  
/* Hiding Sub-Menu */
+
<a href = "#"> <li> THE PROJECT
#menu ul.subTab {
+
<ul class = "subTab">
display: none;
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Description"> <li> DESCRIPTION </li></a>
}
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Design"> <li> DESIGN </li></a>
 +
<a href = "https://2015.igem.org/Team:Columbia_NYC/Experiments"> <li> EXPERIMENTS </li></a>
 +
<a href="https://2015.igem.org/Team:Columbia_NYC/Measurement"><li>MEASUREMENTS</li></a>
 +
<a href = "https://2015.igem.org/Team:Columbia_NYC/Results"> <li> RESULTS </li></a>
 +
</ul>
 +
</li></a>
  
/* Showing Sub-Menu On Mouse-Over */
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Team"> <li> TEAM MEMBERS </li></a>
#menu li:hover ul.subTab {
+
display: block;
+
position: absolute;
+
width: 100%;
+
padding: 0;
+
margin-top: -42px;
+
margin-left: 221px;
+
text-align: center;
+
background-color: rgb(196, 216, 226);
+
}
+
  
/* Making Sub-Menu Navigable */
+
<a href = "#"> <li> PARTS RECORD
#menu ul.subTab:hover {
+
<ul class = "subTab">
display: block;
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Parts"> <li> TEAM PARTS </li></a>
}
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Basic_Part"> <li> BASIC PARTS </li></a>
/* Menu Formatting END */
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Composite_Part"> <li> COMPOSITE PARTS </li></a>
 +
<a href = "https://2015.igem.org/Team:Columbia_NYC/Part_Collection"> <li> PART COLLECTION </li></a>
 +
</ul>
 +
</li></a>
  
/* Header Vector Formatting START */
+
<a href="https://2015.igem.org/Team:Columbia_NYC/Notebook"><li> THE NOTEBOOK </li></a>
#header {
+
height: auto;
+
border-bottom: 1px solid #1D323C;
+
margin-left: 222px;
+
background-color: rgba(71, 121, 146, 0.25);
+
text-align: center;
+
font-family: "Courier New", Courier, monospace;
+
color: white;
+
}
+
  
#header h1 {
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Attributions"> <li> ATTRIBUTIONS </li></a>
padding: 0;
+
border: 0;
+
margin: 0;
+
font-size: 72px;
+
text-shadow: 2px 0 black, 0 2px black, -2px 0 black, 0 -2px black;
+
text-decoration: underline;
+
}
+
  
#header p {
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Collaborations"><li> COLLABORATIONS </li></a>
padding: 5px;
+
margin: 0;
+
text-shadow: 1px 0 black, 0 1px black, -1px 0 black, 0 -1px black;
+
font-size: 18px;
+
}
+
  
#header br {
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Practices"><li> HUMAN PRACTICE </li></a>
line-height: 5px;
+
}
+
/* Header Vector Formatting END */
+
</style>
+
<!-- CSS END -->
+
  
</head>
+
<a href="https://2015.igem.org/Team:Columbia_NYC/Safety"><li> LAB SAFETY </li></a>
  
<body>
+
<a href = "https://2015.igem.org/Team:Columbia_NYC/Sponsors"> <li> OUR SPONSORS </a>
  
<div id = "contentBox">
 
<!-- Menu START -->
 
<div id = "menu">
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Description"> <img src = "https://static.igem.org/mediawiki/2015/9/9f/Columbia_NYC_ColumbiaUniversityLogo.png" alt = "Columbia Logo" style = "width: 180px; height: auto;"> </a>
 
 
<ul class = "tab">
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC"> <li> COLUMBIA HOME </li></a>
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Team"> <li> TEAM MEMBERS </li></a>
 
 
<a href = "#"> <li> THE PROJECT
 
<ul class = "subTab">
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Description"> <li> DESCRIPTION </li></a>
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Design"> <li> DESIGN </li></a>
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Experiments"> <li> EXPERIMENTS </li></a>
 
<a href="https://2015.igem.org/Team:Columbia_NYC/Measurement"><li>MEASUREMENTS</li></a>
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Results"> <li> RESULTS </li></a>
 
 
</ul>
 
</ul>
</li></a>
 
 
<a href = "#"> <li> PARTS RECORD
 
<ul class = "subTab">
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Parts"> <li> TEAM PARTS </li></a>
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Basic_Part"> <li> BASIC PARTS </li></a>
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Composite_Part"> <li> COMPOSITE PARTS </li></a>
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Part_Collection"> <li> PART COLLECTION </li></a>
 
</ul>
 
</li></a>
 
 
<a href="https://2015.igem.org/Team:Columbia_NYC/Notebook"><li> THE NOTEBOOK </li></a>
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Attributions"> <li> ATTRIBUTIONS </li></a>
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Collaborations"><li> COLLABORATION </li></a>
 
 
<a href="https://2015.igem.org/Team:Columbia_NYC/Safety"><li> LAB SAFETY </li></a>
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Practices"><li> HUMAN PRACTICE </li></a>
 
 
<a href = "https://2015.igem.org/Team:Columbia_NYC/Sponsors"> <li> OUR SPONSORS </a>
 
 
</ul>
 
  
<a href = "https://2015.igem.org/"> <img src = "https://static.igem.org/mediawiki/2015/4/46/Columbia_NYC_iGEMLogo.png" alt = "iGEM Logo" style = "width: 180px; height: auto;"> </a>
+
</div>
 +
</nav>
  
 +
<div id = "contentContainer">
 +
</div>
 
</div>
 
</div>
<!-- Menu END -->
 
  
</html>
+
</body>

Revision as of 19:36, 11 September 2015