Difference between revisions of "Template:2015CSS"
(94 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 | + | |
− | #contentWrap { | + | /* General wrap for the pages*/ |
+ | #contentWrap, #contentWrap_MainPage { | ||
width: 980px; | width: 980px; | ||
height: auto; | height: auto; | ||
Line 61: | Line 62: | ||
− | + | ||
− | # | + | /* MAIN PAGE*/ |
− | + | ||
− | + | /*General Layout */ | |
− | + | /*Main page left column, content will be placed here */ | |
+ | #leftColumn_MainPage { | ||
+ | width: 780px; | ||
+ | float: left; | ||
+ | padding: 12px 10px 0px 10px; | ||
+ | margin-top: 0px; | ||
} | } | ||
− | + | /*Main page right column, the on page menu will be placed here */ | |
− | # | + | #rightColumn_MainPage { |
− | + | background-color: #f2f2f2; | |
− | + | width: 180px; | |
+ | float: left; | ||
+ | height: 1855px; | ||
+ | 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; | |
− | + | margin-bottom: 5px; | |
− | + | float: left; | |
+ | width:215px; | ||
+ | margin-right:10px; | ||
+ | margin-left:5px; | ||
+ | background-color: #fff; | ||
} | } | ||
− | + | /*Class for creating a news post, this is used in the Main Page and in the Archived news page */ | |
− | + | .newsItem { | |
− | + | border: 1px solid #cccccc; | |
− | + | 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; | ||
+ | } | ||
− | + | /*Style the images inside a news post */ | |
− | + | .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; | ||
+ | } | ||
− | + | ||
− | color:# | + | |
− | + | /*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; | ||
− | + | 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 */ | ||
+ | |||
+ | /*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; | ||
+ | } | ||
+ | |||
+ | |||
− | /* | + | /*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: | + | 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 144: | 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; | ||
− | |||
} | } | ||
− | + | ||
+ | |||
+ | /*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; | ||
Line 158: | Line 345: | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
margin-top: 15px; | margin-top: 15px; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
} | } | ||
− | # | + | /*Styling cells inside all of the tables */ |
− | + | #contentWrap td { | |
padding: 10px; | padding: 10px; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
Line 168: | Line 357: | ||
} | } | ||
− | + | /*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: | + | border: 2px solid #3aa76c; |
background-color: fff; | background-color: fff; | ||
height: 30px; | height: 30px; | ||
Line 177: | 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 */ | |
− | background-color: # | + | .button:hover { |
+ | 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 226: | Line 431: | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
− | margin- | + | 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 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