Difference between revisions of "Template:TeamTemplateC"
m (Protected "Template:TeamTemplateC" ([edit=sysop] (indefinite) [move=sysop] (indefinite)) [cascading]) |
|||
(26 intermediate revisions by 6 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"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | /* since the background is dark, we change the color of the text and links so they are visible on "show preview" mode */ | + | |
+ | |||
+ | /* since the background is dark, we change the color of the text and links so they are visible on "show preview" mode */ | ||
p, #content { | p, #content { | ||
Line 33: | Line 23: | ||
− | + | /* PAGE LAYOUT */ | |
− | + | ||
− | + | ||
− | + | /* Set up a width, height and color of the body wrapper*/ | |
− | + | body { | |
− | + | background-color: #29221F; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | /* | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ |
− | + | ||
− | + | ||
#mainContainer { | #mainContainer { | ||
width: 980px; | width: 980px; | ||
− | |||
− | |||
− | |||
overflow:hidden; | overflow:hidden; | ||
+ | float:left; | ||
+ | margin-left:20px; | ||
+ | margin-bottom: 10px; | ||
+ | background-color: #fff; | ||
+ | border-bottom: 20px solid #14747D; | ||
} | } | ||
− | + | /* Creates the container for the menu */ | |
− | #menuContainer { | + | #menuContainer { |
− | + | float:left; | |
− | padding: 0px; | + | width: 150px; |
− | + | padding: 20px 0px; | |
− | + | background-color: #DB1E39; | |
− | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | + | border-top: 20px solid #14747D; |
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
} | } | ||
− | # | + | /* Creates the container for the content */ |
− | + | #contentContainer { | |
− | padding: | + | padding-top:20px; |
− | margin: | + | padding-right:10px; |
+ | margin-bottom: 20px; | ||
+ | width: 800px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | border-top: 20px solid #14747D; | ||
+ | background-color: #fff; | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
} | } | ||
− | # | + | /*Set up height place holder for the banner*/ |
− | + | #bannerContainer { | |
− | + | height:200px; | |
− | + | margin:auto; | |
− | + | text-align:center; | |
+ | color: #24B694; | ||
} | } | ||
− | + | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | |
− | + | ||
− | + | ||
− | # | + | /*Change the styling of text for everything inside main container*/ |
− | + | #mainContainer p { | |
− | + | font-size: 13px; | |
− | + | color: #000000; | |
− | + | ||
− | + | ||
− | color: # | + | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*This changes the color and font family */ | |
#contentContainer h1, h2, h3, h4, h5, h6 { | #contentContainer h1, h2, h3, h4, h5, h6 { | ||
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
Line 162: | Line 91: | ||
} | } | ||
− | + | /*Style of the links - links are different inside the menu */ | |
#contentContainer a { | #contentContainer a { | ||
font-weight: bold; | font-weight: bold; | ||
Line 168: | Line 97: | ||
} | } | ||
− | + | /* Styling links on hover- links are different inside the menu */ | |
#contentContainer a:hover { | #contentContainer a:hover { | ||
color: #14747D; | color: #14747D; | ||
} | } | ||
− | + | /*Change the styling of tables */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#contentContainer table { | #contentContainer table { | ||
border: 2px solid #29221F; | border: 2px solid #29221F; | ||
Line 198: | Line 113: | ||
} | } | ||
+ | /*Change the styling of table cells*/ | ||
#contentContainer td { | #contentContainer td { | ||
background-color: #fff; | background-color: #fff; | ||
Line 206: | Line 122: | ||
} | } | ||
+ | |||
+ | /*Change the styling of table headers */ | ||
#contentContainer th { | #contentContainer th { | ||
background-color: #F4F0D8; | background-color: #F4F0D8; | ||
Line 214: | Line 132: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*MENU STYLING */ | |
− | + | ||
− | + | /*Styling for the links in the menu */ | |
+ | #menuContainer a { | ||
+ | color: #fff; | ||
+ | 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: #14747D; | ||
+ | } | ||
+ | /*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: 150px; | |
− | + | margin-top:-42px; | |
− | + | } | |
− | + | ||
− | + | /*Style the submenu buttons*/ | |
+ | #menuContainer li ul li{ | ||
+ | background-color: #22BCB9; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | margin-top:-2px; | ||
+ | color: #28221E; | ||
+ | width: 170px; | ||
+ | } | ||
+ | /*CLASSES */ | ||
+ | |||
+ | /*Clear class for all the pages, adds spacing too*/ | ||
+ | .clear{ | ||
+ | clear:both; | ||
+ | height: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* highlight box for special messages */ | ||
+ | .highlightBox { | ||
+ | width:500px; | ||
+ | margin:auto; | ||
+ | background-color: #F4F0D8; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | padding: 15px; | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <!-- End of CSS --> | ||
+ | |||
+ | |||
+ | <!-- Start of the template html elements. --> | ||
+ | <div id ="mainContainer"><!--This div will close on the page.--> | ||
+ | |||
+ | |||
+ | <div id="bannerContainer"> | ||
+ | <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_Example_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 --> | |
− | + | <ul> | |
− | + | <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="#"><li>PROJECT | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Description"><li>Description</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Experiments"><li>Experiments & Protocols</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Results"><li>Results</li></a> | ||
+ | </ul> | ||
+ | </li></a> | ||
+ | <a href="#"><li>PARTS | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Parts"><li>Team Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Basic_Part"><li>Basic Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Composite_Part"><li>Composite Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Part_Collection"><li>Part Collection</li></a> | ||
+ | </ul> | ||
+ | </li></a> | ||
− | + | <a href="https://2015.igem.org/Team:Example2/Notebook"><li>NOTEBOOK</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/Safety"><li>SAFETY</li></a> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <a href="https://2015.igem.org/Team:Example2/Modeling"><li>MODELING</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example2/Measurement"><li>MEASUREMENT</li></a> | ||
− | </ | + | <a href="https://2015.igem.org/Team:Example2/Software"><li>SOFTWARE</li></a> |
+ | <a href="https://2015.igem.org/Team:Example2/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a> | ||
− | <div | + | </ul> |
+ | </div> | ||
+ | <!-- End of menu --> | ||
+ | <!-- Start of content --> | ||
+ | <div id="contentContainer"> <!--This div will close on the page.--> | ||
</html> | </html> |
Latest revision as of 15:45, 29 July 2015