Difference between revisions of "Template:2015CSS"

 
(53 intermediate revisions by 2 users not shown)
Line 9: Line 9:
 
 
 
/* Remove footer, catlinks and logos */
 
/* Remove footer, catlinks and logos */
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading {
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
 
display: none;
 
display: none;
 
}
 
}
 
 
  
−
/* set up a white background #58585b*/
+
/* set up a dark background #58585b*/
 
body {  
 
body {  
 
width: 100%;  
 
width: 100%;  
Line 21: Line 21:
 
}
 
}
  
−
/*-- Make page full width and remove borders */
+
/*-- Make page full width and remove borders */
 
#globalWrapper, #content {  
 
#globalWrapper, #content {  
 
width: 100%;  
 
width: 100%;  
Line 43: Line 43:
 
}
 
}
  
 +
/*left align BMB */
 
#top_menu_inside {  
 
#top_menu_inside {  
 
margin-left: 20px;  
 
margin-left: 20px;  
 
}
 
}
  
−
/* Set up layout */
 
  
−
/* General wrap for the page*/
+
 
 +
/* General wrap for the pages*/
 
#contentWrap, #contentWrap_MainPage {   
 
#contentWrap, #contentWrap_MainPage {   
 
width: 980px;
 
width: 980px;
Line 60: Line 61:
 
}
 
}
  
−
 
−
/* Styling for the main page*/
 
  
  
 +
/* MAIN PAGE*/
  
 +
/*General Layout */
 +
/*Main page left column, content will be placed here */
 
#leftColumn_MainPage {
 
#leftColumn_MainPage {
−
width: 770px;
+
width: 780px;
 
float: left;
 
float: left;
−
padding: 12px 10px 25px 10px;
+
padding: 12px 10px 0px 10px;
 
margin-top: 0px;
 
margin-top: 0px;
 
}
 
}
  
−
 
+
/*Main page right column, the on page menu will be placed here */
−
.leftColumn_FullWidth_MainPage {
+
−
background-color: #ffffff;
+
−
margin-bottom: 5px;
+
−
padding: 0px 10px 5px 10px;
+
−
}
+
 
#rightColumn_MainPage {
 
#rightColumn_MainPage {
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
−
width: 175px;
+
width: 180px;
 
float: left;
 
float: left;
−
margin-top: 10px;
+
height: 1855px;
−
height: 100%;  
+
padding-top:5px;
−
margin-left: 13px;
+
 
}
 
}
  
  
−
.smallBlockHighlight{
+
/*Left Container (content) elements */
 +
 
 +
/*Container for the main page banner, this will define the height before the image loads */
 +
#banner_leftColumn_MainPage {
 +
height:100px;
 +
}
 +
 
 +
/*Class for creating a block 1/3 of the size of the left_Column in the Main page, */
 +
.block_leftColumn_MainPage{
 
     padding: 5px 10px 10px 10px;
 
     padding: 5px 10px 10px 10px;
 
     margin-bottom: 5px;
 
     margin-bottom: 5px;
Line 98: Line 102:
 
}
 
}
  
 +
/*Class for creating a news post, this is used in the Main Page and in the Archived news page */
 
.newsItem {
 
.newsItem {
−
background-color: #f9f9f9;
 
 
border: 1px solid #cccccc;
 
border: 1px solid #cccccc;
 
margin: 0px 5px 5px 5px;
 
margin: 0px 5px 5px 5px;
Line 106: Line 110:
 
}
 
}
  
 +
/*main page news RSS icon*/
 +
    #rss_icon {
 +
    height: 25px;
 +
    vertical-align: text-bottom;
 +
    }
 +
 +
/*Style the images inside a news post */
 +
.newsItem img{
 +
float:right;
 +
display:block;
 +
}
 +
 +
/*Style the date inside a news post */
 
.newsDate {
 
.newsDate {
 
font-style: italic;  
 
font-style: italic;  
Line 115: Line 132:
 
}
 
}
  
−
.smallBlockRight{
 
−
    padding: 5px 10px 10px 10px;
 
−
    margin-bottom: 5px;
 
−
    width: 200px;
 
−
    float: left;
 
−
}
 
  
  
−
/* this is for the menu in the main page */
+
/*Right Container (menu) elements */
  
 +
/*Style the background for menu items*/
 
.menu-header {
 
.menu-header {
−
background: #d3d3d3;
+
background-color: #d3d3d3;
−
margin: auto;
+
margin-bottom: 2px;
−
padding: 5px 10px;
+
padding-left: 11px;
−
border: 1px solid #cccccc;
+
padding-top:7px;
−
cursor: pointer;
+
padding-bottom:7px;
−
color: #434343;
+
color: #6D6E70;
−
border-radius: 5px;
+
−
margin-top: 5px;
+
−
width: 150px;
+
 
}
 
}
  
−
ul.submenulist li a, ul.submenulist li {
+
#rightColumn_MainPage a{
−
color: #383838;
+
text-decoration: none;
−
font-size: 12px;
+
color: #565656;
−
font-weight: bold;
+
−
padding-left: -30px;
+
−
border-radius: 5px;
+
−
display:block;
+
−
padding-bottom: 2px;
+
 
}
 
}
  
−
/* change background color on hover */
+
/*Styling for the the list item */
−
ul.submenulist li:hover a, ul.submenulist li:hover {
+
#rightColumn_MainPage ul {
−
background-color: #c1dfa6;
+
margin-top: -5px;
−
text-decoration: none;
+
−
border-radius: 5px;
+
 
}
 
}
  
−
/* styling for all the headers in all the pages */
+
/*Styling for the the list item */
−
#contentWrap h1, h2, h3, h4, h5 {  
+
#rightColumn_MainPage ul li{
−
font-family: "Arial", Gadget, sans-serif; border-bottom:none;
+
padding-left: 10px;
 +
margin-left: -19px;
 +
padding-top:2px;
 +
padding-bottom: 2px;
 +
margin-bottom: -1px;
 +
 
 +
border: 1px solid #ccc;
 +
border-right: 0px solid white;
 +
border-left: 0px solid white;
 +
 
 +
height:20px;
 
font-weight: bold;
 
font-weight: bold;
−
color: #434343;
+
list-style: none;
 +
 
 +
/*animate transition */
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 
}
 
}
  
−
/* Establish font size and family for all text */
+
/*For the list item, changes the color on hover.*/
−
#contentWrap p {
+
#rightColumn_MainPage ul li:hover{
−
font-family: "Arial", Helvetica, sans-serif;
+
background-color:#c1dfa6;
−
font-size: 13px;
+
 
}
 
}
  
  
−
/* Styling for block quotes */
+
 
−
#contentWrap blockquote {
+
/*CONTENT PAGES */
−
font-style: italic;
+
 
 +
/*Top part of the pages */
 +
/*Container for the iGEM logo, top left corner*/
 +
    #igemLogo {
 +
        width: 190px;
 +
        float:left;
 +
        text-align:center;
 +
        display:block;
 +
        margin-top:10px;
 +
        height:80px;
 +
    }
 +
 
 +
/*For images inside the igem logo container, changes opacity on hover */
 +
    #igemLogo a:hover {
 +
    opacity: 0.4;
 +
    filter: alpha(opacity=40); /* For IE8 and earlier */
 +
    }
 +
 
 +
 
 +
/*Container for the page title, first heading will be added here with jquery*/
 +
    #pageTitle {
 +
        width: 730px;
 +
        float: left;
 +
        padding: 5px 10px 0px 10px;
 +
        height:80px;
 +
        margin-top:10px;
 +
      }
 +
       
 +
/*Inside the pageTitle container, styles the h1 that contains the first heading */
 +
#pageTitle h1{
 +
font-size: 25px;
 +
color:black;
 
}
 
}
  
−
/*full width column*/
+
/*Gray lines that dives the top of the page and clears */
 +
      #grayLine_Clear {
 +
        width: 960px;
 +
        height: 1px;
 +
        background-color: #ccc;
 +
        margin:auto;
 +
clear:both;
 +
      }
 +
 
 +
 
 +
/*Middle/Content part of the pages */
 +
 
 +
/*For pages with NO submenu, creates the full width container*/
 
#fullWidth {
 
#fullWidth {
 
background-color: #ffffff;
 
background-color: #ffffff;
Line 180: Line 241:
 
}
 
}
  
−
/* Right column of the page*/
+
 
 +
/* For pages with submenus, creates the right column of the page*/
 
#rightColumn {
 
#rightColumn {
 
width: 770px;
 
width: 770px;
Line 187: Line 249:
 
}
 
}
  
−
/* styling for lists on the right column */
+
 
−
#contentWrap ul {
+
 
−
list-style:circle;
+
/*For pages with submenus, creates the left column of the page, here the submenu can be placed*/
 +
#leftColumn {
 +
width: 160px;
 +
float: left;
 +
padding: 25px 10px 5px 10px;
 +
margin-top: 0px;
 +
}
 +
 
 +
/* For submenus on the left of the page, style the links*/
 +
#leftColumn a {
 +
text-weight: bold;
 +
text-decoration: none;
 
font-family: "Arial", Helvetica, sans-serif;  
 
font-family: "Arial", Helvetica, sans-serif;  
 +
font-size: 13px;
 +
color: #434343;
 
}
 
}
  
 +
#leftColumn ul ul li, #leftColumn ul li  {
 +
padding-left: 10px;
 +
margin-left: -19px;
 +
padding-top:2px;
 +
padding-bottom: 2px;
 +
margin-bottom: -1px;
 +
 +
border: 1px solid #ccc;
 +
border-right: 0px solid white;
 +
border-left: 0px solid white;
 +
 +
height:20px;
 +
list-style: none;
 +
 +
/*animate transition */
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
  
−
#rightColumn img, #fullWidth img {
 
−
padding: 5px 5px 5px 5px;
 
 
}
 
}
  
 +
/*For left submenu items, change the background color on hover*/
 +
#leftColumn ul ul li:hover, #leftColumn ul li:hover  {
 +
background-color: #c1dfa6;
 +
}
  
−
#rightColumn a, #fullWidth a, .leftColumn_FullWidth_MainPage a {
+
 
 +
 
 +
 
 +
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 +
 
 +
/* Styling links - links are different in menu divs */
 +
#rightColumn a, #fullWidth a, #leftColumn_MainPage a {
 
color:#3aa76c;
 
color:#3aa76c;
 
font-weight: bold;
 
font-weight: bold;
 
text-decoration: none;
 
text-decoration: none;
−
opacity: 1.0;
 
−
    filter: alpha(opacity=100); /* For IE8 and earlier */
 
 
}
 
}
  
−
#rightColumn a:hover, #fullWidth a:hover, .leftColumn_FullWidth_MainPage a:hover {
+
/* Styling links on hover- links are different in menu divs */
−
     opacity: 0.4;
+
#rightColumn a:hover, #fullWidth a:hover, #leftColumn_MainPage a:hover {
−
    filter: alpha(opacity=40); /* For IE8 and earlier */
+
     color: #b5dec7;
 
}
 
}
  
−
#rightColumn a.why, #fullWidth a.why{
+
/* styling for all the headers in all the pages */
−
color:#f58631;
+
#contentWrap h1, h2, h3, h4, h5 {  
 +
font-family: "Arial", Gadget, sans-serif; border-bottom:none;
 
font-weight: bold;
 
font-weight: bold;
−
text-decoration: none;
+
color: #434343;
−
opacity: 1.0;
+
−
    filter: alpha(opacity=100); /* For IE8 and earlier */
+
−
+
 
}
 
}
  
−
#rightColumn a.why:hover,  #fullWidth a.why:hover {
+
/* Establish font size and family for all text */
−
    opacity: 0.4;
+
#contentWrap p {
−
    filter: alpha(opacity=40); /* For IE8 and earlier */
+
−
    }
+
−
 
+
−
/* Left column of the page, here the submenu can be placed*/
+
−
#leftColumn {
+
−
width: 160px;
+
−
float: left;
+
−
padding: 25px 10px 5px 10px;
+
−
margin-top: 20px;
+
−
}
+
−
 
+
−
 
+
−
#leftColumn a {
+
−
text-weight: bold;
+
−
text-decoration: none;
+
 
font-family: "Arial", Helvetica, sans-serif;  
 
font-family: "Arial", Helvetica, sans-serif;  
 
font-size: 13px;
 
font-size: 13px;
−
color: #434343;
+
}
 +
/* Styling for all the lists */
 +
#contentWrap ul {
 +
list-style:circle;
 +
font-family: "Arial", Helvetica, sans-serif;  
 
}
 
}
  
−
 
+
/*Styling for all the images */
−
#leftColumn ul ul li:hover, #leftColumn ul li:hover  {
+
#contentWrap img {
−
background-color: #c1dfa6;
+
padding: 5px 5px 5px 5px;
−
border-radius: 5px;
+
−
margin-left: 5px;
+
−
padding-left: 5px;
+
 
}
 
}
  
  
−
         #fullWidth table, #rightColumn table {
+
/*Styling for all the tables */
 +
         #contentWrap table {
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
 
border-collapse: collapse;
 
border-collapse: collapse;
Line 263: Line 349:
 
}
 
}
  
−
#fullWidth td, #rightColumn td {
+
/*Styling cells inside all of the tables */
 +
#contentWrap td {
 
padding: 10px;
 
padding: 10px;
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
Line 270: Line 357:
 
}
 
}
  
−
#fullWidth th, #rightColumn th {
+
/*Styling table headers for all the tables */
 +
#contentWrap th {
 
background-color: #464646;
 
background-color: #464646;
 
padding: 10px;
 
padding: 10px;
Line 279: Line 367:
 
}
 
}
  
 +
 +
/*CLASSES */
 +
 +
/*Clear class for all the pages, adds spacing too*/
 +
    .clear {
 +
        clear: both;
 +
        height: 20px;
 +
    }
 +
 +
/*Buttons for all of the pages */
 
         .button {
 
         .button {
 
             width: 130px;
 
             width: 130px;
−
     border: 1px solid #cccccc;
+
     border: 2px solid #3aa76c;
 
     background-color: fff;
 
     background-color: fff;
 
     height: 30px;
 
     height: 30px;
Line 288: Line 386:
 
         padding: 10px 5px 0px 5px;
 
         padding: 10px 5px 0px 5px;
 
         margin: auto;
 
         margin: auto;
 +
/*animate transition */
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 
     }         
 
     }         
  
 +
/*For the button class, change background on hover */
 
         .button:hover {
 
         .button:hover {
−
     background-color: #c1dfa6;
+
     background-color: #3aa76c;
 +
    color: white;
 
     }
 
     }
  
−
    .clear {
 
−
        clear: both;
 
−
    }
 
  
−
    #igemLogo {
 
−
        width: 160px;
 
−
        float:left;
 
−
        margin-left:auto;
 
−
        margin-right:auto;
 
−
        display:block;
 
−
        text-align:center;
 
−
        margin-top: 10px;
 
−
    }
 
  
−
     #igemLogo a:hover {
+
      /* Class for making images with links react on hover */
 +
     img.imageHover:hover {
 
     opacity: 0.4;
 
     opacity: 0.4;
 
     filter: alpha(opacity=40); /* For IE8 and earlier */
 
     filter: alpha(opacity=40); /* For IE8 and earlier */
−
    }
+
    }
  
−
    #pageTitle {
 
−
        width: 760px;
 
−
        float: left;
 
−
        padding: 5px 10px 0px 10px;
 
−
        margin-top: 10px;
 
  
−
      }
+
/*Class for text that needs to be highlighted, used in span tag */
−
       
+
    .highlightText {
−
      #grayLine_Clear {
+
    color:red;  
−
        width: 960px;  
+
    font-size:110%;
−
        height: 1px;  
+
    font-weight:bold;
−
        background-color: #ccc;
+
    }
−
        margin:auto;
+
−
clear:both;
+
−
      }
+
  
−
       .alertMessage, #alertMessage {
+
 
 +
/* Styling for block quotes */
 +
#contentWrap blockquote {
 +
font-style: italic;
 +
}
 +
 
 +
/*Alert message for important messages */
 +
       .alertMessage {
 
         width:700px;  
 
         width:700px;  
 
         margin:auto;  
 
         margin:auto;  
Line 337: Line 431:
 
         border: 1px solid #ccc;
 
         border: 1px solid #ccc;
 
margin-bottom: 15px;
 
margin-bottom: 15px;
−
margin-bottom: 15px;
+
margin-top: 15px;
 
       }
 
       }
  
 +
/*For the alert message class, styling of the text*/
 
       .alertMessage p, #alertMessage p {
 
       .alertMessage p, #alertMessage p {
 
         font-weight: bold;
 
         font-weight: bold;
Line 345: Line 440:
 
       }
 
       }
  
 +
/*Styling for calendar events, used in the calendar of events page */
 +
.Calendarevent {
 +
float:left;
 +
width: 370px;
 +
margin-bottom: 15px;
 +
padding-right: 10px;
 +
}
  
−
        /* Styling for pop boxes */
+
/*Styling for calendar dates, used in the calendar of events page */
 +
.Calendardate {
 +
float:left;
 +
width: 170px;
 +
background-color: #f2f2f2;
 +
font-weight: bold;
 +
margin-right: 15px;
 +
padding-left: 10px;
 +
border-radius: 5px;
 +
margin-bottom: 15px;
 +
}
  
 +
/* highlight box for special messages , red border*/
 +
.highlightBoxA {
 +
border: 2px solid #ee4258;
 +
background-color: #f2f2f2;
 +
padding: 10px;
 +
width: 40%;
 +
float: right;
 +
border-radius:5px;
 +
}
 +
 +
/* highlight box for special messages, no border size is bigger */
 +
.highlightBoxB {
 +
background-color: #f2f2f2;
 +
padding: 10px;
 +
width: 80%;
 +
margin:auto;
 +
margin-top:10px;
 +
margin-bottom:10px;
 +
border-radius:5px;
 +
border: 1px solid #ccc;
 +
}
 +
 +
 +
/*For the highlight box class, styles the title header to be centered */
 +
.highlightBoxA h4, .highlightBoxB h4{
 +
text-align:center;
 +
}
 +
 +
 +
/*Container that centers images inside - declare as a div */
 +
.centerImages {
 +
text-align:center;
 +
margin:auto;
 +
}
 +
 +
 +
 +
    /* Styling for pop up boxes */
 +
/* This is temporary fix, helps display the icon on the same line */
 
         .textBeforeWhy {
 
         .textBeforeWhy {
 
         float:left;
 
         float:left;
−
        }
+
        }
  
 +
/*Makes a round div that will call the pop up box*/
 
         .pop_why {
 
         .pop_why {
 
         border: 1px solid #f58631;
 
         border: 1px solid #f58631;
−
        width: 18px;
+
         color: #f58631;
−
         color:#f58631;
+
 
         font-weight: bold;
 
         font-weight: bold;
−
         text-align:center;
+
         text-align: center;
 
         border-radius: 50%;
 
         border-radius: 50%;
−
         float:left;
+
         float: none;
−
         margin-right:5px;
+
         margin-right: 5px;
−
         margin-left:5px;
+
         margin-left: 5px;
−
         height:18px;
+
         padding-left: 4px;
−
 
+
        padding-top: 3px;
 +
        padding-right: 4px;
 
         }
 
         }
  
  
 +
/*For the pop why class, changes the color on hover */
 
         .pop_why:hover {
 
         .pop_why:hover {
 
         color: #fff;
 
         color: #fff;
Line 373: Line 526:
 
         }
 
         }
  
 +
/*When the pop why class is hovered, creates a div to display the content for the why pop up box */
 
         .pop_why_div {
 
         .pop_why_div {
 
         position:fixed;
 
         position:fixed;
Line 393: Line 547:
  
  
−
<script ="text/javascript">
+
<script type="text/javascript">
 
$(document).ready(function() {
 
$(document).ready(function() {
 +
 +
 +
// Places first heading on top part of the page, inside a h1(#placeHeading) in #pageTitle
 +
$('.firstHeading').prependTo('#placeHeading');
  
 
// Attaches a hover script to every item with the class 'pop_why'
 
// Attaches a hover script to every item with the class 'pop_why'
Line 413: Line 571:
 
}
 
}
 
         );
 
         );
 +
 
});
 
});
 
</script>
 
</script>
Line 420: Line 579:
 
<div id="contentWrap">  
 
<div id="contentWrap">  
  
−
<div class="fullWidth" style="clear:both;"> 
 
 
<div id="igemLogo" >
 
<div id="igemLogo" >
−
<a href="https://2015.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2015/2/2a/Igemlogo_banner.jpg" width="50px">  </a>
+
<a href="https://2015.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2015/e/e4/IGEM_2015logo.jpg" height="70px">  </a>
 
</div>
 
</div>
 
 
−
+
<div id="pageTitle">
 +
<h1 id="placeHeading"> </h1>
 +
</div>
 +
 
 +
<div id="grayLine_Clear"></div>
 
</html>
 
</html>

Latest revision as of 17:19, 19 March 2015