Team:LMU-Munich/Templates/Page Header
From 2012.igem.org
(Difference between revisions)
m (changed link color (tentatively)) |
|||
(50 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html> | + | __NOTOC__<html> |
<style type="text/css"> | <style type="text/css"> | ||
/* hide some igem stuff... */ | /* hide some igem stuff... */ | ||
Line 32: | Line 32: | ||
border-top: 1px solid transparent; | border-top: 1px solid transparent; | ||
margin-top: -1px; | margin-top: -1px; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
body { | body { | ||
- | width: | + | background: url(https://static.igem.org/mediawiki/2012/e/e3/Team_LMU_banner.png) no-repeat 50% 20px white; |
+ | width: 1000px; /* against my better judgement… */ | ||
margin: 0 auto; | margin: 0 auto; | ||
- | |||
position: relative; | position: relative; | ||
} | } | ||
Line 109: | Line 104: | ||
display: 0; | display: 0; | ||
margin: 0; | margin: 0; | ||
- | padding: 0; | + | padding: 0 213px; |
- | background: # | + | background: url(https://static.igem.org/mediawiki/2012/8/86/Team_LMU_top.png) #785d99 repeat-y; |
+ | height: 2.5em; | ||
+ | } | ||
+ | |||
+ | #nav_shadow { | ||
+ | height: 100px; | ||
+ | margin: 0 -221px; | ||
+ | background: url(https://static.igem.org/mediawiki/2012/2/2c/Team_LMU_top_shadow.png) no-repeat; | ||
+ | margin-top: 154px; | ||
+ | margin-bottom: -98px; | ||
+ | } | ||
+ | |||
+ | #nav { | ||
height: 2.5em; | height: 2.5em; | ||
- | + | margin: 0 -213px; | |
- | + | padding-bottom: .4em; | |
+ | background: url(https://static.igem.org/mediawiki/2012/9/99/Team_LMU_bottom.png) #785d99 repeat-y; | ||
} | } | ||
Line 122: | Line 130: | ||
margin: 0; | margin: 0; | ||
float: left; | float: left; | ||
- | margin-right: | + | margin-right: 2px; |
height: 2.5em; | height: 2.5em; | ||
} | } | ||
#nav li:hover { | #nav li:hover { | ||
- | border-right: | + | border-right: 2px solid white; |
- | border-left: | + | border-left: 2px solid white; |
- | margin-left: - | + | margin-left: -2px; |
margin-right: 0; | margin-right: 0; | ||
} | } | ||
Line 140: | Line 148: | ||
#nav a, #nav strong { | #nav a, #nav strong { | ||
display: block; | display: block; | ||
- | background: # | + | background: #785d99; |
padding: .5em; | padding: .5em; | ||
height: 1.5em; | height: 1.5em; | ||
Line 151: | Line 159: | ||
text-decoration: none; | text-decoration: none; | ||
color: white; | color: white; | ||
- | background: # | + | background: #b381d9; |
+ | } | ||
+ | |||
+ | #nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a { | ||
+ | font-weight: bold; | ||
} | } | ||
Line 157: | Line 169: | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
- | margin | + | margin: 0; |
- | + | padding: 0; | |
+ | padding-top: .4em; | ||
top: 2.5em; | top: 2.5em; | ||
width: auto; | width: auto; | ||
- | background | + | background: transparent; |
+ | z-index: 100; | ||
} | } | ||
Line 169: | Line 183: | ||
height: 2.5em; | height: 2.5em; | ||
} | } | ||
+ | |||
+ | /* | ||
+ | round border experiments — do not work yet | ||
+ | #nav li li:last-child { | ||
+ | -moz-border-bottom-left-radius: 10px; | ||
+ | border-bottom-left-radius: 10px; | ||
+ | -moz-border-bottom-right-radius: 10px; | ||
+ | border-bottom-right-radius: 10px; | ||
+ | border-bottom: 3px solid #785d99; | ||
+ | border-left: 3px solid #785d99; | ||
+ | border-right: 3px solid #785d99; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | */ | ||
#nav li li a, #nav li li strong { | #nav li li a, #nav li li strong { | ||
border-top: 1px solid white; | border-top: 1px solid white; | ||
+ | font-weight: normal; | ||
} | } | ||
Line 200: | Line 229: | ||
#logo_lmu { | #logo_lmu { | ||
position: absolute; | position: absolute; | ||
- | right: | + | right: 60px; |
- | top: | + | top: 95px; |
} | } | ||
#logo_igem { | #logo_igem { | ||
position: absolute; | position: absolute; | ||
- | right: | + | right: 62px; |
- | top: | + | top: -5px; |
} | } | ||
#logo_beadzillus { | #logo_beadzillus { | ||
position: absolute; | position: absolute; | ||
- | left: | + | left: 155px; |
- | top: | + | top: 25px; |
} | } | ||
Line 234: | Line 263: | ||
#right { | #right { | ||
padding: 25px; | padding: 25px; | ||
+ | padding-right: 60px; | ||
border-left: 7px solid #16933f; | border-left: 7px solid #16933f; | ||
margin-left: 260px; | margin-left: 260px; | ||
Line 245: | Line 275: | ||
h2 { | h2 { | ||
border: 0; | border: 0; | ||
- | margin-left: | + | margin-left: 0; |
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Line 262: | Line 292: | ||
} | } | ||
- | a { | + | a, a:link, a:visited { |
- | color: # | + | color: #16933f; |
+ | } | ||
+ | |||
+ | a.new { | ||
+ | color: red; | ||
+ | } | ||
+ | |||
+ | table.colored th { | ||
+ | background: #16933f; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | table.colored tr:nth-child(odd) { | ||
+ | background: #ebfce4; | ||
+ | } | ||
+ | |||
+ | table.colored { | ||
+ | border: 0 none transparent; | ||
+ | border-bottom: 2px solid #00b050; | ||
+ | } | ||
+ | |||
+ | table.colored th, table.colored td { | ||
+ | padding-left: .5em; | ||
+ | padding-right: .5em; | ||
+ | } | ||
+ | |||
+ | /* rounded shadowed boxes */ | ||
+ | |||
+ | .box { | ||
+ | border: 1px solid #888; | ||
+ | padding: 5px; | ||
+ | margin-bottom: 10px; | ||
+ | |||
+ | -moz-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | -moz-box-shadow: 0 0 8px #888; | ||
+ | -webkit-box-shadow: 0 0 8px #888; | ||
+ | box-shadow: 0 0 8px #888; | ||
+ | } | ||
+ | |||
+ | .box { | ||
+ | margin-right: 5px; | ||
+ | margin-left: 5px; | ||
+ | } | ||
+ | |||
+ | /* slideshow stuff */ | ||
+ | |||
+ | .slideshow { | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slideshow li { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | left: -100%; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .slideshow div.antilink { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .slideshow div.next { | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-left: 20px solid /*#7b609b*/ white; | ||
+ | border-top: 20px solid transparent; | ||
+ | border-bottom: 20px solid transparent; | ||
+ | right: 20px; | ||
+ | top: 50%; | ||
+ | margin-top: -20px; | ||
} | } | ||
</style> | </style> | ||
Line 275: | Line 379: | ||
<a id="logo_beadzillus" href="https://2012.igem.org/Team:LMU-Munich"><img src="https://static.igem.org/mediawiki/2012/2/2c/Team-LMU_Beadzillus_logo_200.png" alt="Beadzillus" /></a> | <a id="logo_beadzillus" href="https://2012.igem.org/Team:LMU-Munich"><img src="https://static.igem.org/mediawiki/2012/2/2c/Team-LMU_Beadzillus_logo_200.png" alt="Beadzillus" /></a> | ||
</div> | </div> | ||
+ | <div id="nav_shadow"></div> | ||
<div id="nav"> | <div id="nav"> | ||
</html> | </html> | ||
Line 334: | Line 439: | ||
} | } | ||
var timeout = li.my_opacity > 0 ? 25 : 200; | var timeout = li.my_opacity > 0 ? 25 : 200; | ||
- | li.delta_opacity = 1.0/ | + | li.delta_opacity = 1.0/16; |
li.timeout = window.setTimeout(function() { | li.timeout = window.setTimeout(function() { | ||
nav_animator(li); | nav_animator(li); | ||
Line 355: | Line 460: | ||
var style = document.getElementById("hoverstyle"); | var style = document.getElementById("hoverstyle"); | ||
style.parentNode.removeChild(style); | style.parentNode.removeChild(style); | ||
+ | |||
+ | var links = document.getElementById("nav").getElementsByTagName("a"); | ||
+ | for(var i = 0; i < links.length; ++i) { | ||
+ | links[i].removeAttribute("title"); | ||
+ | } | ||
</script> | </script> | ||
<div id="left"> | <div id="left"> | ||
Line 363: | Line 473: | ||
</div> | </div> | ||
<html> | <html> | ||
+ | <div id="mascot"><img alt="Sporenfreunde" src="https://static.igem.org/mediawiki/2012/e/e3/Team_LMU_Sporenfreunde.png"></div> | ||
</div> | </div> | ||
+ | <script type="text/javascript"> | ||
+ | var mascot = document.getElementById("mascot"); | ||
+ | var dummy = document.createElement("div"); | ||
+ | mascot.parentNode.insertBefore(dummy, mascot); | ||
+ | mascot.style.marginTop = "-268px"; | ||
+ | dummy.style.height = "268px"; | ||
+ | |||
+ | function get_y(ele) { | ||
+ | var ret = 0; | ||
+ | for(; ele != null; ele = ele.offsetParent) { | ||
+ | ret += ele.offsetTop; | ||
+ | } | ||
+ | return ret; | ||
+ | } | ||
+ | |||
+ | function scroll() { | ||
+ | var scroll_top = window.pageYOffset != null ? window.pageYOffset : document.body.parentElement ? document.body.parentElement.scrollTop : document.body.scrollTop; | ||
+ | |||
+ | var distance_bottom = window.innerHeight - 268 - (get_y(dummy) - scroll_top); | ||
+ | |||
+ | if(distance_bottom > 75) { | ||
+ | mascot.style.position = "fixed"; | ||
+ | mascot.style.left = (window.innerWidth / 2.0 - 500 + 17) + "px"; | ||
+ | mascot.style.bottom = "75px"; | ||
+ | mascot.style.width = "210px"; | ||
+ | mascot.style.height = "268px"; | ||
+ | } else { | ||
+ | mascot.style.position = "static"; | ||
+ | }(dummy); | ||
+ | } | ||
+ | |||
+ | window.onscroll = scroll; | ||
+ | window.onresize = scroll; | ||
+ | scroll(); | ||
+ | </script> | ||
<div id="right"> | <div id="right"> | ||
</html> | </html> | ||
Line 379: | Line 525: | ||
;[[Team:LMU-Munich/Templates/News]] | ;[[Team:LMU-Munich/Templates/News]] | ||
:the text in the sidebar | :the text in the sidebar | ||
+ | |||
+ | <div class="box"> | ||
+ | === box test === | ||
+ | {| class="colored" | ||
+ | |- | ||
+ | !A1 | ||
+ | !B1 | ||
+ | !C1 | ||
+ | |- | ||
+ | !A2 | ||
+ | |B2 | ||
+ | |C2 | ||
+ | |- | ||
+ | !A3 | ||
+ | |B3 | ||
+ | |C3 | ||
+ | |} | ||
+ | </div> | ||
{{:Team:LMU-Munich/Templates/Page Footer}} | {{:Team:LMU-Munich/Templates/Page Footer}} | ||
</noinclude> | </noinclude> |
Latest revision as of 17:04, 24 October 2012
The LMU-Munich team is exuberantly happy about the great success at the World Championship Jamboree in Boston. Our project Beadzillus finished 4th and won the prize for the "Best Wiki" (with Slovenia) and "Best New Application Project".
[ more news ]
Page title
List of templates:
- Team:LMU-Munich/Templates/Page Header
- this page, include at the start of every page, the first parameter specifies the image to be shown in the sidebar
- Team:LMU-Munich/Templates/Page Footer
- include at the end of every page
- Team:LMU-Munich/Templates/Navigation
- edit the menu here
- Team:LMU-Munich/Templates/News
- the text in the sidebar
box test
A1 | B1 | C1 |
---|---|---|
A2 | B2 | C2 |
A3 | B3 | C3 |