Team:LMU-Munich/Templates/Page Header

From 2012.igem.org

(Difference between revisions)
(testing (hopfully we now have a working sidebar))
 
(100 intermediate revisions not shown)
Line 1: Line 1:
-
<includeonly>
+
__NOTOC__<html>
-
<html>
+
<style type="text/css">
<style type="text/css">
/* hide some igem stuff... */
/* hide some igem stuff... */
Line 6: Line 5:
h1.firstHeading, #p-logo, #catlinks {
h1.firstHeading, #p-logo, #catlinks {
display: none;
display: none;
-
font-weight: lighter;
 
}
}
 +
.previewnote {
 +
position: fixed;
 +
background: #FFCCCC;
 +
left: 0;
 +
width: 10em;
 +
top: 0;
 +
z-index: 100;
 +
}
 +
 +
.previewnote:hover {
 +
visibility: hidden;
 +
}
/* reformat the major elements of the page */
/* reformat the major elements of the page */
-
body, html {
+
body, html, #globalWrapper, #content {
-
background: white;
+
background: transparent;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
 +
border: 0 none transparent;
font-size: 1em;
font-size: 1em;
font-face: sans-serif;
font-face: sans-serif;
 +
width: auto;
 +
border-top: 1px solid transparent;
 +
margin-top: -1px;
}
}
-
#globalWrapper {
+
body {
-
border-top: 1px solid white; /* no idea why this is required */
+
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;
 +
position: relative;
}
}
Line 29: Line 46:
padding: 0;
padding: 0;
width: auto;
width: auto;
-
height: auto;
+
height: 1.5em;
 +
margin-bottom: -1.5em;
}
}
-
#top-section * {
+
#menubar {
 +
display: table-cell;
 +
background: transparent;
 +
}
 +
 
 +
#menubar.left-menu {
 +
width: 100%;
 +
}
 +
 
 +
#menubar.right-menu {
 +
text-align: right;
 +
}
 +
 
 +
#menubar * {
 +
color: transparent !important;
background: transparent !important;
background: transparent !important;
-
color: white !important;
 
}
}
-
#top-section:hover * {
+
#top-section:hover #menubar * {
color: blue !important;
color: blue !important;
}
}
-
#content {
+
#top-section:hover #menubar.left-menu {
-
width: auto;
+
background: rgba(255, 255, 255, 0.75) !important;
-
margin: 0;
+
-
padding: 0;
+
}
}
 +
 +
/* mess around with the footer to meet our needs */
#footer-box {
#footer-box {
-
margin-top: 1em;
+
margin: 0;
 +
border: 0 transparent none;
 +
border-top: 1px solid black;
 +
width: auto;
 +
text-align: center;
}
}
-
#menubar a, #menubar {
+
#footer, #footer ul {
-
color: white; /* get rid of the hover effect */
+
display: inline;
-
background: #606060;
+
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
#footer li {
 +
display: inline;
 +
float: none;
 +
white-space: nowrap;
 +
margin: 0 .4em;
}
}
Line 61: Line 104:
display: 0;
display: 0;
margin: 0;
margin: 0;
-
padding: 0;
+
padding: 0 213px;
-
background: #421135;
+
background: url(https://static.igem.org/mediawiki/2012/8/86/Team_LMU_top.png) #785d99 repeat-y;
height: 2.5em;
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;
 +
margin: 0 -213px;
 +
padding-bottom: .4em;
 +
background: url(https://static.igem.org/mediawiki/2012/9/99/Team_LMU_bottom.png) #785d99 repeat-y;
}
}
Line 72: Line 130:
margin: 0;
margin: 0;
float: left;
float: left;
-
border-right: 1px solid #421135;
+
margin-right: 2px;
 +
height: 2.5em;
}
}
#nav li:hover {
#nav li:hover {
-
border-right-color: white;
+
border-right: 2px solid white;
-
border-left: 1px solid white;
+
border-left: 2px solid white;
-
margin-left: -1px;
+
margin-left: -2px;
 +
margin-right: 0;
}
}
Line 86: Line 146:
}
}
-
#nav a {
+
#nav a, #nav strong {
display: block;
display: block;
-
background: #421135;
+
background: #785d99;
padding: .5em;
padding: .5em;
height: 1.5em;
height: 1.5em;
Line 96: Line 156:
}
}
-
#nav a:hover {
+
#nav a:hover, #nav strong, #nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a {
text-decoration: none;
text-decoration: none;
color: white;
color: white;
-
background: #7b406c;
+
background: #b381d9;
}
}
-
#nav li ul {
+
#nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a {
-
display: none;
+
font-weight: bold;
}
}
-
#nav li:hover ul {
+
#nav li ul {
-
display: table;
+
display: none;
position: absolute;
position: absolute;
 +
margin: 0;
 +
padding: 0;
 +
padding-top: .4em;
top: 2.5em;
top: 2.5em;
-
left: 0;
 
width: auto;
width: auto;
 +
background: transparent;
 +
z-index: 100;
}
}
-
#nav li:hover li {
+
#nav li li {
float:none;
float:none;
display: table-row;
display: table-row;
 +
height: 2.5em;
}
}
-
#search-controls {
+
/*
-
float: right;
+
round border experiments — do not work yet
-
width: 15em;
+
#nav li li:last-child {
-
position: absolute;
+
-moz-border-bottom-left-radius: 10px;
-
right: 5em;
+
border-bottom-left-radius: 10px;
-
top: 5em;
+
-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;
}
}
 +
*/
-
#searchInput {
+
#nav li li a, #nav li li strong {
-
width: 14em;
+
border-top: 1px solid white;
 +
font-weight: normal;
 +
}
 +
 
 +
#nav li li:first-child a, #nav li li:first-child strong {
 +
border-top: 0 none transparent;
 +
}
 +
 
 +
#search-controls {
 +
display: none; /* mostly useless */
}
}
Line 147: Line 227:
}
}
-
h1 span {
+
#logo_lmu {
-
font-weight: bold;
+
position: absolute;
 +
right: 60px;
 +
top: 95px;
}
}
-
#logos {
+
#logo_igem {
-
width:117px;
+
position: absolute;
-
text-align:center;
+
right: 62px;
-
margin-left: 5em;
+
top: -5px;
 +
}
 +
 
 +
#logo_beadzillus {
 +
position: absolute;
 +
left: 155px;
 +
top: 25px;
}
}
Line 175: 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;
margin-top: 3em;
margin-top: 3em;
 +
margin-bottom: 3em;
padding-top: 0;
padding-top: 0;
 +
padding-left: 50px;
 +
padding-bottom: 5em;
}
}
 +
h2 {
 +
border: 0;
 +
margin-left: 0;
 +
font-weight: bold;
 +
}
 +
 +
#news {
 +
margin-top: 3em;
 +
font-style: italic;
 +
}
 +
 +
.editsection {
 +
display: none; /* a bit of a shame, but i suspect these links are not going too be too useful anyways */
 +
}
 +
 +
#nav li.over ul {
 +
display: table;
 +
}
 +
 +
a, a:link, a:visited {
 +
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 type="text/css" id="hoverstyle">
 +
#nav li:hover ul {
 +
display: table;
 +
}
</style>
</style>
-
<div id="logos">
+
<a id="logo_igem" href="https://2012.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/archive/f/f0/20120817084834%21IGEM_logo.png" alt="iGEM" /></a>
-
<a href="https://2012.igem.org/Main_Page">
+
<a id="logo_lmu" href="http://www.uni-muenchen.de/index.html"><img src="https://static.igem.org/mediawiki/2012/9/9e/LMU_logo.png" alt="Ludwig-Maximilians-Universität München" /></a>
-
<img src="https://static.igem.org/mediawiki/2012/f/f0/IGEM_logo.png" alt="iGEM" />
+
<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>
+
-
<a href="http://www.mikrobiologie.biologie.uni-muenchen.de/index.html">
+
-
<img src="https://static.igem.org/mediawiki/2012/9/9e/LMU_logo.png" alt="Ludwig-Maximilians-Universität München" />
+
-
</a>
+
</div>
</div>
 +
<div id="nav_shadow"></div>
<div id="nav">
<div id="nav">
</html>
</html>
{{:Team:LMU-Munich/Templates/Navigation}}
{{:Team:LMU-Munich/Templates/Navigation}}
-
foobar
 
<html>
<html>
</div>
</div>
 +
<script type="text/javascript">
 +
var lis = document.getElementById("nav").getElementsByTagName("li");
 +
function nav_animator(ele) {
 +
ele.my_opacity += ele.delta_opacity;
 +
if(ele.my_opacity < 0) {
 +
ele.my_opacity = 0;
 +
}
 +
if(ele.my_opacity > 1) {
 +
ele.my_opacity = 1;
 +
}
 +
var uls = ele.getElementsByTagName("ul");
 +
for(var i = 0; i < uls.length; ++i) {
 +
uls[i].style.opacity = ele.my_opacity;
 +
}
 +
 +
var mythis = ele;
 +
 +
if(!(ele.my_opacity >= 1.0 || ele.my_opacity <= 0.0)) {
 +
ele.timeout = window.setTimeout(function() {
 +
nav_animator(mythis);
 +
}, 25);
 +
}
 +
 +
if(ele.my_opacity > 0.0) {
 +
ele.setAttribute("class", "over");
 +
ele.className = "over";
 +
} else {
 +
ele.setAttribute("class", "");
 +
ele.className = "";
 +
}
 +
 +
}
 +
 +
function addEvent(ele, ev, func) {
 +
if (ele.addEventListener) {
 +
ele.addEventListener(ev,func,false);
 +
} else if (ele.attachEvent) {
 +
ele.attachEvent("on" + ev, func);
 +
}
 +
}
 +
 +
for(var i = 0; i < lis.length; ++i) {
 +
// create a new closure to pass down the li variable
 +
// no idea why the assignment is needed…
 +
var a = function() {
 +
var li = lis[i];
 +
li.my_opacity = 0.0;
 +
addEvent(li, "mouseover", function() {
 +
if(li.timeout != null) {
 +
window.clearTimeout(this.timeout);
 +
li.timeout = null;
 +
}
 +
var timeout = li.my_opacity > 0 ? 25 : 200;
 +
li.delta_opacity = 1.0/16;
 +
li.timeout = window.setTimeout(function() {
 +
nav_animator(li);
 +
}, timeout);
 +
});
 +
addEvent(li, "mouseout", function() {
 +
if(li.timeout != null) {
 +
window.clearTimeout(this.timeout);
 +
li.timeout = null;
 +
}
 +
var timeout = li.my_opacity < 1 ? 25 : 200;
 +
li.delta_opacity = -1.0/8;
 +
li.timeout = window.setTimeout(function() {
 +
nav_animator(li);
 +
}, timeout);
 +
});
 +
}();
 +
}
 +
 +
var style = document.getElementById("hoverstyle");
 +
style.parentNode.removeChild(style);
 +
 +
var links = document.getElementById("nav").getElementsByTagName("a");
 +
for(var i = 0; i < links.length; ++i) {
 +
links[i].removeAttribute("title");
 +
}
 +
</script>
<div id="left">
<div id="left">
</html>
</html>
-
[[{{{1}}}]]
+
[[{{{1|File:Team-LMU_Sidebar_Home.jpg}}}]]
-
{{{:Team:LMU-Munich/Templates/News}}}
+
<div id="news">
 +
{{:Team:LMU-Munich/Templates/News}}
 +
</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>
-
</includeonly>
 
-
 
<noinclude>
<noinclude>
-
{{:Team:LMU-Munich/Templates/Page Header|File:Team-LMU_Sidebar_Home.jpg}}
+
== Page title ==
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque convallis risus, quis vestibulum sapien scelerisque eu. Mauris odio arcu, consequat sed pulvinar a, fringilla sit amet ante. Pellentesque eget turpis at nisl sagittis ullamcorper. Integer ut ante mauris. Nullam cursus quam ut leo congue eu mollis sapien ornare. Curabitur auctor nunc pharetra mauris aliquet iaculis. Aenean vel massa ac lacus accumsan blandit tristique quis justo. Phasellus sem orci, tincidunt vel convallis non, placerat non lorem. Phasellus vel metus mauris, in faucibus eros. Morbi ullamcorper metus et erat posuere nec posuere urna scelerisque. Nam elementum pellentesque mattis.
+
List of templates:
-
Suspendisse nibh nisi, commodo quis porttitor sit amet, consectetur a arcu. Nulla sit amet est id sem faucibus eleifend eget non nibh. Praesent aliquet pellentesque ultrices. Pellentesque ultricies, risus ac commodo condimentum, tortor eros mattis nulla, ut posuere felis enim non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tortor dui, eleifend sed dapibus interdum, lacinia posuere nisi. Quisque mauris arcu, semper vitae vehicula feugiat, lacinia et orci. Nam vitae tortor quis urna bibendum vehicula eu id lacus. Aenean et justo nibh. Phasellus accumsan posuere felis eget tempor.
+
;[[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
 +
 
 +
<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

iGEM Ludwig-Maximilians-Universität München Beadzillus

Team-LMU Sidebar Home.jpg

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".

IGEM HQ LMU prize.jpg

[ more news ]

Sporenfreunde

Retrieved from "http://2012.igem.org/Team:LMU-Munich/Templates/Page_Header"