Team:UNAM-Genomics Mexico/Templates/Notebook
From 2011.igem.org
(Difference between revisions)
m (v1.0.2 corrected image dimensions) |
|||
(31 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html> | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
+ | |||
+ | <!-- | ||
+ | @VERSION 1.2.3 | ||
+ | @NAME /Templates/Notebook | ||
+ | @DESC This is a wiki template designed to contain the background layout and menu of all our page. | ||
+ | --> | ||
<head> | <head> | ||
- | < | + | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
- | / | + | <link href="basic_layout.css" rel="stylesheet" type="text/css"></link> |
- | + | <link href="basic_layout.js" rel="" type=""></link> | |
- | + | <title>UNAM-Genomics_Mexico</title> | |
- | + | <script type="text/javascript"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | var _gaq = _gaq || []; | |
- | + | _gaq.push(['_setAccount', 'UA-19624614-2']); | |
- | + | _gaq.push(['_trackPageview']); | |
- | + | ||
- | + | (function() { | |
- | + | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
- | + | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
+ | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
+ | })(); | ||
+ | |||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | new Control.Tabs('tabs_example_three',{ | ||
+ | hover: true | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | //Constants containing the menu cell positions (yeah, they're deffined as variables thx to IE) | ||
+ | var RowPositions = new Array( "cat", "link", "mar"); | ||
+ | var ColPositions = new Array( "alpha", "beta", "gamma", "delta", "epsilon", "zeta"); | ||
+ | var OddPositions = new Array( "alpha", "gamma", "epsilon"); | ||
+ | |||
+ | var currColEvenness = ""; | ||
+ | |||
+ | //Constants containing the images for the table cells (odd/even/active Category/Link/Margin) | ||
+ | // odd Cells | ||
+ | var oCCellBg = "url(https://static.igem.org/mediawiki/2011/9/95/Darkgrey_cardboard_332x196_UGM.png)"; | ||
+ | var oLCellBg = "url(https://static.igem.org/mediawiki/2011/e/e6/Stained_grey_cardboard_332x196_UGM.png)"; | ||
+ | var oMCellBg = "url(https://static.igem.org/mediawiki/2011/9/95/Darkgrey_cardboard_332x196_UGM.png)"; | ||
+ | // even Cells | ||
+ | var eCCellBg = "url(https://static.igem.org/mediawiki/2011/a/ae/Burnt_cardboard_332x196_UGM.png)"; | ||
+ | var eLCellBg = "url(https://static.igem.org/mediawiki/2011/6/66/Cardboard_332x196_UGM.png)"; | ||
+ | var eMCellBg = "url(https://static.igem.org/mediawiki/2011/a/ae/Burnt_cardboard_332x196_UGM.png)"; | ||
+ | // active Cells | ||
+ | var aCCellBg = "url(https://static.igem.org/mediawiki/2011/e/e8/Green_paper_UGM.png)"; | ||
+ | var aLCellBg = "url(https://static.igem.org/mediawiki/2011/0/03/Light_green_paper_UGM.png)"; | ||
+ | var aMCellBg = "url(https://static.igem.org/mediawiki/2011/e/e8/Green_paper_UGM.png)"; | ||
+ | |||
+ | //Receive a cell id and return it's prefix (which describes it's row) or it's suffix (it's col) | ||
+ | function GetCellRow(currentId){ | ||
+ | var pattern, i; | ||
+ | for( i=0; i < RowPositions.length; i++){ | ||
+ | pattern = new RegExp("^" + RowPositions[i]); | ||
+ | if( pattern.test(currentId)){ | ||
+ | return( RowPositions[i]); | ||
+ | } | ||
+ | } | ||
+ | return( false); | ||
+ | } | ||
+ | function GetCellCol(currentId){ | ||
+ | var pattern, i; | ||
+ | for( i=0; i < ColPositions.length; i++){ | ||
+ | pattern = new RegExp(ColPositions[i] + "$"); | ||
+ | if( pattern.test(currentId)){ | ||
+ | return( ColPositions[i]); | ||
+ | } | ||
+ | } | ||
+ | return( false); | ||
} | } | ||
- | + | //Classiffy column suffixes in odd or even suffixes | |
- | + | function ColEvenness(column){ | |
- | + | var i; | |
- | + | for( i=0; i < OddPositions.length; i++){ | |
+ | if( column == OddPositions[i]){ | ||
+ | return( "odd"); | ||
+ | } | ||
+ | } | ||
+ | return( "even"); | ||
} | } | ||
- | + | ||
- | + | //Function for lightening cells according to their position | |
- | + | function LightenCell(row, column){ | |
- | + | var cell = document.getElementById( row + column); | |
- | + | switch (row){ | |
+ | case "cat": | ||
+ | cell.style.backgroundImage = aCCellBg; | ||
+ | break; | ||
+ | case "link": | ||
+ | cell.style.backgroundImage = aLCellBg; | ||
+ | break; | ||
+ | case "mar": | ||
+ | cell.style.backgroundImage = aMCellBg; | ||
+ | break; | ||
+ | } | ||
} | } | ||
- | + | //Function to Lighten the current menu table column | |
- | + | function LightenMenu(currentCell){ | |
- | + | var column = GetCellCol( currentCell.id ); | |
+ | LightenCell( "cat", column); | ||
+ | LightenCell("link", column); | ||
+ | LightenCell( "mar", column); | ||
+ | currColEvenness = ColEvenness(column); | ||
} | } | ||
- | + | //Function for darkening cells according to their position and evenness | |
- | + | function DarkenCell(row, column){ | |
- | + | var cell = document.getElementById( row + column); | |
- | + | if( currColEvenness == "odd"){ | |
- | + | switch (row){ | |
- | + | case "cat": | |
- | + | cell.style.backgroundImage = oCCellBg; | |
+ | break; | ||
+ | case "link": | ||
+ | cell.style.backgroundImage = oLCellBg; | ||
+ | break; | ||
+ | case "mar": | ||
+ | cell.style.backgroundImage = oMCellBg; | ||
+ | break; | ||
+ | } | ||
+ | } else if( currColEvenness == "even"){ | ||
+ | switch (row){ | ||
+ | case "cat": | ||
+ | cell.style.backgroundImage = eCCellBg; | ||
+ | break; | ||
+ | case "link": | ||
+ | cell.style.backgroundImage = eLCellBg; | ||
+ | break; | ||
+ | case "mar": | ||
+ | cell.style.backgroundImage = eMCellBg; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
} | } | ||
- | + | //Function to Darken the current menu table column | |
- | + | function DarkenMenu(currentCell){ | |
- | + | var column = GetCellCol( currentCell.id ); | |
- | + | DarkenCell( "cat", column); | |
+ | DarkenCell("link", column); | ||
+ | DarkenCell( "mar", column); | ||
+ | currColEvenness = ""; | ||
} | } | ||
- | + | </script> | |
- | + | <style> | |
+ | |||
+ | dummy.rule { | ||
+ | /*Nothing here*/ | ||
} | } | ||
- | + | body{ | |
- | + | background-color: black; | |
- | + | background-image: url("https://static.igem.org/mediawiki/2011/9/98/Black_cardboard_tiled_UGM.png"); | |
- | padding: | + | margin: 0; |
+ | padding: 0; | ||
+ | text-align: center; | ||
+ | font-size:medium; | ||
+ | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | ||
+ | "Segoe Print", "Comic Sans MS", Verdana, sans-serif; | ||
} | } | ||
- | div | + | div#globalWrapper{ |
- | + | background-color: transparent; | |
- | + | font-size: 100%; | |
+ | } | ||
+ | |||
+ | /*content and bodyContent are given the same properties to avoid problems*/ | ||
+ | div#content{ | ||
+ | position: relative; | ||
+ | width: 1000px; | ||
+ | margin: 0 auto; | ||
padding: 0px 0px 0px 0px; | padding: 0px 0px 0px 0px; | ||
+ | border: none; | ||
+ | z-index: 0; | ||
+ | background-color: transparent; | ||
+ | color: #000000; | ||
+ | text-align:justify; | ||
+ | line-height: 1.2em; | ||
+ | font-size:100%; | ||
+ | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | ||
+ | "Segoe Print", "Comic Sans MS", Verdana, sans-serif; | ||
} | } | ||
- | div | + | div#bodyContent{ |
- | + | position: relative; | |
- | + | width: 1000px; | |
- | + | margin: 0 auto; | |
padding: 0px 0px 0px 0px; | padding: 0px 0px 0px 0px; | ||
+ | border: none; | ||
+ | z-index: 0; | ||
+ | background-color: transparent; | ||
+ | color: #000000; | ||
+ | text-align:justify; | ||
+ | line-height: 1.2em; | ||
+ | font-size:100%; | ||
+ | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | ||
+ | "Segoe Print", "Comic Sans MS", Verdana, sans-serif; | ||
+ | /* | ||
+ | Fonts I recomend the most: | ||
+ | "Maiandra GD", Garamond, | ||
+ | Fonts that resemble handwriting but are uncomfortable to read. | ||
+ | These letters are too decorated: | ||
+ | "Viner Hand ITC","Bradley Hand ITC","Lucida Handwriting","Tempus Sans ITC", | ||
+ | These letter is too small: | ||
+ | Gabriola, | ||
+ | These letter is too narrow: | ||
+ | "Juice ITC", | ||
+ | */ | ||
} | } | ||
- | + | div#content h1.firstHeading{ | |
- | h1. | + | display: none; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | div#bodyContent p{ | ||
+ | margin: 0em 0em 0em 0em; | ||
+ | } | ||
+ | div#contentSub{ | ||
+ | margin: 0 0 0.7em 0; | ||
+ | } | ||
+ | div#catlinks{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*********************************** | ||
+ | iGEM header instructions | ||
+ | ***********************************/ | ||
+ | |||
- | + | /******************************* | |
- | color:# | + | Body Text code |
- | + | *******************************/ | |
+ | div#textContent{ | ||
+ | background-color: #FFFFFF; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2011/4/40/White_paper_tiled_UGM.png"); | ||
+ | margin: 0px 0px 0px 0px; | ||
+ | padding: 15px 45px 15px 45px; | ||
} | } | ||
- | + | div#textContent p{ | |
- | + | margin: .4em 0 .5em 0; | |
- | + | line-height: 1.5em; | |
} | } | ||
- | + | h1{ | |
- | + | text-align:center; | |
- | text- | + | |
} | } | ||
- | + | h2{} | |
- | + | h3{} | |
- | text-decoration:none; | + | h4{} |
+ | #textContent a{ | ||
+ | text-decoration: none; | ||
+ | color: #378256; /*green*/ | ||
} | } | ||
- | a | + | #textContent a:visited{ |
- | color:# | + | color: #34924c; /*lighter green*/ |
- | + | ||
} | } | ||
- | + | img.hydrobium_logo{ | |
- | + | float: left; | |
- | + | height: 120px; | |
+ | width: 160px; | ||
} | } | ||
- | a. | + | #textContent a.anchor{ |
- | color:# | + | color: #000000; |
- | + | ||
} | } | ||
- | + | span.sp_name{ | |
- | + | /*use this span class to format species names*/ | |
- | text-decoration:none; | + | text-decoration: none; |
+ | font-style: italic; | ||
} | } | ||
- | + | span.gene_name{ | |
- | + | /*use this span class to format gene names*/ | |
- | text-decoration:none; | + | text-decoration: none; |
+ | font-style: italic; | ||
} | } | ||
- | + | span.lat_phrase{ | |
- | + | /*use this span class to format latin phrases*/ | |
- | text-decoration: | + | text-decoration: none; |
+ | font-style: italic; | ||
} | } | ||
- | /* | + | |
- | + | /******************************* | |
- | + | iGEM Footer Instructions | |
- | width: | + | *******************************/ |
- | + | div#footer-box { | |
- | border:none; | + | margin: 0 auto; |
+ | width: 990px; | ||
+ | padding: 5px; | ||
+ | background-color: #6b6b6b; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2011/5/5b/Darkgrey_noise_UGM.png"); | ||
+ | border: none; | ||
} | } | ||
- | + | div#footer-box div#footer ul#f-list li a { | |
- | + | color: silver; | |
- | + | ||
- | + | ||
} | } | ||
+ | div#footer-box div#footer ul#f-list li a:hover { | ||
+ | color: white; | ||
+ | } | ||
+ | .tabbed_images { | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | clear:both; | ||
+ | } | ||
- | </style> | + | .tabbed_images li { |
+ | list-style:none; | ||
+ | float:left; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li a { | ||
+ | border:1px solid #ccc; | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:0 10px 0 0; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li a.active, | ||
+ | .tabbed_images li a:hover { | ||
+ | border:1px solid #333; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li a img { | ||
+ | border:none; | ||
+ | padding:2px; | ||
+ | margin:0; | ||
+ | margin-bottom:-5px; | ||
+ | } | ||
+ | |||
+ | #image_1, | ||
+ | #image_2, | ||
+ | #image_3, | ||
+ | #image_4, | ||
+ | #image_5 { | ||
+ | margin-top:10px; | ||
+ | padding:2px; | ||
+ | border:1px solid #ccc; | ||
+ | </style> | ||
</head> | </head> | ||
+ | |||
+ | <body> | ||
+ | <ul class="tabbed_images" id="tabs_example_three"> | ||
+ | <li><a href="#image_1"><img src="/stylesheets/sample_images/tabs_example_1_small.jpg"/></a></li> | ||
+ | <li><a href="#image_2"><img src="/stylesheets/sample_images/tabs_example_2_small.jpg"/></a></li> | ||
+ | <li><a href="#image_3"><img src="/stylesheets/sample_images/tabs_example_3_small.jpg"/></a></li> | ||
+ | <li><a href="#image_4"><img src="/stylesheets/sample_images/tabs_example_4_small.jpg"/></a></li> | ||
+ | </ul> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_1_big.jpg" id="image_1"/> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_2_big.jpg" id="image_2"/> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_3_big.jpg" id="image_3"/> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_4_big.jpg" id="image_4"/> <!--BEG Menu Table code--> | ||
+ | |||
+ | </body> | ||
</html> | </html> | ||
+ | <div id="textContent"> | ||
+ | {{{content}}} | ||
+ | </div> |
Latest revision as of 04:09, 25 September 2011
{{{content}}}