Difference between revisions of "Template:2015CSS"
(72 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 | + | #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 61: | ||
} | } | ||
− | |||
− | |||
+ | /* MAIN PAGE*/ | ||
+ | /*General Layout */ | ||
+ | /*Main page left column, content will be placed here */ | ||
#leftColumn_MainPage { | #leftColumn_MainPage { | ||
− | width: | + | width: 780px; |
float: left; | float: left; | ||
− | padding: 12px 10px | + | padding: 12px 10px 0px 10px; |
margin-top: 0px; | margin-top: 0px; | ||
} | } | ||
− | + | /*Main page right column, the on page menu will be placed here */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
#rightColumn_MainPage { | #rightColumn_MainPage { | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
− | width: | + | width: 180px; |
float: left; | float: left; | ||
− | + | height: 1855px; | |
− | height: | + | padding-top:5px; |
− | + | ||
} | } | ||
− | . | + | /*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 { | ||
− | |||
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: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*Right Container (menu) elements */ | |
+ | /*Style the background for menu items*/ | ||
.menu-header { | .menu-header { | ||
− | background: #d3d3d3; | + | background-color: #d3d3d3; |
− | margin: | + | margin-bottom: 2px; |
− | padding: | + | padding-left: 11px; |
− | + | padding-top:7px; | |
− | + | padding-bottom:7px; | |
− | color: # | + | color: #6D6E70; |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #rightColumn_MainPage a{ | |
− | + | text-decoration: none; | |
− | + | color: #565656; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /*Styling for the the list item */ | |
− | + | #rightColumn_MainPage ul { | |
− | + | margin-top: -5px; | |
− | + | ||
− | + | ||
} | } | ||
− | + | /*Styling for the the list item */ | |
− | # | + | #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; | ||
− | + | 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 the list item, changes the color on hover.*/ | |
− | # | + | #rightColumn_MainPage ul li:hover{ |
− | + | background-color:#c1dfa6; | |
− | + | ||
} | } | ||
− | + | ||
− | # | + | /*CONTENT PAGES */ |
− | font- | + | |
+ | /*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 | + | /*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: | ||
} | } | ||
− | /* | + | |
+ | /* For pages with submenus, creates the right column of the page*/ | ||
#rightColumn { | #rightColumn { | ||
width: 770px; | width: 770px; | ||
Line 187: | Line 249: | ||
} | } | ||
− | + | ||
− | # | + | |
− | + | /*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; | ||
− | |||
− | |||
} | } | ||
+ | /*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, | + | |
+ | |||
+ | |||
+ | /*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; | ||
− | |||
− | |||
} | } | ||
− | #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 { | |
− | + | 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; | 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 261: | Line 349: | ||
} | } | ||
− | # | + | /*Styling cells inside all of the tables */ |
− | + | #contentWrap td { | |
padding: 10px; | padding: 10px; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
Line 269: | Line 357: | ||
} | } | ||
− | # | + | /*Styling table headers for all the tables */ |
+ | #contentWrap th { | ||
background-color: #464646; | background-color: #464646; | ||
padding: 10px; | padding: 10px; | ||
Line 278: | 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: | + | border: 2px solid #3aa76c; |
background-color: fff; | background-color: fff; | ||
height: 30px; | height: 30px; | ||
Line 287: | 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: # | + | background-color: #3aa76c; |
+ | color: white; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* 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 */ | ||
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*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 { | ||
width:700px; | width:700px; | ||
margin:auto; | margin:auto; | ||
Line 336: | Line 431: | ||
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 344: | 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 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; | ||
− | + | color: #f58631; | |
− | color:#f58631; | + | |
font-weight: bold; | font-weight: bold; | ||
− | text-align:center; | + | text-align: center; |
border-radius: 50%; | border-radius: 50%; | ||
− | float: | + | float: none; |
− | margin-right:5px; | + | margin-right: 5px; |
− | margin-left: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 { | .pop_why:hover { | ||
color: #fff; | color: #fff; | ||
Line 370: | 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; | ||
− | margin: | + | margin: auto; |
+ | left:100px; | ||
top: 100px; | top: 100px; | ||
− | width: | + | width:550px; |
color:black; | color:black; | ||
background-color: white; | background-color: white; | ||
Line 389: | 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 409: | Line 571: | ||
} | } | ||
); | ); | ||
+ | |||
}); | }); | ||
</script> | </script> | ||
Line 416: | Line 579: | ||
<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> |
Latest revision as of 17:19, 19 March 2015