Team:LMU-Munich/Templates/Page Header

From 2012.igem.org

(Difference between revisions)
m (fixed small pixel bug with the bar at the top of the page)
 
(107 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- adapted from 2011 wiki -->
+
__NOTOC__<html>
-
<html>
+
<style type="text/css">
<style type="text/css">
/* hide some igem stuff... */
/* hide some igem stuff... */
Line 8: Line 7:
}
}
 +
.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 {
+
body, html, #globalWrapper, #content {
background: transparent;
background: transparent;
 +
margin: 0;
 +
padding: 0;
 +
border: 0 none transparent;
 +
font-size: 1em;
 +
font-face: sans-serif;
 +
width: auto;
 +
border-top: 1px solid transparent;
 +
margin-top: -1px;
}
}
-
html {
+
body {
-
background: url(http://wrtlprnft.ath.cx/igem2012/flyer_background_hack.jpg) 50% 50%;
+
background: url(https://static.igem.org/mediawiki/2012/e/e3/Team_LMU_banner.png) no-repeat 50% 20px white;
-
border-top: 16px #606060 solid;
+
width: 1000px; /* against my better judgement… */
 +
margin: 0 auto;
 +
position: relative;
}
}
#top-section {
#top-section {
border: 0 none transparent;
border: 0 none transparent;
-
margin-top: -14px;
+
margin: 0;
 +
padding: 0;
width: auto;
width: auto;
-
height: 100px;
+
height: 1.5em;
 +
margin-bottom: -1.5em;
}
}
-
#content {
+
#menubar {
-
border: 32px solid #019440;
+
display: table-cell;
-
background: white;
+
background: transparent;
-
padding: 16px;
+
-
width: 881px;
+
-
margin-top: -50px;
+
-
position: static;
+
}
}
 +
 +
#menubar.left-menu {
 +
width: 100%;
 +
}
 +
 +
#menubar.right-menu {
 +
text-align: right;
 +
}
 +
 +
#menubar * {
 +
color: transparent !important;
 +
background: transparent !important;
 +
}
 +
 +
#top-section:hover #menubar * {
 +
color: blue !important;
 +
}
 +
 +
#top-section:hover #menubar.left-menu {
 +
background: rgba(255, 255, 255, 0.75) !important;
 +
}
 +
 +
/* 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;
 +
}
 +
 
 +
#footer, #footer ul {
 +
display: inline;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
#footer li {
 +
display: inline;
 +
float: none;
 +
white-space: nowrap;
 +
margin: 0 .4em;
 +
}
 +
 
 +
/* navigation */
 +
 
 +
#nav ul {
 +
display: 0;
 +
margin: 0;
 +
padding: 0 213px;
 +
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;
 +
margin: 0 -213px;
 +
padding-bottom: .4em;
 +
background: url(https://static.igem.org/mediawiki/2012/9/99/Team_LMU_bottom.png) #785d99 repeat-y;
 +
}
 +
 
 +
#nav li {
 +
display: block;
 +
position: relative;
 +
padding: 0;
 +
margin: 0;
 +
float: left;
 +
margin-right: 2px;
 +
height: 2.5em;
 +
}
 +
 
 +
#nav li:hover {
 +
border-right: 2px solid white;
 +
border-left: 2px solid white;
 +
margin-left: -2px;
 +
margin-right: 0;
 +
}
 +
 
 +
#nav li:hover li:hover {
 +
border: 0 none transparent;
 +
margin: 0;
 +
}
 +
 
 +
#nav a, #nav strong {
 +
display: block;
 +
background: #785d99;
 +
padding: .5em;
 +
height: 1.5em;
 +
color: white;
 +
text-transform: uppercase;
 +
white-space: nowrap;
 +
}
 +
 
 +
#nav a:hover, #nav strong, #nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a {
 +
text-decoration: none;
 +
color: white;
 +
background: #b381d9;
 +
}
 +
 
 +
#nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a {
 +
font-weight: bold;
 +
}
 +
 
 +
#nav li ul {
 +
display: none;
 +
position: absolute;
 +
margin: 0;
 +
padding: 0;
 +
padding-top: .4em;
 +
top: 2.5em;
 +
width: auto;
 +
background: transparent;
 +
z-index: 100;
 +
}
 +
 
 +
#nav li li {
 +
float:none;
 +
display: table-row;
 +
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 {
 +
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;
}
}
-
#menubar a, #menubar {
+
#search-controls {
-
color: white; /* get rid of the hover effect */
+
display: none; /* mostly useless */
-
background: #606060;
+
}
}
Line 61: Line 227:
}
}
-
h1 span {
+
#logo_lmu {
-
font-weight: bold;
+
position: absolute;
 +
right: 60px;
 +
top: 95px;
}
}
-
#logo {
+
#logo_igem {
-
display: block;
+
position: absolute;
position: absolute;
-
width: 150px;
+
right: 62px;
-
height: 131px;
+
top: -5px;
-
left: 0px;
+
}
-
top: 0px;
+
 
 +
#logo_beadzillus {
 +
position: absolute;
 +
left: 155px;
 +
top: 25px;
 +
}
 +
 
 +
#logos img {
 +
margin-bottom: .5em;
 +
}
 +
 
 +
/* main area layout */
 +
 
 +
#left {
 +
float: left;
 +
border-right: 7px solid #16933f;
 +
padding: 25px;
 +
width: 210px;
 +
text-align: center;
 +
margin-right: -7px;
 +
margin-top: 3em;
 +
}
 +
 
 +
#right {
 +
padding: 25px;
 +
padding-right: 60px;
 +
border-left: 7px solid #16933f;
 +
margin-left: 260px;
 +
margin-top: 3em;
 +
margin-bottom: 3em;
 +
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;
}
}
-
/* some generic templates for boxes to be used on the individual pages */
+
/* rounded shadowed boxes */
-
.leftbox, .rightbox, .fullbox {
+
.box {
border: 1px solid #888;
border: 1px solid #888;
padding: 5px;
padding: 5px;
Line 88: Line 333:
}
}
-
.leftbox {
+
.box {
-
float: left;
+
margin-right: 5px;
-
width: 266px;
+
-
clear: left;
+
margin-left: 5px;
margin-left: 5px;
}
}
-
.rightbox {
+
/* slideshow stuff */
-
float: right;
+
 
-
width: 440px;
+
.slideshow {
-
margin-right: 5px;
+
position: relative;
-
clear: right;
+
overflow: hidden;
}
}
-
.fullbox {
+
.slideshow li {
-
clear: both;
+
display: block;
-
margin-right: 5px;
+
position: absolute;
-
margin-left: 5px;
+
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>
-
<a id="logo" href="https://2012.igem.org/Main_Page">
+
<style type="text/css" id="hoverstyle">
-
<img src="https://static.igem.org/mediawiki/2011/9/94/IgemLMU.png" alt="iGEM—LMU" />
+
#nav li:hover ul {
-
</a>
+
display: table;
-
<h1>
+
}
-
<span>Bead</span>zillus
+
</style>
-
</h1>
+
<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 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>
 +
<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 id="nav_shadow"></div>
<div id="nav">
<div id="nav">
</html>
</html>
Line 119: Line 385:
<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">
 +
</html>
 +
[[{{{1|File:Team-LMU_Sidebar_Home.jpg}}}]]
 +
<div id="news">
 +
{{:Team:LMU-Munich/Templates/News}}
 +
</div>
 +
<html>
 +
<div id="mascot"><img alt="Sporenfreunde" src="https://static.igem.org/mediawiki/2012/e/e3/Team_LMU_Sporenfreunde.png"></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">
</html>
</html>
<noinclude>
<noinclude>
-
<div id="content-small">
+
== Page title ==
-
<div class="rightbox">rightbox</div>
+
-
<div class="leftbox">leftbox</div>
+
-
<div class="leftbox">leftbox</div>
+
-
<div class="fullbox">
+
-
== Full box w/ header ==
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nulla augue. Ut malesuada dolor non sapien laoreet auctor. Nullam euismod consectetur egestas. Nulla quam nunc, ultricies sit amet dapibus non, accumsan vitae justo. Sed dictum ultrices lorem a varius. Maecenas eu dolor mauris, eu sodales quam. Aenean dignissim sem sed erat facilisis faucibus adipiscing odio aliquam. Cras vestibulum justo vitae ipsum dictum non tempor odio ultrices. Quisque tempus tellus id erat pretium egestas. Duis sit amet sapien sapien. Cras eleifend pretium lacus ut dictum. Quisque tempor, tortor id sodales auctor, justo urna molestie urna, cursus lobortis urna quam vel nunc. Donec vel libero ligula, et dignissim sapien. Morbi vestibulum lorem non tellus congue tincidunt.
+
List of templates:
-
</div>
+
-
<div class="fullbox">
+
-
== Yet another box ==
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper congue enim, a lobortis nunc malesuada ac. Vivamus ac risus at nisl accumsan mollis. Etiam et dui risus. Quisque sagittis euismod enim ut auctor. Integer sagittis convallis interdum. Aliquam erat volutpat. Duis elementum accumsan malesuada. Nullam non arcu elementum felis tempor sodales eget in felis. Praesent vitae feugiat ligula. In hac habitasse platea dictumst. Integer suscipit tincidunt mauris nec tincidunt. Ut at nisl ultricies mi malesuada pulvinar et sed lectus. Suspendisse mattis gravida magna, eu sagittis neque dignissim imperdiet.
+
;[[Team:LMU-Munich/Templates/Page Header]]
-
</div>
+
: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>
</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"