Difference between revisions of "Template:2015CSS"

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 65:
 
}
 
}
  
−
 
−
/* 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: 770px;
Line 72: Line 78:
 
}
 
}
  
−
 
+
/*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;  
Line 88: Line 89:
  
  
−
.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 107:
 
}
 
}
  
 +
/*Class for creating a news post, this is used in the Main Page and in the Archived news page */
 
.newsItem {
 
.newsItem {
 
background-color: #f9f9f9;
 
background-color: #f9f9f9;
Line 106: Line 116:
 
}
 
}
  
−
.newsItem img{
+
/*main page news RSS icon*/
−
float:right; display:block;}
+
    #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 118: Line 138:
 
}
 
}
  
−
.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: #d3d3d3;
−
margin: auto;
+
margin-bottom: 2px;
−
padding: 5px 10px;
+
padding: 3px 5px;
−
border: 1px solid #cccccc;
+
border: 1px solid #cccccc;
−
cursor: pointer;
+
cursor: pointer;
−
color: #434343;
+
color: #434343;
−
border-radius: 5px;
+
border-radius: 5px;
−
margin-top: 5px;
+
−
width: 150px;
+
 
}
 
}
  
 +
/*Style the submenu items*/
 
ul.submenulist li a, ul.submenulist li {
 
ul.submenulist li a, ul.submenulist li {
 
color: #383838;
 
color: #383838;
Line 147: Line 161:
 
border-radius: 5px;
 
border-radius: 5px;
 
display:block;
 
display:block;
−
padding-bottom: 2px;
 
 
}
 
}
−
 
+
−
/* change background color on hover */
+
/* For the submenu items, change background color on hover */
 
ul.submenulist li:hover a, ul.submenulist li:hover {
 
ul.submenulist li:hover a, ul.submenulist li:hover {
 
background-color: #c1dfa6;
 
background-color: #c1dfa6;
Line 157: Line 170:
 
}
 
}
  
−
/* styling for all the headers in all the pages */
 
−
#contentWrap h1, h2, h3, h4, h5 {
 
−
font-family: "Arial", Gadget, sans-serif; border-bottom:none;
 
−
font-weight: bold;
 
−
color: #434343;
 
−
}
 
  
−
/* Establish font size and family for all text */
+
/*CONTENT PAGES */
−
#contentWrap p {
+
−
font-family: "Arial", Helvetica, sans-serif;
+
−
font-size: 13px;
+
−
}
+
  
 +
/*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;
 +
    }
  
−
/* Styling for block quotes */
+
/*For images inside the igem logo container, changes opacity on hover */
−
#contentWrap blockquote {
+
    #igemLogo a:hover {
−
font-style: italic;
+
    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 183: Line 225:
 
}
 
}
  
−
/* Right column of the page*/
+
 
 +
/* For pages with submenus, creates the right column of the page*/
 
#rightColumn {
 
#rightColumn {
 
width: 770px;
 
width: 770px;
Line 190: Line 233:
 
}
 
}
  
−
/* 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;
 
}
 
}
  
−
 
+
/*For left submenu items, change the background color on hover*/
−
#rightColumn img, #fullWidth img {
+
#leftColumn ul ul li:hover, #leftColumn ul li:hover  {
−
padding: 5px 5px 5px 5px;
+
background-color: #c1dfa6;
 +
border-radius: 5px;
 
}
 
}
  
  
−
#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;
Line 210: Line 272:
 
}
 
}
  
−
#rightColumn a:hover, #fullWidth a:hover, .leftColumn_FullWidth_MainPage a:hover {
+
/* Styling links on hover- links are different in menu divs */
 +
#rightColumn a:hover, #fullWidth a:hover, #leftColumn_MainPage a:hover {
 
     opacity: 0.4;
 
     opacity: 0.4;
 
     filter: alpha(opacity=40); /* For IE8 and earlier */
 
     filter: alpha(opacity=40); /* For IE8 and earlier */
 
}
 
}
  
−
#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;
+
−
 
+
−
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 266: Line 314:
 
}
 
}
  
−
#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 273: Line 322:
 
}
 
}
  
−
#fullWidth th, #rightColumn th {
+
/*Styling table headers for all the tables */
 +
#contentWrap th {
 
background-color: #464646;
 
background-color: #464646;
 
padding: 10px;
 
padding: 10px;
Line 282: Line 332:
 
}
 
}
  
 +
 +
/*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;
Line 293: Line 353:
 
     }         
 
     }         
  
 +
/*For the button class, change background on hover */
 
         .button:hover {
 
         .button:hover {
 
     background-color: #c1dfa6;
 
     background-color: #c1dfa6;
 
     }
 
     }
  
−
     .clear {
+
/*Class for text that needs to be highlighted, used in span tag */
−
        clear: both;
+
     .highlightText {
 +
    color:red;
 +
    font-size:110%;
 +
    font-weight:bold;
 
     }
 
     }
  
−
    #igemLogo {
 
−
        width: 160px;
 
−
        float:left;
 
−
        margin-left:auto;
 
−
        margin-right:auto;
 
−
        display:block;
 
−
        text-align:center;
 
−
        margin-top: 10px;
 
−
    }
 
  
−
    #igemLogo a:hover {
+
/* Styling for block quotes */
−
    opacity: 0.4;
+
#contentWrap blockquote {
−
    filter: alpha(opacity=40); /* For IE8 and earlier */
+
font-style: italic;
−
    }
+
}
−
 
+
−
    #rss_icon { /*main page news RSS icon*/
+
−
    height: 25px;
+
−
    vertical-align: text-bottom;
+
−
    }
+
−
 
+
−
    #pageTitle {
+
−
        width: 760px;
+
−
        float: left;
+
−
        padding: 5px 10px 0px 10px;
+
−
        margin-top: 10px;
+
−
 
+
−
      }
+
−
       
+
−
      #grayLine_Clear {
+
−
        width: 960px;
+
−
        height: 1px;
+
−
        background-color: #ccc;
+
−
        margin:auto;
+
−
clear:both;
+
−
      }
+
  
 +
/*Alert message for important messages */
 
       .alertMessage, #alertMessage {
 
       .alertMessage, #alertMessage {
 
         width:700px;  
 
         width:700px;  
Line 345: Line 380:
 
         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 353: Line 389:
 
       }
 
       }
  
−
 
+
/*Styling for calendar events, used in the calendar of events page */
 
.Calendarevent {
 
.Calendarevent {
 
float:left;
 
float:left;
Line 361: Line 397:
 
}
 
}
  
−
 
+
/*Styling for calendar dates, used in the calendar of events page */
−
 
+
 
.Calendardate {
 
.Calendardate {
 
float:left;
 
float:left;
Line 374: Line 409:
 
}
 
}
  
 +
/* 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 boxes */
 
  
 +
    /* 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;
Line 396: Line 467:
 
         }
 
         }
  
−
 
+
/*For the pop why class, changes the color on hover */
 
         .pop_why:hover {
 
         .pop_why:hover {
 
         color: #fff;
 
         color: #fff;
Line 403: Line 474:
 
         }
 
         }
  
 +
/*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 423: Line 495:
  
  
−
<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 443: Line 519:
 
}
 
}
 
         );
 
         );
 +
 
});
 
});
 
</script>
 
</script>
Line 450: Line 527:
 
<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>

Revision as of 15:21, 18 March 2015