Difference between revisions of "Template:TCU Taiwan/CSS"

 
(141 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
 
<style>
 
<style>
 +
html{
 +
  margin-left:10%;
 +
  background-image:url(https://static.igem.org/mediawiki/2016/f/f9/Tcu_bd.jpg);
 +
}
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
−
body {background-color:#FFCC99; }
+
body {background-image:url(https://static.igem.org/mediawiki/2016/f/f9/Tcu_bd.jpg);}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
 +
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
.menu_wrapper {  
 
.menu_wrapper {  
Line 17: Line 22:
 
padding:0px;
 
padding:0px;
 
float:left;  
 
float:left;  
−
background-color:#FFCC99;  
+
background-color:white;
 
text-align:left;
 
text-align:left;
 
}
 
}
Line 26: Line 31:
 
margin:-2px 0px 0px -20px;  
 
margin:-2px 0px 0px -20px;  
 
padding: 10px 10px;   
 
padding: 10px 10px;   
 +
/*border-bottom: 1px solid #d3d3d3; */
 
font-weight:bold;
 
font-weight:bold;
 
color:#000000;  
 
color:#000000;  
Line 72: Line 78:
 
text-decoration:none;  
 
text-decoration:none;  
 
color:#000000;  
 
color:#000000;  
−
list-style-type:none;  
+
list-style-type:none;
 
cursor:pointer;  
 
cursor:pointer;  
 
-webkit-transition: all 0.4s ease;  
 
-webkit-transition: all 0.4s ease;  
Line 123: Line 129:
 
padding: 5px 10px;  
 
padding: 5px 10px;  
 
display: inline-block;
 
display: inline-block;
−
border-bottom: 1px solid #d3d3d3;
+
background-color:#FFCC99;  
−
background-color:white;  
+
 
text-decoration:none;
 
text-decoration:none;
 
color:#000000;  
 
color:#000000;  
Line 168: Line 173:
 
padding:10px 0px;  
 
padding:10px 0px;  
 
float:left;  
 
float:left;  
−
background-color:#FFCC99;  
+
/*background-color:#FFCC99;*/
 +
                background-color:white;
 
}
 
}
  
Line 219: Line 225:
  
 
/* styling for the titles */
 
/* styling for the titles */
 +
        .content_wrapper pre{
 +
          border:0px;
 +
  background-color: white;
 +
        }
 
.content_wrapper h1, .content_wrapper h2 {
 
.content_wrapper h1, .content_wrapper h2 {
 
padding:5px 15px;  
 
padding:5px 15px;  
Line 272: Line 282:
 
}
 
}
  
−
/* Table */
+
/* Table */
 
.content_wrapper table {  
 
.content_wrapper table {  
 
width: 97%;  
 
width: 97%;  
−
margin:15px 10px;  
+
margin:15px 10px;
−
border: 1px solid #d3d3d3;  
+
border: 0px;
−
border-collapse: collapse;  
+
                line-height: 24px;  
 
}
 
}
  
Line 283: Line 293:
 
.content_wrapper  td {  
 
.content_wrapper  td {  
 
padding: 10px;
 
padding: 10px;
−
vertical-align: text-top;
+
border: 0px;  
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;  
+
 
}
 
}
  
 
/* table headers */
 
/* table headers */
 
.content_wrapper th {  
 
.content_wrapper th {  
−
padding: 10px;
+
                padding: 20px;
−
vertical-align: text-top;  
+
border: 3px solid #000000;  
−
border: 1px solid #d3d3d3;  
+
                border-collapse:collapse;
−
border-collapse: collapse;
+
−
background-color:#f2f2f2;  
+
 
}
 
}
  
Line 318: Line 324:
 
}
 
}
  
 +
/********************************* RESPONSIVE STYLING ********************************/
 +
 +
/* IF THE SCREEN IS LESS THAN 1000PX */
 +
 +
@media only screen and (max-width: 1000px) {
 +
 +
#content {width:100%; }
 +
.menu_wrapper {width:15%;}
 +
.content_wrapper {margin-left: 15%;}
 +
.menu_item {display:block;}
 +
.icon {display:none;}
 +
.highlight {padding:10px 0px;}
 +
}
 +
 +
 +
/* IF THE SCREEN IS LESS THAN 680PX */
 +
 +
@media only screen and (max-width: 680px) {
 +
.collapsable_menu_control { display:block;}
 +
.menu_item {display:none;}
 +
.menu_wrapper { width:100%; height: 15%; position:relative;}
 +
.icon {display:block;}
 +
.highlight {padding:15px 5px;}
 +
}
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
  
Line 349: Line 379:
  
 
<body>
 
<body>
 +
 
<div class="menu_wrapper" >
 
<div class="menu_wrapper" >
 
<ul id="accordion" class="accordion">
 
<ul id="accordion" class="accordion">
 
<li class="menu_item"> <a href="https://2016.igem.org/Team:TCU_Taiwan">
 
<li class="menu_item"> <a href="https://2016.igem.org/Team:TCU_Taiwan">
−
<img src="https://static.igem.org/mediawiki/2015/1/1e/2015TCU_TaiwanLogo_02.jpg" name="Image2" height=50 width=100  border="0" id="Image2" /></a> </li>
+
<img src="https://static.igem.org/mediawiki/2016/e/ea/Tcu_mark.png" name="Image2" height=100 width=100  border="0" id="Image2" />
−
<li class="menu_item">點擊(之後會放箭頭)
+
<br><br>
−
<ul class="submenu">
+
</a></li>
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Team">TEAM</a></li>
+
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Project">PROJECT</a></li>
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:TCU_Taiwan/Team">TEAM</a></li>
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Parts">PARTS</a></li>
+
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Project">PROJECT</a></li>
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Modeling">MODELING</a></li>
+
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Parts">PARTS</a></li>
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Safety">SAFETY</a></li>
+
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Model">MODELING</a></li>
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Results">RESULTS</a></li>
+
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Safety">SAFETY</a></li>
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/HP">PRICES</a></li>
+
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Results">RESULTS</a></li>
  
−
<li> <a href="https://2016.igem.org/Team:TCU_Taiwan/Notebook">NOTEBOOK</a></li>
+
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Human_Practices">HP&Award</a></li>
 +
 
 +
<li class="menu_item"><a href="https://2016.igem.org/Team:TCU_Taiwan/Notebook">NOTEBOOK</a></li>
  
−
</ul>
 
 
</div>
 
</div>
 +
 +
<div class="content_wrapper">
 +
<img src="https://static.igem.org/mediawiki/2016/b/b1/White1.jpg" name="Image2" height=50 width=5  border="0" id="Image2" />
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Team">
 +
<img src="https://static.igem.org/mediawiki/2016/f/ff/Tcu_team.jpg" name="Image2" height=100 width=100  border="0" id="Image2" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Project">
 +
<img src="https://static.igem.org/mediawiki/2016/b/be/Tcu_project.jpg" name="Image2" height=100 width=100  border="0" id="Image2" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Parts">
 +
<img src="https://static.igem.org/mediawiki/2016/3/3c/Tcu_part.jpg" name="Image2" height=100 width=100  border="0" id="Image2" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Model">
 +
<img src="https://static.igem.org/mediawiki/2016/b/b4/Tcu_model.jpg" name="Image2" height=100 width=100  border="0" id="Image2" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Safety">
 +
<img src="https://static.igem.org/mediawiki/2016/8/86/Tcu_safety.jpg" name="Image8" height=100 width=100  border="0" id="Image8" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Results">
 +
<img src="https://static.igem.org/mediawiki/2016/1/1f/Tcu_result.jpg" name="Image8" height=100 width=100  border="0" id="Image8" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Human_Practices">
 +
<img src="https://static.igem.org/mediawiki/2016/a/a8/Tcu_award.jpg" name="Image8" height=100 width=100  border="0" id="Image8" /></a>
 +
<a href="https://2016.igem.org/Team:TCU_Taiwan/Notebook">
 +
<img src="https://static.igem.org/mediawiki/2016/f/fa/Tcu_note.jpg" name="Image10" height=100 width=100 border="0" id="Image10" /></a>
 +
 
</body>
 
</body>
  
Line 444: Line 495:
  
 
});
 
});
 +
</script>
  
 +
<script type="text/javascript">
 +
<!--
 +
var timeout = 100;
 +
var closetimer = 10;
 +
var ddmenuitem = 0;
 +
// open hidden layer
 +
function mopen(id)
 +
{
 +
// cancel close timer
 +
mcancelclosetime();
 +
// close old layer
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 +
// get new layer and show it
 +
ddmenuitem = document.getElementById(id);
 +
ddmenuitem.style.visibility = 'visible';
 +
}
 +
// close showed layer
 +
function mclose()
 +
{
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 +
}
 +
// go close timer
 +
function mclosetime()
 +
{
 +
closetimer = window.setTimeout(mclose, timeout);
 +
}
 +
// cancel close timer
 +
function mcancelclosetime()
 +
{
 +
if(closetimer)
 +
{
 +
window.clearTimeout(closetimer);
 +
closetimer = null;
 +
}
 +
}
 +
// close layer when click-out
 +
document.onclick = mclose;
 +
// -->
 +
</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() {
 
−
 
−
$("#HQ_page").attr('id','');
 
−
 
−
 
−
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>
 
  
  
 
</html>
 
</html>

Latest revision as of 09:01, 18 October 2016