Difference between revisions of "Template:WHU-China"

Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<style>
−
<style type="text/css">
+
body{
−
body {
+
  margin:17px 0 0 0;
−
background-image: url(https://static.igem.org/mediawiki/2017/thumb/6/69/WHU-China-child-bg.jpeg/1600px-WHU-China-child-bg.jpeg);
+
}
−
background-position: center center;
+
/*DISABLE DEFAULT DESIGN*/
−
    background-repeat: no-repeat;
+
#bodyContent{
−
    background-attachment: fixed;
+
  min-width:1024px;
−
    background-size: cover;
+
  font-family:"Arial Unicode MS";
−
 
+
}
 +
#top_menu_under{
 +
  display:none;
 +
}
 +
#content{
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 
}
 
}
 +
 +
#sideMenu{
 +
  display:none;
 +
}
 +
 +
#top_title{
 +
  display:none;
 +
}
 +
 +
#globalWrapper{
 +
  padding-bottom: 0;
 +
}
 +
#top_menu_inside .submenu{
 +
  padding-top:0px;
 +
}
 +
#header ul{
 +
  list-style-image:none;
 +
  list-style-type:none;
 +
}
 +
#contents ul{
 +
  margin-left:0px;
 +
}
 +
#contents li{
 +
  font-size:17px;
 +
}
 +
 +
/*---------------------- */
 +
 +
/*menu*/
 +
 +
#header{
 +
  position:relative;
 +
  width: 100%;
 +
  min-width: 1024px;
 +
  /*width: 1366px;*/
 +
  height: 72px;
 +
  margin: 0 auto;
 +
  /*border: 1px solid #000;*/
 +
  text-align: center;
 +
  background-color: #00aeef;
 +
  opacity: 0.7;
 +
  z-index:2;
 +
}
 +
#header ul{
 +
  /*list-style-type: none;*/
 +
  /*margin: 0;*/
 +
  padding: 0;
 +
}
 +
#nav-wrapper{
 +
  width: 1024px;
 +
  margin: 0 auto;
 +
}
 +
.nav {
 +
  text-align:center;
 +
  width: 1024px;
 +
  height:72px;
 +
  position: relative;
 +
  left: 0;
 +
}
 +
.nav ul {
 +
  width:1024px;
 +
  margin: 0 auto;
 +
  list-style-type: none;
 +
}
 +
.nav ul li{
 +
  float: left;
 +
  width: 121px;
 +
  margin: 0;
 +
  /*border-right: 1px solid #e6e4e4;*/
 +
  box-sizing: border-box;
 +
  /*text-indent:-9999px;*/
 +
}
 +
.nav ul li:last-child {
 +
  border-right: none;
 +
}
 +
.nav ul li a{
 +
  display: block;
 +
  width: 100%;
 +
  height:72px;
 +
  line-height:72px;
 +
color:#fff;
 +
white-space:nowrap;
 +
 +
 +
}
 +
kyoto-calender table{
 +
    border-collapse: collapse;
 +
    margin: 10px;
 +
    margin-right: 4px;
 +
    float: left;
 +
}
 +
.kyoto-calendar th{
 +
    width: 24px;
 +
    border: none;
 +
    padding: 3px;
 +
    background-color: #00aeef;
 +
    color: #ffffff;
 +
}
 +
 +
.kyoto-calendar td {
 +
    width: 24px;
 +
    height: 24px;
 +
    border: none;
 +
    padding: 0px;
 +
    text-align: center;
 +
}
 +
 +
.kyoto-calendar a {
 +
    width: 100%;
 +
    height: 100%;
 +
    display: block;
 +
    padding-bottom: 2px;
 +
    text-align: center;
 +
    background-color: #aaddff;
 +
}
 +
 +
.kyoto-calendar a:hover{
 +
    background-color: #00aeef;
 +
    color:#ffffff;
 +
}
 +
 +
#nv0 a{
 +
  background: url();
 +
  background-repeat: no-repeat;
 +
  background-position: center;
 +
}
 +
#nv1 > a{background: url();}
 +
#nv2 > a{background: url();}
 +
#nv3 > a{background: url();}
 +
#nv4 > a{background: url();}
 +
#nv5 > a{background: url();}
 +
#nv6 > a{background: url();}
 +
#nv7 > a{background: url();}
 +
#nv8 > a{background: url();}
 +
 +
#nv11  {background-image: url();}
 +
#nv12  {background-image: url();}
 +
 +
#nv21  {background-image: url();}
 +
#nv22  {background-image: url();}
 +
 +
#nv51  {background-image: url();}
 +
#nv52  {background-image: url();}
 +
#nv53  {background-image: url();}
 +
 +
 +
#nv71  {background-image: url();}
 +
#nv72  {background-image: url();}
 +
 +
#nv1 > a:hover{background-position: 0 -72px;}
 +
#nv2 > a:hover{background-position: 0 -72px;}
 +
#nv3 > a:hover{background-position: 0 -72px;}
 +
#nv4 > a:hover{background-position: 0 -72px;}
 +
#nv5 > a:hover{background-position: 0 -72px;}
 +
#nv6 > a:hover{background-position: 0 -72px;}
 +
#nv7 > a:hover{background-position: 0 -72px;}
 +
#nv8 > a:hover{background-position: 0 -72px;}
 +
 +
.nv > li > ul {
 +
  width:121px;
 +
  visibility:hidden;
 +
}
 +
.nv > li:hover > ul{
 +
visibility: visible;
 +
 +
}
 +
 +
.nv > li > ul > li{
 +
  float:inherit;
 +
  height:0px;
 +
  transition:height 0.5s;
 +
  opacity:0.7;
 +
  background-color:#000;
 +
}
 +
 +
.nv > li > ul > li:hover{
 +
  opacity:0.9;
 +
background-color:#00aeef;}
 +
 +
.nv > li:hover > ul > li{
 +
  height:48px;
 +
}
 +
 +
.nv > li > ul > li  a{
 +
  height:0px;
 +
  transition:height 0.5s;
 +
 +
}
 +
 +
.nv > li:hover > ul > li  a{
 +
  height:48px;
 +
line-height: 48px;
 +
}
 +
 +
#contents-wrapper{
 +
  min-width:1024px;
 +
  background-color:#ffffff;
 +
  padding-bottom: 100px;
 +
}
 +
 +
#contents{
 +
  width: 1024px;
 +
  margin: 0 auto;
 +
  border-color: #000000;
 +
  color: #969696;
 +
  border-top:30px solid #ffffff;
 +
  border-bottom:30px solid #ffffff;
 +
  /*background-color: #c0ffee;*/
 +
}
 +
#contents p{
 +
  word-wrap:break-word;
 +
}
 +
/*#header li{
 +
  text-indent: -9999px;
 +
  float:left;
 +
  width: 100px;
 +
  margin: 0;
 +
  padding: 0;
 +
}*/
 +
#footer{
 +
  width: 100%;
 +
  min-width: 1024px;
 +
  height: 369px;
 +
  margin: 0 auto;
 +
  display: block;
 +
  background-color: #1EC2DB;
 +
}
 +
 +
#footer_logos{
 +
  width: 874px;
 +
  height: 135px;
 +
  margin: 0 auto;
 +
  padding: 20px 0;
 +
}
 +
 +
#footer_contact{
 +
  width: 874px;
 +
  height: 26px;
 +
  margin: 0 auto;
 +
}
 +
#footer_social{
 +
  width: 800px;
 +
  height: 84px;
 +
  margin: 0 auto;
 +
}
 +
#footer_social img{
 +
  margin: 0;
 +
}
 +
 +
.”caption”{
 +
  color:#6f89a5;
 +
  font-size: 14.5px;
 +
}
 +
#bodyContent h1{
 +
  font-size:40px;
 +
  color:#00aeef;
 +
  border-bottom:1pt solid #00aeef;
 +
  padding-top:45px;
 +
  padding-bottom:15px;
 +
  margin-bottom:15px;
 +
}
 +
#bodyContent h2{
 +
  font-size:25px;
 +
  color:#00aeef;
 +
  margin-top:30px;
 +
  line-height:25px;
 +
}
 +
h3{
 +
  font-size:30px;
 +
  padding-bottom:8px;
 +
  color:#808080;
 +
  border-bottom:1pt solid #808080;
 +
}
 +
#bodyContent h4{
 +
  font-size:20px;
 +
  color:#808080;
 +
}
 +
h5{
 +
  font-size:15px;
 +
  color:#00aeef;
 +
}
 +
h6{
 +
  font-size:25px;
 +
  color:#00aeef;
 +
  padding-bottom:40px;
 +
}
 +
b{
 +
  font-size:17px;
 +
  color:#1e1e20;
 +
}
 +
p{
 +
  font-size:17px;
 +
  color:#646464;
 +
}
 +
#toc{
 +
  list-style:none;
 +
  margin:0 0 15px 0;
 +
  padding:0;
 +
  border:0;
 +
  background:none;
 +
}
 +
#toc li{
 +
  font-size:15px;
 +
  color:#00aeef;
 +
  margin-bottom:10px;
 +
  font-weight:700;
 +
}
 +
#cont {
 +
  list-style:none;
 +
  margin:0;
 +
  padding:0;
 +
  border:0;
 +
  background:none;
 +
}
 +
#cont li {
 +
  font-size:13px;
 +
  /*color:#00aeef;*/
 +
  margin-bottom:0px;
 +
  font-weight:700;
 +
}
 +
#cont2 {
 +
  list-style:none;
 +
  margin:0;
 +
  padding:0;
 +
  border:0;
 +
  background:none;
 +
}
 +
#cont2 li {
 +
  font-size:13px;
 +
  color:#00aeef;
 +
  margin-bottom:0px;
 +
  font-weight:700;
 +
  padding-left:2em;
 +
}
 +
#att{
 +
  margin:0 0 15px 0;
 +
  padding:0;
 +
  border:0;
 +
  background:none;
 +
}
 +
#att li{
 +
  font-size:15px;
 +
  color:#646464;
 +
  margin-bottom:10px;
 +
  font-weight:400;
 +
}
 +
#hp {
 +
  margin:0 0 17px 0;
 +
  padding:0;
 +
  border:0;
 +
  background:none;
 +
}
 +
#hp li{
 +
  list-style:none;
 +
  font-size:15px;
 +
  color:#646464;
 +
  margin-bottom:10px;
 +
  font-weight:400;
 +
}
 +
#hp2 {
 +
  margin:0 0 17px 0;
 +
  padding:0;
 +
  border:0;
 +
  background:none;
 +
}
 +
#hp2 li{
 +
  list-style:square;
 +
  font-size:15px;
 +
  color:#646464;
 +
  margin-bottom:10px;
 +
  margin-left:2em;
 +
  font-weight:400;
 +
}
 +
 +
a:link {
 +
  text-decoration:none ;
 +
  color: #00aeef;
 +
 
 +
}
 +
a:visited {
 +
  color: #00aeef;
 +
  font-weight:bold;
 +
}
 +
a:hover {
 +
  color: #00aeef;
 +
 +
  font-weight:bold;
 +
}
 +
a:active {
 +
  color: #00aeef;
 +
  font-weight:bold;
 +
}
 +
 +
  div.keln_container img{
 +
  margin-top: 20px;
 +
  max-width: 400px;
 +
  height: auto;
 +
  }
 +
 +
  img.hpimg{
 +
  margin-top: 20px;
 +
  max-width: 600px;
 +
  height: auto;
 +
  }
 +
  
 
</style>
 
</style>
 +
 +
 +
 +
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
 +
 +
<!-- This tells the browser that your page is responsive -->
 +
 +
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
       
 +
 +
 +
 +
 +
 +
 +
 
<script>
 
<script>
 +
 +
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
           
+
 
−
   
+
$("#HQ_page").attr('id','');
−
         
+
−
            $("#sideMenu").hide();
+
 
−
           
+
if ( wgPageName.substring( 0, 8) == "Template")  {  // if the page is a template it displays the full name in a single line
−
           
+
$("#team_name").html( wgPageName );
−
})
+
}
 +
 
 +
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
}
 +
 
 +
else {
 +
// this adds the team's name as an h1
 +
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 +
 
 +
// this adds the page's title as an h4
 +
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
}
 +
 
 +
 
 +
 
 +
 
 +
$('#accordion').find('.menu_item').click(function(){
 +
 
 +
//Expand or collapse this panel
 +
submenu = $(this).find('.submenu');
 +
submenu.toggle();
 +
 
 +
icon = $(this).find('.icon');
 +
 
 +
if ( !$( submenu ).is(':visible') ) {
 +
icon.removeClass("less").addClass("plus");
 +
}
 +
else {
 +
icon.removeClass("plus").addClass("less");
 +
}
 +
 
 +
//Hide the other panels
 +
$(".submenu").not(submenu).hide();
 +
$(".icon").not(icon).removeClass("less").addClass("plus");
 +
});
 +
 
 +
 
 +
$(".collapsable_menu_control").click(function() {
 +
$(".menu_item").toggle();
 +
});
 +
 
 +
$( window ).resize(function() {
 +
$(".menu_item").show();
 +
});
 +
 
 +
 
 +
});
 +
 
 +
 
 
</script>
 
</script>
−
</head>
+
 
 +
 
 +
 
  
  
 
</html>
 
</html>

Revision as of 04:30, 24 August 2017