Difference between revisions of "Template:2015CSS"

 
(98 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*/
+
 
−
#contentWrap {   
+
/* General wrap for the pages*/
 +
#contentWrap, #contentWrap_MainPage {   
 
width: 980px;
 
width: 980px;
 
height: auto;
 
height: auto;
Line 57: Line 58:
 
margin-right: auto;  
 
margin-right: auto;  
 
background-color: #ffffff;
 
background-color: #ffffff;
 +
margin-top: -10px;
 
}
 
}
  
  
−
/* styling for all the headers */
+
 
−
#contentWrap h1, h2, h3, h4, h5 {  
+
/* MAIN PAGE*/
−
font-family: "Arial", Gadget, sans-serif; border-bottom:none;
+
 
−
font-weight: bold;
+
/*General Layout */
−
color: #434343;
+
/*Main page left column, content will be placed here */
 +
#leftColumn_MainPage {
 +
width: 780px;
 +
float: left;
 +
padding: 12px 10px 0px 10px;
 +
margin-top: 0px;
 
}
 
}
  
−
/* Establish font size and family for all text */
+
/*Main page right column, the on page menu will be placed here */
−
#contentWrap p {
+
#rightColumn_MainPage {
−
font-family: "Arial", Helvetica, sans-serif;  
+
background-color: #f2f2f2;
−
font-size: 13px;
+
width: 180px;
 +
float: left;
 +
height: 1855px;
 +
padding-top:5px;
 
}
 
}
  
−
/*full width column*/
+
 
−
#fullWidth {
+
/*Left Container (content) elements */
−
background-color: #ffffff;
+
 
−
margin-bottom: 5px;
+
/*Container for the main page banner, this will define the height before the image loads */
−
padding: 5px 20px 5px 20px;
+
#banner_leftColumn_MainPage {
 +
height:100px;
 
}
 
}
  
−
/* Right column of the page*/
+
/*Class for creating a block 1/3 of the size of the left_Column in the Main page, */
−
#rightColumn {
+
.block_leftColumn_MainPage{
−
width: 770px;
+
    padding: 5px 10px 10px 10px;
−
float: left;
+
    margin-bottom: 5px;
−
padding: 25px 15px 5px 15px;
+
    float: left;
 +
    width:215px;
 +
    margin-right:10px;
 +
    margin-left:5px;
 +
    background-color: #fff;
 
}
 
}
  
−
/* styling for lists on the right column */
+
/*Class for creating a news post, this is used in the Main Page and in the Archived news page */
−
#contentWrap ul {
+
.newsItem {
−
list-style:circle;
+
border: 1px solid #cccccc;
−
font-family: "Arial", Helvetica, sans-serif;  
+
margin: 0px 5px 5px 5px;
 +
padding: 5px 15px 5px 15px;
 +
border-radius: 5px;
 
}
 
}
  
 +
/*main page news RSS icon*/
 +
    #rss_icon {
 +
    height: 25px;
 +
    vertical-align: text-bottom;
 +
    }
  
−
#rightColumn img, #fullWidth img {
+
/*Style the images inside a news post */
−
padding: 5px 5px 5px 5px;
+
.newsItem img{
 +
float:right;
 +
display:block;
 
}
 
}
  
 +
/*Style the date inside a news post */
 +
.newsDate {
 +
font-style: italic;
 +
display: inline-block;
 +
color: #383838;
 +
float: right;
 +
padding-top: 5px;
 +
padding-right: 15px;
 +
}
  
−
#rightColumn a, #fullWidth a {
+
 
−
color:#3aa76c;
+
 
−
font-weight: bold;
+
/*Right Container (menu) elements */
 +
 
 +
/*Style the background for menu items*/
 +
.menu-header {
 +
background-color: #d3d3d3;
 +
margin-bottom: 2px;
 +
padding-left: 11px;
 +
padding-top:7px;
 +
padding-bottom:7px;
 +
color: #6D6E70;
 +
}
 +
 
 +
#rightColumn_MainPage a{
 
text-decoration: none;
 
text-decoration: none;
−
opacity: 1.0;
+
color: #565656;
−
    filter: alpha(opacity=100); /* For IE8 and earlier */
+
 
}
 
}
  
−
#rightColumn a:hover, #fullWidth a:hover {
+
/*Styling for the the list item */
−
    opacity: 0.4;
+
#rightColumn_MainPage ul {
−
    filter: alpha(opacity=40); /* For IE8 and earlier */
+
margin-top: -5px;
 
}
 
}
  
−
#rightColumn a.why, #fullWidth a.why{
+
/*Styling for the the list item */
−
color:#f58631;
+
#rightColumn_MainPage 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;
 
font-weight: bold;
 
font-weight: bold;
−
text-decoration: none;
+
list-style: none;
−
opacity: 1.0;
+
 
−
    filter: alpha(opacity=100); /* For IE8 and earlier */
+
/*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 a.why:hover, , #fullWidth a.why:hover{
+
/*For the list item, changes the color on hover.*/
 +
#rightColumn_MainPage ul li:hover{
 +
background-color:#c1dfa6;
 +
}
 +
 
 +
 
 +
 
 +
/*CONTENT PAGES */
 +
 
 +
/*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;
 
     opacity: 0.4;
 
     filter: alpha(opacity=40); /* For IE8 and earlier */
 
     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;
 +
}
 +
 
 +
/*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 {
 +
background-color: #ffffff;
 +
margin-bottom: 5px;
 +
padding: 5px 20px 5px 20px;
 +
}
 +
 
 +
 
 +
/* For pages with submenus, creates the right column of the page*/
 +
#rightColumn {
 +
width: 770px;
 +
float: left;
 +
padding: 25px 15px 5px 15px;
 +
}
 +
 
 +
 
  
−
/* Left column of the page, here the submenu can be placed*/
+
/*For pages with submenus, creates the left column of the page, here the submenu can be placed*/
 
#leftColumn {
 
#leftColumn {
 
width: 160px;
 
width: 160px;
 
float: left;
 
float: left;
 
padding: 25px 10px 5px 10px;
 
padding: 25px 10px 5px 10px;
−
margin-top: 20px;
+
margin-top: 0px;
 
}
 
}
  
−
 
+
/* For submenus on the left of the page, style the links*/
 
#leftColumn a {
 
#leftColumn a {
 
text-weight: bold;
 
text-weight: bold;
Line 143: Line 268:
 
}
 
}
  
 +
#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;
 +
 +
}
  
 +
/*For left submenu items, change the background color on hover*/
 
#leftColumn ul ul li:hover, #leftColumn ul li:hover  {
 
#leftColumn ul ul li:hover, #leftColumn ul li:hover  {
 
background-color: #c1dfa6;
 
background-color: #c1dfa6;
−
border-radius: 5px;
 
 
}
 
}
  
  
−
        #fullWidth table, #leftColumn table {
+
 
 +
 
 +
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 +
 
 +
/* Styling links - links are different in menu divs */
 +
#rightColumn a, #fullWidth a, #leftColumn_MainPage a {
 +
color:#3aa76c;
 +
font-weight: bold;
 +
text-decoration: none;
 +
}
 +
 
 +
/* Styling links on hover- links are different in menu divs */
 +
#rightColumn a:hover, #fullWidth a:hover, #leftColumn_MainPage a:hover {
 +
    color: #b5dec7;
 +
}
 +
 
 +
/* 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 */
 +
#contentWrap p {
 +
font-family: "Arial", Helvetica, sans-serif;
 +
font-size: 13px;
 +
}
 +
/* Styling for all the lists */
 +
#contentWrap ul {
 +
list-style:circle;
 +
font-family: "Arial", Helvetica, sans-serif;
 +
}
 +
 
 +
/*Styling for all the images */
 +
#contentWrap img {
 +
padding: 5px 5px 5px 5px;
 +
}
 +
 
 +
 
 +
/*Styling for all the tables */
 +
        #contentWrap table {
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
 
border-collapse: collapse;
 
border-collapse: collapse;
 
width: 90%
 
width: 90%
 
margin: auto;
 
margin: auto;
 +
margin-bottom: 15px;
 +
margin-top: 15px;
 +
margin-right: 10px;
 +
margin-left: 10px;
 
}
 
}
  
−
#fullWidth td, #fullWidth td {
+
/*Styling cells inside all of the tables */
−
background-color: #fff;
+
#contentWrap  td {
−
padding: 15px;
+
padding: 10px;
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
 
border-collapse: collapse;
 
border-collapse: collapse;
 +
vertical-align: text-top;
 
}
 
}
  
−
        #rightColumn.button, #fullWidth.button {
+
/*Styling table headers for all the tables */
 +
#contentWrap th {
 +
background-color: #464646;
 +
padding: 10px;
 +
color: #f2f2f2;
 +
border: 1px solid #ccc;
 +
border-collapse: collapse;
 +
vertical-align: text-top;
 +
}
 +
 
 +
 
 +
/*CLASSES */
 +
 
 +
/*Clear class for all the pages, adds spacing too*/
 +
    .clear {
 +
        clear: both;
 +
        height: 20px;
 +
    }
 +
 
 +
/*Buttons for all of the pages */
 +
        .button {
 
             width: 130px;
 
             width: 130px;
−
     border: 1px solid #cccccc;
+
     border: 2px solid #3aa76c;
 
     background-color: fff;
 
     background-color: fff;
 
     height: 30px;
 
     height: 30px;
Line 173: 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;
 
     }         
 
     }         
  
−
        #rightColumn.button:hover , #fullWidth.button:hover {
+
/*For the button class, change background on hover */
−
     background-color: #c1dfa6;
+
        .button:hover {
 +
     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;
+
 
−
      }
+
/* Styling for block quotes */
 +
#contentWrap blockquote {
 +
font-style: italic;
 +
}
  
−
       #alertMessage {
+
/*Alert message for important messages */
 +
       .alertMessage {
 
         width:700px;  
 
         width:700px;  
 
         margin:auto;  
 
         margin:auto;  
Line 222: Line 431:
 
         border: 1px solid #ccc;
 
         border: 1px solid #ccc;
 
margin-bottom: 15px;
 
margin-bottom: 15px;
−
margin-bottom: 15px;
+
margin-top: 15px;
 
       }
 
       }
  
−
       #alertMessage p {
+
/*For the alert message class, styling of the text*/
 +
       .alertMessage p, #alertMessage p {
 
         font-weight: bold;
 
         font-weight: bold;
 
         color:red;
 
         color:red;
 
       }
 
       }
 +
 +
/*Styling for calendar events, used in the calendar of events page */
 +
.Calendarevent {
 +
float:left;
 +
width: 370px;
 +
margin-bottom: 15px;
 +
padding-right: 10px;
 +
}
 +
 +
/*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 {
 +
        float:left;
 +
        }
 +
 +
/*Makes a round div that will call the pop up box*/
 +
        .pop_why {
 +
        border: 1px solid #f58631;
 +
        color: #f58631;
 +
        font-weight: bold;
 +
        text-align: center;
 +
        border-radius: 50%;
 +
        float: none;
 +
        margin-right: 5px;
 +
        margin-left: 5px;
 +
        padding-left: 4px;
 +
        padding-top: 3px;
 +
        padding-right: 4px;
 +
        }
 +
 +
 +
/*For the pop why class, changes the color on hover */
 +
        .pop_why:hover {
 +
        color: #fff;
 +
        background-color:#f58631;
 +
        font-weight: normal;
 +
        }
 +
 +
/*When the pop why class is hovered, creates a div to display the content for the why pop up box */
 +
        .pop_why_div {
 +
        position:fixed;
 +
        margin: auto;
 +
        left:100px;
 +
        top: 100px;
 +
        width:550px;
 +
        color:black;
 +
        background-color: white;
 +
        border: 2px solid #f58631;
 +
        border-radius: 5px;
 +
        padding: 10px 10px 10px 10px;
 +
        text-align:left;
 +
        -webkit-box-shadow: -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
 +
        -moz-box-shadow:    -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
 +
        box-shadow:        -2px -2px 15px 2px rgba(50, 50, 50, 0.64);
 +
        }
  
 
</style>
 
</style>
 +
 +
 +
<script type="text/javascript">
 +
$(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'
 +
$('.pop_why').hover(
 +
        function() {
 +
                      // Does the pop_why need to be installed?
 +
                if ( ! $(this).children('.pop_why_div').length ) {
 +
                        $(this).append("<DIV class='pop_why_div' style='display:block'>Loading...</div>");
 +
                              $(this).find('.pop_why_div').load( $(this).attr("data-poptitle") + '?action=raw' );
 +
                }
 +
                var foo = $(this).find('.pop_why_div').show();
 +
        } ,
 +
        function() {
 +
                $(this).find('.pop_why_div').clearQueue();
 +
        $(this).find('.pop_why_div').hide();
 +
                $(this).find('.pop_why_div').clearQueue();
 +
                $(this).find('.pop_why_div').hide();
 +
}
 +
        );
 +
 +
});
 +
</script>
 +
  
  
 
<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