Difference between revisions of "Template:TeamTemplateA"
Line 2: | Line 2: | ||
<html> | <html> | ||
− | + | <!-- Start of CSS--> | |
+ | <style type="text/css"> | ||
− | + | /* WIKI SETTINGS*/ | |
− | + | ||
− | /* | + | |
− | + | /* Remove footer, catlinks and logos */ | |
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading { | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading { | ||
display: none; | display: none; | ||
} | } | ||
− | + | ||
− | + | /* Set up a width, height and color of the body wrapper*/ | |
body { | body { | ||
width: 100%; | width: 100%; | ||
Line 20: | Line 19: | ||
} | } | ||
− | + | /*-- Make page full width and remove borders */ | |
#globalWrapper, #content { | #globalWrapper, #content { | ||
width: 100%; | width: 100%; | ||
Line 30: | Line 29: | ||
} | } | ||
− | + | /*Clear wiki default settings for the top part of the wiki page */ | |
#top-section { | #top-section { | ||
border: 0 none; | border: 0 none; | ||
Line 41: | Line 40: | ||
} | } | ||
− | #top_menu_inside { | + | /*left align Black Menu Bar */ |
− | + | #top_menu_inside { | |
− | + | margin-left: 20px; | |
+ | } | ||
− | |||
− | + | ||
+ | /* PAGE LAYOUT */ | ||
+ | |||
+ | /* Creates a container that will wrap all of the content inside your wiki pages. */ | ||
#mainContainer { | #mainContainer { | ||
width: 978px; | width: 978px; | ||
Line 62: | Line 64: | ||
} | } | ||
− | + | /* Creates the container for the menu */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#menuContainer { | #menuContainer { | ||
float:left; | float:left; | ||
Line 79: | Line 73: | ||
} | } | ||
− | + | /* Creates the container for the content */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#contentContainer { | #contentContainer { | ||
padding-top:20px; | padding-top:20px; | ||
Line 149: | Line 85: | ||
font-family: "Trebuchet MS", Helvetica, sans-serif; | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
} | } | ||
+ | |||
+ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
+ | |||
+ | /*Change the styling of text for everything inside main container*/ | ||
+ | #mainContainer p { | ||
+ | font-size: 13px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
− | + | /*This changes the color and font family */ | |
#contentContainer h1, h2, h3, h4, h5, h6 { | #contentContainer h1, h2, h3, h4, h5, h6 { | ||
color: #565656; | color: #565656; | ||
Line 159: | Line 104: | ||
} | } | ||
− | + | /*Style of the links - links are different inside the menu */ | |
#contentContainer a { | #contentContainer a { | ||
font-weight: bold; | font-weight: bold; | ||
Line 165: | Line 110: | ||
} | } | ||
− | + | /* Styling links on hover- links are different inside the menu */ | |
#contentContainer a:hover { | #contentContainer a:hover { | ||
color: #59bf92; | color: #59bf92; | ||
} | } | ||
− | + | /*Change the styling of tables */ | |
#contentContainer table { | #contentContainer table { | ||
border: 1px solid #565656; | border: 1px solid #565656; | ||
Line 182: | Line 127: | ||
} | } | ||
− | + | /*Change the styling of table cells*/ | |
#contentContainer td { | #contentContainer td { | ||
padding: 10px; | padding: 10px; | ||
Line 190: | Line 135: | ||
} | } | ||
− | + | /*Change the styling of table headers */ | |
#contentContainer th { | #contentContainer th { | ||
background-color: #E8E8E9; | background-color: #E8E8E9; | ||
Line 199: | Line 144: | ||
} | } | ||
− | + | ||
+ | |||
+ | /*MENU STYLING */ | ||
+ | |||
+ | /*Styling for the links in the menu */ | ||
+ | #menuContainer a { | ||
+ | color: #565656; | ||
+ | text-decoration:none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #menuContainer ul { | ||
+ | list-style: none; | ||
+ | margin-left:0px; | ||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #menuContainer ul li { | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | } | ||
+ | |||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #menuContainer li:hover { | ||
+ | color: #FFF; | ||
+ | background-color: #24B694; | ||
+ | } | ||
+ | |||
+ | /*Submenus are not displayed as default*/ | ||
+ | #menuContainer li ul { | ||
+ | display: none; | ||
+ | padding-top:15px; | ||
+ | margin-left: -19px; | ||
+ | } | ||
+ | |||
+ | /*Submenus are displayed when hovering the menu button */ | ||
+ | #menuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:right; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
+ | |||
+ | /*Style the submenu buttons*/ | ||
+ | #menuContainer li ul li{ | ||
+ | background-color: #59BF92; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | margin-top:-2px; | ||
+ | color: #565656; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | /*CLASSES */ | ||
+ | |||
+ | /*Clear class for all the pages, adds spacing too*/ | ||
+ | .clear{ | ||
+ | clear:both; | ||
+ | height: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* highlight box for special messages */ | ||
.highlightBox { | .highlightBox { | ||
width:500px; | width:500px; | ||
Line 210: | Line 225: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
− | + | <!-- End of CSS --> | |
+ | <!-- Start of the template html elements. --> | ||
+ | <div id ="mainContainer"><!--This div will close on the page.--> | ||
− | + | <img src="https://static.igem.org/mediawiki/2015/3/3b/Banner_templateA.jpg"> | |
− | <img src="https://static.igem.org/mediawiki/2015/3/3b/Banner_templateA.jpg"> | + | |
+ | |||
+ | <!-- Start of menu --> | ||
<div id="menuContainer"> | <div id="menuContainer"> | ||
− | + | ||
+ | <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> | ||
+ | <ul> | ||
<a href="https://2015.igem.org/Team:Example2"><li>HOME</li></a> | <a href="https://2015.igem.org/Team:Example2"><li>HOME</li></a> | ||
<a href="https://2015.igem.org/Team:Example2/Team"><li>TEAM</li></a> | <a href="https://2015.igem.org/Team:Example2/Team"><li>TEAM</li></a> | ||
− | |||
<a href="#"><li>PROJECT | <a href="#"><li>PROJECT | ||
Line 250: | Line 265: | ||
<a href="https://2015.igem.org/Team:Example2/Attributions"><li>ATTRIBUTIONS</li></a> | <a href="https://2015.igem.org/Team:Example2/Attributions"><li>ATTRIBUTIONS</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example2/Collaborations"><li>COLLABORATIONS</li></a> | ||
<a href="https://2015.igem.org/Team:Example2/Practices"><li>HUMAN PRACTICES</li></a> | <a href="https://2015.igem.org/Team:Example2/Practices"><li>HUMAN PRACTICES</li></a> | ||
Line 265: | Line 282: | ||
</ul> | </ul> | ||
</div> | </div> | ||
+ | <!-- End of menu --> | ||
− | + | <!-- Start of content --> | |
− | <div id="contentContainer"> | + | <div id="contentContainer"> <!--This div will close on the page.--> |
</html> | </html> |
Revision as of 16:50, 13 March 2015
![](https://static.igem.org/mediawiki/2015/3/3b/Banner_templateA.jpg)