Difference between revisions of "Template:Technion HS Israel2"
Line 1: | Line 1: | ||
− | < | + | <html> |
− | + | ||
− | + | ||
− | + | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | ||
− | + | /* PAGE LAYOUT */ | |
− | + | ||
− | # | + | /* Change Background color*/ |
− | + | body { | |
− | #top- | + | background-color: #fff; |
− | + | } | |
− | + | ||
− | # | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ |
− | + | #mainContainer { | |
− | + | width: 925px; | |
− | + | overflow:hidden; | |
− | + | float:left; | |
− | margin- | + | margin-left:20px; |
− | + | margin-bottom: 10px; | |
− | + | background-color: #fff; | |
− | + | border-bottom: 14px solid #565656; | |
− | + | border-right: 2px solid #565656; | |
− | + | border-left: 2px solid #565656; | |
− | + | border-top: 2px solid #565656; | |
+ | font-family: Helvetica, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Creates the container for the menu */ | ||
+ | #menuContainer { | ||
+ | float:left; | ||
+ | width: 100%; | ||
+ | padding: 20px 0px; | ||
+ | border-top: 14px solid #565656; | ||
+ | background-color: #E8E8E9; | ||
+ | font-size:20px; | ||
+ | } | ||
+ | |||
+ | /* Creates the container for the content */ | ||
+ | #contentContainer { | ||
+ | padding-top:20px; | ||
+ | padding-right:10px; | ||
+ | margin-bottom: 20px; | ||
+ | width: 814px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | background-color: #fff; | ||
+ | border-top: 14px solid #565656; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | } | ||
+ | |||
+ | /*this is Matar's adition, let's hope it works special Attention stuff */ | ||
+ | /* Creates the container for the stuff i want you (group members) to notice */ | ||
+ | #NoticeMe { | ||
+ | padding-top:20px; | ||
+ | padding-right:10px; | ||
+ | margin-bottom: 20px; | ||
+ | width: 814px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | background-color: #fff; | ||
+ | border-top: 14px solid #565656; | ||
+ | font-family: Helvetica, 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; | ||
+ | } | ||
+ | |||
+ | /*This changes the color and font family */ | ||
+ | #contentContainer h1, h2, h3, h4, h5, h6 { | ||
+ | color: #565656; | ||
+ | border-bottom: none; | ||
+ | font-weight: bold; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | /*this is Matar's adition, let's hope it works special Attention stuff */ | ||
+ | |||
+ | /*This changes the color and font family */ | ||
+ | #NoticeMe h1, h2, h3, h4, h5, h6 { | ||
+ | color: hsl(180, 100%, 60%); | ||
+ | border-bottom: none; | ||
+ | font-weight: bold; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Style of the links - links are different inside the menu */ | ||
+ | #contentContainer a { | ||
+ | font-weight: bold; | ||
+ | color: #23b593; | ||
+ | } | ||
+ | |||
+ | /* Styling links on hover- links are different inside the menu */ | ||
+ | #contentContainer a:hover { | ||
+ | color: #59bf92; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of tables */ | ||
+ | #contentContainer table { | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | width: 90% | ||
+ | margin: auto; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of table cells*/ | ||
+ | #contentContainer td { | ||
+ | padding: 10px; | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of table headers */ | ||
+ | #contentContainer th { | ||
+ | background-color: #E8E8E9; | ||
+ | padding: 10px; | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*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 { | ||
+ | display:block; | ||
+ | list-style: none; | ||
+ | margin-left:0px; | ||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #menuContainer ul li { | ||
+ | list-style-type:none; | ||
+ | display:inline; | ||
+ | width: 10px; | ||
+ | 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: relative; | ||
+ | float:right; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
+ | |||
+ | /*Style the submenu buttons*/ | ||
+ | #menuContainer li ul li{ | ||
+ | display:block; | ||
+ | position:relative; | ||
+ | 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 { | ||
+ | width:500px; | ||
+ | margin:auto; | ||
+ | background-color: #E8E8E9; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | padding: 15px; | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
<!-- End of CSS --> | <!-- End of CSS --> | ||
− | < | + | |
− | + | ||
− | </ | + | <!-- Start of the template html elements. --> |
+ | <div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content 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>IIT_Madras_Logo.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:Example"><li>Home</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Team"><li>Team</li></a> | ||
+ | |||
+ | <a href="#"><li>Project | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Example/Description"><li>Description</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example/Experiments"><li>Experiments & Protocols</li></a> | ||
+ | <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> | ||
+ | </li></a> | ||
+ | |||
+ | <a href="#"><li>Parts | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Example/Parts"><li>Team Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example/Basic_Part"><li>Basic Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example/Composite_Part"><li>Composite Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Example/Part_Collection"><li>Part Collection</li></a> | ||
+ | </ul> | ||
+ | </li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Notebook"><li>Notebook</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Attributions"><li>Attributions</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Collaborations"><li>Collaborations</li></a> | ||
+ | |||
+ | <!-- <a href="https://2015.igem.org/Team:Example/Practices"><li>Human Practises</li></a> --> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Safety"><li>Safety</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Modeling"><li>Modelling</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Example/Measurement"><li>Measurement</li></a> | ||
+ | |||
+ | <!-- <a href="https://2015.igem.org/Team:Example/Software"><li>Software</li></a> --> | ||
+ | |||
+ | <!-- <a href="https://2015.igem.org/Team:Example/Entrepreneurship"><li>Entrepreneurship</li></a> --> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | <!-- End of menu --> | ||
+ | |||
+ | <!-- Start of content --> | ||
+ | <div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> | ||
</html> | </html> |
Revision as of 08:18, 27 June 2015