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 | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear { |
display: none; | display: none; | ||
} | } | ||
− | /* set up a | + | /* set up a dark background #58585b*/ |
body { | body { | ||
width: 100%; | width: 100%; | ||
Line 21: | Line 21: | ||
} | } | ||
− | + | /*-- 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; | ||
} | } | ||
− | |||
− | /* General wrap for the | + | |
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* General wrap for the pages*/ | ||
#contentWrap, #contentWrap_MainPage { | #contentWrap, #contentWrap_MainPage { | ||
width: 980px; | width: 980px; | ||
Line 60: | Line 65: | ||
} | } | ||
− | |||
− | |||
+ | /* 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 */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#rightColumn_MainPage { | #rightColumn_MainPage { | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
Line 88: | Line 89: | ||
− | . | + | /*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: | ||
} | } | ||
− | + | /*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 118: | Line 138: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*Right Container (menu) elements */ | |
+ | /*Style the background for menu items*/ | ||
.menu-header { | .menu-header { | ||
background: #d3d3d3; | background: #d3d3d3; | ||
− | + | margin-bottom: 2px; | |
− | + | padding: 3px 5px; | |
− | + | border: 1px solid #cccccc; | |
− | + | cursor: pointer; | |
− | + | color: #434343; | |
− | + | border-radius: 5px; | |
− | + | ||
− | + | ||
} | } | ||
+ | /*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; | ||
− | |||
} | } | ||
− | + | ||
− | + | /* 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: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*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 { |
− | font- | + | 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 | + | /*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: | ||
} | } | ||
− | /* | + | |
+ | /* For pages with submenus, creates the right column of the page*/ | ||
#rightColumn { | #rightColumn { | ||
width: 770px; | width: 770px; | ||
Line 190: | Line 233: | ||
} | } | ||
− | + | ||
− | # | + | |
− | + | /*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*/ | |
− | + | #leftColumn ul ul li:hover, #leftColumn ul li:hover { | |
− | + | background-color: #c1dfa6; | |
+ | border-radius: 5px; | ||
} | } | ||
− | #rightColumn a, #fullWidth 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, | + | /* 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 */ | ||
} | } | ||
− | # | + | /* 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; | font-weight: bold; | ||
− | + | color: #434343; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /* Establish font size and family for all text */ | |
− | + | #contentWrap p { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | # | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
font-family: "Arial", Helvetica, sans-serif; | font-family: "Arial", Helvetica, sans-serif; | ||
font-size: 13px; | 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; | ||
Line 266: | Line 314: | ||
} | } | ||
− | # | + | /*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: | ||
} | } | ||
− | # | + | /*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; | ||
} | } | ||
− | . | + | /*Class for text that needs to be highlighted, used in span tag */ |
− | + | .highlightText { | |
+ | color:red; | ||
+ | font-size:110%; | ||
+ | font-weight:bold; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* Styling for block quotes */ | |
− | + | #contentWrap blockquote { | |
− | + | font-style: italic; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /*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- | + | 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 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 id="igemLogo" > | <div id="igemLogo" > | ||
− | <a href="https://2015.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2015/ | + | <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