Difference between revisions of "Template:Kent"
Jamesaston (Talk | contribs) |
|||
(218 intermediate revisions by 4 users not shown) | |||
Line 14: | Line 14: | ||
display: none; | display: none; | ||
} | } | ||
− | + | ||
/*-- Remove borders, float content left and remove padding/margin */ | /*-- Remove borders, float content left and remove padding/margin */ | ||
#globalWrapper, #content{ | #globalWrapper, #content{ | ||
Line 43: | Line 43: | ||
background-color: #fff; | background-color: #fff; | ||
} | } | ||
+ | |||
+ | /*JA Added 1st July */ | ||
+ | .site-wrapper { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | height: 100%; /* For at least Firefox */ | ||
+ | min-height: 90%; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/8/8a/Team_Kent_banner18thsep.jpg') no-repeat center center fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .site-wrapper-sub-1 { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | height: 100%; /* For at least Firefox */ | ||
+ | min-height: 100%; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/0/0d/Team_Kent_igem58.jpg') no-repeat center center fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | .site-wrapper-sub-2 { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | height: 100%; /* For at least Firefox */ | ||
+ | min-height: 100%; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/6/68/Team_Kent_igem50.jpg') no-repeat center center fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .site-wrapper-sub-team { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | height: 100%; /* For at least Firefox */ | ||
+ | min-height: 100%; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/4/41/Team_Kent_TeamPhoto.jpg') no-repeat center center fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .calendarside{ | ||
+ | display: table; | ||
+ | float: left; | ||
+ | width: 4%; | ||
+ | height: 6%; | ||
+ | } | ||
+ | |||
+ | .notesideimage{ | ||
+ | width="20%" | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | a.anchor { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | top: -70px; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | #float{ | ||
+ | position:fixed; | ||
+ | top:50px; | ||
+ | left:0; | ||
+ | } | ||
/* Creates a container that will wrap all of the content inside your wiki pages. */ | /* Creates a container that will wrap all of the content inside your wiki pages. */ | ||
Line 54: | Line 140: | ||
margin-bottom: auto; | margin-bottom: auto; | ||
background-color: #fff; | background-color: #fff; | ||
− | font-family: | + | font-family: Tahoma, Geneva, sans-serif; !important |
+ | } | ||
+ | #body{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | overflow:auto; | ||
+ | float:center; | ||
+ | margin-left: 50px; | ||
+ | margin-right: 50px; | ||
+ | margin-bottom: auto; | ||
+ | background-color: #fff; | ||
+ | font-family: Tahoma, Geneva, sans-serif; !important | ||
} | } | ||
− | |||
/* Creates the container for the content */ | /* Creates the container for the content */ | ||
#contentContainer { | #contentContainer { | ||
Line 63: | Line 159: | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
width: 100%; | width: 100%; | ||
− | padding-left: | + | padding-left: 0px; |
float: left; | float: left; | ||
background-color: #fff; | background-color: #fff; | ||
border-top: 0px; | border-top: 0px; | ||
− | font-family: | + | font-family: Tahoma, Geneva, sans-serif; !important |
} | } | ||
+ | |||
+ | .modelbody { | ||
+ | background-color: #f4f4f4 | ||
+ | } | ||
/*Set up height place holder for the banner*/ | /*Set up height place holder for the banner*/ | ||
Line 75: | Line 175: | ||
margin:auto; | margin:auto; | ||
text-align:center; | text-align:center; | ||
− | color: # | + | color: #000000; |
} | } | ||
− | |||
/* Creates the container for the footer */ | /* Creates the container for the footer */ | ||
#footerContainer { | #footerContainer { | ||
− | padding-top:20px; | + | padding-top: 20px; |
padding-right:10px; | padding-right:10px; | ||
− | background-color: # | + | background-color: #000000; |
margin-bottom: 20px; | margin-bottom: 20px; | ||
width: 100%; | width: 100%; | ||
Line 89: | Line 188: | ||
border-top: none; | border-top: none; | ||
− | font-family: | + | font-family: Tahoma, Geneva, sans-serif; !important |
} | } | ||
− | |||
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
− | |||
/*Change the styling of text for everything inside main container*/ | /*Change the styling of text for everything inside main container*/ | ||
#mainContainer p { | #mainContainer p { | ||
− | font-size: | + | font-size: 15px; |
color: #000000; | color: #000000; | ||
− | } | + | } |
− | + | ||
/*This changes the color and font family */ | /*This changes the color and font family */ | ||
#contentContainer h1, h2, h3, h4, h5, h6 { | #contentContainer h1, h2, h3, h4, h5, h6 { | ||
− | color: # | + | color: #000000; |
border-bottom: none; | border-bottom: none; | ||
font-weight: bold; | font-weight: bold; | ||
− | font-family: | + | font-family: Tahoma, Geneva, sans-serif; !important |
margin-top:10px; | margin-top:10px; | ||
+ | |||
} | } | ||
− | |||
/*Style of the links - links are different inside the menu */ | /*Style of the links - links are different inside the menu */ | ||
#contentContainer a { | #contentContainer a { | ||
font-weight: bold; | font-weight: bold; | ||
− | color: # | + | color: #C96333; |
} | } | ||
− | |||
/* Styling links on hover- links are different inside the menu */ | /* Styling links on hover- links are different inside the menu */ | ||
#contentContainer a:hover { | #contentContainer a:hover { | ||
− | color: # | + | color: #009000; |
} | } | ||
− | |||
/*Change the styling of tables */ | /*Change the styling of tables */ | ||
#contentContainer table { | #contentContainer table { | ||
Line 128: | Line 222: | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
margin-top: 15px; | margin-top: 15px; | ||
− | margin-right: | + | margin-right: 0%; |
− | margin-left: | + | margin-left: 2.5%; |
} | } | ||
− | |||
/*Change the styling of table cells*/ | /*Change the styling of table cells*/ | ||
#contentContainer td { | #contentContainer td { | ||
Line 139: | Line 232: | ||
vertical-align: text-top; | vertical-align: text-top; | ||
} | } | ||
− | |||
/*Change the styling of table headers */ | /*Change the styling of table headers */ | ||
#contentContainer th { | #contentContainer th { | ||
− | background-color: # | + | background-color: #FFF; |
padding: 10px; | padding: 10px; | ||
border: 1px solid #565656; | border: 1px solid #565656; | ||
Line 148: | Line 240: | ||
vertical-align: text-top; | vertical-align: text-top; | ||
} | } | ||
− | |||
/*CLASSES */ | /*CLASSES */ | ||
− | |||
/*Clear class for all the pages, adds spacing too*/ | /*Clear class for all the pages, adds spacing too*/ | ||
.clear{ | .clear{ | ||
Line 156: | Line 246: | ||
height: 10px; | height: 10px; | ||
} | } | ||
− | |||
− | |||
/* highlight box for special messages */ | /* highlight box for special messages */ | ||
.highlightBox { | .highlightBox { | ||
Line 169: | Line 257: | ||
} | } | ||
+ | .site-wrapper-text { | ||
+ | background-color: #F6F6F6; | ||
+ | border-color: #F6F6F6; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | <!------.slider{ | ||
+ | position: relative; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | margin: auto; | ||
+ | overflow: hidden; | ||
+ | z-index: 13; | ||
+ | } | ||
+ | .slider .slider_left{ | ||
+ | position: absolute; | ||
+ | background-color:black; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .slider .slider_left img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 25%; | ||
+ | left: 10px; | ||
+ | } | ||
+ | .slider .slider_right{ | ||
+ | position: absolute; | ||
+ | background-color:black; | ||
+ | top: 0px; | ||
+ | left: 300px; | ||
+ | width: 300px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .slider .slider_right img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 25%; | ||
+ | left: -10px; | ||
+ | } | ||
+ | .slider .slider_imgs{ | ||
+ | position: absolute; | ||
+ | } | ||
+ | .slider .slider_imgs div{ | ||
+ | float: left; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | } | ||
+ | .slider .slider_imgs #slide1{ | ||
+ | float: left; | ||
+ | } | ||
+ | .slider .slider_imgs #slide2{ | ||
+ | float: left; | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 50%; | ||
+ | } | ||
+ | .slider .slider_imgs #slide3{ | ||
+ | float: left; | ||
+ | } | ||
+ | .slider .slider_imgs #slide4{ | ||
+ | float: left; | ||
+ | } ------> | ||
+ | |||
+ | @media screen and (max-width: 1024px) { | ||
+ | .sidecontents{ | ||
+ | position:none; !important | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 1200px){ | ||
+ | /* no fixed navbar for small devices */ | ||
+ | .navbar-fixed-top{ | ||
+ | position: absolute; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 320px) and (max-width: 989px) { | ||
+ | .parallax { | ||
+ | background-attachment: scroll !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | .hidden-xs { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | .hidden-sm { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | .hidden-md { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .hidden-lg { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1024px) { | ||
+ | .site-wrapper { | ||
+ | background-size: cover !important; | ||
+ | } | ||
+ | } | ||
</style> | </style> | ||
<!-- End of CSS --> | <!-- End of CSS --> | ||
− | |||
− | |||
<!-- Start of the template html elements. --> | <!-- Start of the template html elements. --> | ||
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.--> | <div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.--> | ||
− | |||
<!---------<div id="bannerContainer"> <br><br> </div>-------> | <!---------<div id="bannerContainer"> <br><br> </div>-------> | ||
− | |||
− | |||
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> | <div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> | ||
− | |||
− | |||
</html> | </html> |
Latest revision as of 18:15, 18 September 2015