Difference between revisions of "Team:TU Darmstadt/Templates/CSS"
(Created page with "{{Template_All_Teams}} <!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- Start of CSS--> <style type="text/css"> /* since the b...") |
|||
| Line 6: | Line 6: | ||
<!-- Start of CSS--> | <!-- Start of CSS--> | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
/* PAGE LAYOUT */ | /* PAGE LAYOUT */ | ||
| − | + | /* Change Background color*/ | |
| − | /* | + | |
body { | body { | ||
| − | background-color: # | + | background-color: #fff; |
} | } | ||
/* 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: 978px; |
overflow:hidden; | overflow:hidden; | ||
float:left; | float:left; | ||
| Line 39: | Line 22: | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
background-color: #fff; | background-color: #fff; | ||
| − | border-bottom: | + | 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; | ||
} | } | ||
| Line 45: | Line 32: | ||
#menuContainer { | #menuContainer { | ||
float:left; | float:left; | ||
| − | width: | + | width: 134px; |
padding: 20px 0px; | padding: 20px 0px; | ||
| − | + | border-top: 14px solid #565656; | |
| − | border-top: | + | background-color: #E8E8E9; |
| − | + | ||
} | } | ||
| Line 57: | Line 43: | ||
padding-right:10px; | padding-right:10px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
| − | width: | + | width: 814px; |
padding-left: 20px; | padding-left: 20px; | ||
float: left; | float: left; | ||
| − | |||
background-color: #fff; | background-color: #fff; | ||
| − | font-family: " | + | 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*/ | ||
| Line 84: | Line 69: | ||
/*This changes the color and font family */ | /*This changes the color and font family */ | ||
#contentContainer h1, h2, h3, h4, h5, h6 { | #contentContainer h1, h2, h3, h4, h5, h6 { | ||
| − | + | color: #565656; | |
| − | color: # | + | |
border-bottom: none; | border-bottom: none; | ||
font-weight: bold; | font-weight: bold; | ||
| + | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
margin-top:10px; | margin-top:10px; | ||
} | } | ||
| Line 94: | Line 79: | ||
#contentContainer a { | #contentContainer a { | ||
font-weight: bold; | font-weight: bold; | ||
| − | color: # | + | color: #23b593; |
} | } | ||
/* 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: # | + | color: #59bf92; |
} | } | ||
/*Change the styling of tables */ | /*Change the styling of tables */ | ||
#contentContainer table { | #contentContainer table { | ||
| − | border: | + | border: 1px solid #565656; |
border-collapse: collapse; | border-collapse: collapse; | ||
| + | width: 90% | ||
margin: auto; | margin: auto; | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
| Line 115: | Line 101: | ||
/*Change the styling of table cells*/ | /*Change the styling of table cells*/ | ||
#contentContainer td { | #contentContainer td { | ||
| − | |||
padding: 10px; | padding: 10px; | ||
| − | border: | + | border: 1px solid #565656; |
border-collapse: collapse; | border-collapse: collapse; | ||
vertical-align: text-top; | vertical-align: text-top; | ||
} | } | ||
| − | |||
/*Change the styling of table headers */ | /*Change the styling of table headers */ | ||
#contentContainer th { | #contentContainer th { | ||
| − | background-color: # | + | background-color: #E8E8E9; |
padding: 10px; | padding: 10px; | ||
| − | border: | + | border: 1px solid #565656; |
border-collapse: collapse; | border-collapse: collapse; | ||
vertical-align: text-top; | vertical-align: text-top; | ||
} | } | ||
| − | |||
| Line 139: | Line 122: | ||
/*Styling for the links in the menu */ | /*Styling for the links in the menu */ | ||
#menuContainer a { | #menuContainer a { | ||
| − | color: # | + | color: #565656; |
text-decoration:none; | text-decoration:none; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 162: | Line 145: | ||
#menuContainer li:hover { | #menuContainer li:hover { | ||
color: #FFF; | color: #FFF; | ||
| − | background-color: # | + | background-color: #24B694; |
} | } | ||
| Line 178: | Line 161: | ||
position: absolute; | position: absolute; | ||
float:right; | float:right; | ||
| − | margin-left: | + | margin-left: 134px; |
margin-top:-42px; | margin-top:-42px; | ||
} | } | ||
| Line 184: | Line 167: | ||
/*Style the submenu buttons*/ | /*Style the submenu buttons*/ | ||
#menuContainer li ul li{ | #menuContainer li ul li{ | ||
| − | background-color: # | + | background-color: #59BF92; |
padding-left:20px; | padding-left:20px; | ||
padding-right:20px; | padding-right:20px; | ||
| Line 190: | Line 173: | ||
padding-top:10px; | padding-top:10px; | ||
margin-top:-2px; | margin-top:-2px; | ||
| − | color: # | + | color: #565656; |
| − | width: | + | width: 150px; |
} | } | ||
| Line 204: | Line 187: | ||
/* highlight box for special messages */ | /* highlight box for special messages */ | ||
| − | + | .highlightBox { | |
| − | + | width:500px; | |
| − | + | margin:auto; | |
| − | + | background-color: #E8E8E9; | |
| − | + | margin-bottom: 15px; | |
| − | + | margin-top: 15px; | |
| − | + | padding: 15px; | |
| − | + | padding-top: 5px; | |
| − | + | } | |
| Line 220: | Line 203: | ||
<!-- Start of the template html elements. --> | <!-- Start of the template html elements. --> | ||
| − | <div id ="mainContainer"><!-- | + | <div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.--> |
| + | |||
| − | |||
<div id="bannerContainer"> | <div id="bannerContainer"> | ||
<br><br> | <br><br> | ||
| Line 236: | Line 219: | ||
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> | <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> | ||
<ul> | <ul> | ||
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example"><li>HOME</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Team"><li>TEAM</li></a> |
<a href="#"><li>PROJECT | <a href="#"><li>PROJECT | ||
<ul> | <ul> | ||
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Description"><li>Description</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Experiments"><li>Experiments & Protocols</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Results"><li>Results</li></a> |
| + | <a href="https://2015.igem.org/Team:Example/Design"><li>Design</li></a> | ||
</ul> | </ul> | ||
</li></a> | </li></a> | ||
| Line 250: | Line 234: | ||
<a href="#"><li>PARTS | <a href="#"><li>PARTS | ||
<ul> | <ul> | ||
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Parts"><li>Team Parts</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Basic_Part"><li>Basic Parts</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Composite_Part"><li>Composite Parts</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Part_Collection"><li>Part Collection</li></a> |
</ul> | </ul> | ||
</li></a> | </li></a> | ||
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Notebook"><li>NOTEBOOK</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Attributions"><li>ATTRIBUTIONS</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Collaborations"><li>COLLABORATIONS</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Practices"><li>HUMAN PRACTICES</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Safety"><li>SAFETY</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Modeling"><li>MODELING</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Measurement"><li>MEASUREMENT</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Software"><li>SOFTWARE</li></a> |
| − | <a href="https://2015.igem.org/Team: | + | <a href="https://2015.igem.org/Team:Example/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a> |
</ul> | </ul> | ||
| Line 280: | Line 264: | ||
<!-- Start of content --> | <!-- Start of content --> | ||
| − | <div id="contentContainer"> <!-- | + | <div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> |
</html> | </html> | ||
Revision as of 10:47, 1 September 2015