Difference between revisions of "Template:Team:Groningen/CSS/Main"
(Main CSS of groningen template) |
m (Added style tags) |
||
Line 1: | Line 1: | ||
− | / | + | <style type="text/css"> |
− | /* | + | /**** PAGE LAYOUT ****/ |
− | + | ||
− | + | ||
− | + | ||
− | /* | + | /* Change Background color*/ |
− | + | body { | |
− | + | background-color: #fff; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | /* Creates | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ |
− | # | + | #mainContainer { |
− | + | width: 978px; | |
− | + | overflow:hidden; | |
− | + | float:left; | |
− | + | margin-left:20px; | |
− | + | margin-bottom: 10px; | |
− | + | background-color: #fff; | |
− | + | border-bottom: 14px solid #565656; | |
− | + | border-right: 2px solid #565656; | |
− | + | border-left: 2px solid #565656; | |
− | + | border-top: 2px solid #565656; | |
− | + | font-family: "Trebuchet MS", Helvetica, sans-serif; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | /* | + | /* Creates the container for the menu */ |
− | # | + | #menuContainer { |
− | + | float:left; | |
− | + | width: 134px; | |
− | + | padding: 20px 0px; | |
− | + | border-top: 14px solid #565656; | |
− | } | + | background-color: #E8E8E9; |
+ | } | ||
− | /** | + | /* Creates the container for the content */ |
+ | #contentContainer { | ||
+ | padding-top:20px; | ||
+ | padding-right:10px; | ||
+ | margin-bottom: 20px; | ||
+ | width: 814px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | background-color: #fff; | ||
+ | border-top: 14px solid #565656; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | } | ||
− | /* Change the styling of text for everything inside main container */ | + | /* Set up height place holder for the banner */ |
− | #mainContainer p { | + | #bannerContainer { |
− | + | height:200px; | |
− | + | margin:auto; | |
− | } | + | text-align:center; |
+ | color: #24B694; | ||
+ | } | ||
+ | |||
+ | /**** VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) ****/ | ||
+ | |||
+ | /* Change the styling of text for everything inside main container */ | ||
+ | #mainContainer p { | ||
+ | font-size: 13px; | ||
+ | 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: #565656; | |
− | + | border-bottom: none; | |
− | + | font-weight: bold; | |
− | + | font-family: "Trebuchet MS", Helvetica, sans-serif; | |
− | + | 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; | |
− | + | color: #23b593; | |
− | } | + | } |
− | /* 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: #59bf92; | |
− | } | + | } |
− | /* Change the styling of tables */ | + | /* Change the styling of tables */ |
− | #contentContainer table { | + | #contentContainer table { |
− | + | border: 1px solid #565656; | |
− | + | border-collapse: collapse; | |
− | + | width: 90% | |
− | + | margin: auto; | |
− | + | margin-bottom: 15px; | |
− | + | margin-top: 15px; | |
− | + | margin-right: 10px; | |
− | + | margin-left: 10px; | |
− | } | + | } |
− | /* Change the styling of table cells */ | + | /* Change the styling of table cells */ |
− | #contentContainer td { | + | #contentContainer td { |
− | + | padding: 10px; | |
− | + | border: 1px solid #565656; | |
− | + | border-collapse: collapse; | |
− | + | vertical-align: text-top; | |
− | } | + | } |
− | / *Change the styling of table headers */ | + | / *Change the styling of table headers */ |
− | #contentContainer th { | + | #contentContainer th { |
− | + | background-color: #E8E8E9; | |
− | + | padding: 10px; | |
− | + | border: 1px solid #565656; | |
− | + | border-collapse: collapse; | |
− | + | vertical-align: text-top; | |
− | } | + | } |
− | /**** MENU STYLING ****/ | + | /**** MENU STYLING ****/ |
− | /* Styling for the links in the menu */ | + | /* Styling for the links in the menu */ |
− | #menuContainer a { | + | #menuContainer a { |
− | + | color: #565656; | |
− | + | text-decoration:none; | |
− | + | font-weight: bold; | |
− | } | + | } |
− | /* Sets the style for lists inside menuContainer */ | + | /* Sets the style for lists inside menuContainer */ |
− | #menuContainer ul { | + | #menuContainer ul { |
− | + | list-style: none; | |
− | + | margin-left:0px; | |
− | } | + | } |
− | /* Styles the list items to become menu buttons */ | + | /* Styles the list items to become menu buttons */ |
− | #menuContainer ul li { | + | #menuContainer ul li { |
− | + | text-align: center; | |
− | + | display: block; | |
− | + | width: 100%; | |
− | + | height:30px; | |
− | + | padding-top:10px; | |
− | } | + | } |
− | /* For the menu buttons, changes the color when hovering */ | + | /* For the menu buttons, changes the color when hovering */ |
− | #menuContainer li:hover { | + | #menuContainer li:hover { |
− | + | color: #FFF; | |
− | + | background-color: #24B694; | |
− | } | + | } |
− | /* Submenus are not displayed as default */ | + | /* Submenus are not displayed as default */ |
− | #menuContainer li ul { | + | #menuContainer li ul { |
− | + | display: none; | |
− | + | padding-top:15px; | |
− | + | margin-left: -19px; | |
− | } | + | } |
+ | |||
+ | /* Submenus are displayed when hovering the menu button */ | ||
+ | #menuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:right; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
− | /* | + | /* Style the submenu buttons */ |
− | #menuContainer li | + | #menuContainer li ul li{ |
− | + | background-color: #59BF92; | |
− | + | padding-left:20px; | |
− | + | padding-right:20px; | |
− | + | height:30px; | |
− | + | padding-top:10px; | |
− | + | margin-top:-2px; | |
+ | color: #565656; | ||
+ | width: 150px; | ||
} | } | ||
− | /* | + | /**** CLASSES ****/ |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /* | + | /* Clear class for all the pages, adds spacing too */ |
+ | .clear{ | ||
+ | clear:both; | ||
+ | height: 10px; | ||
+ | } | ||
− | /* | + | /* highlight box for special messages */ |
− | . | + | .highlightBox { |
− | + | width:500px; | |
− | + | margin:auto; | |
− | } | + | background-color: #E8E8E9; |
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | padding: 15px; | ||
+ | padding-top: 5px; | ||
+ | } | ||
− | + | </style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Revision as of 13:29, 22 June 2015
<style type="text/css">
/**** PAGE LAYOUT ****/
/* Change Background color*/ body { background-color: #fff; }
/* Creates a container that will wrap all of the content inside your wiki pages. */ #mainContainer { width: 978px; overflow:hidden; float:left; margin-left:20px; margin-bottom: 10px; background-color: #fff; border-bottom: 14px solid #565656; border-right: 2px solid #565656; border-left: 2px solid #565656; border-top: 2px solid #565656; font-family: "Trebuchet MS", Helvetica, sans-serif; }
/* Creates the container for the menu */ #menuContainer { float:left; width: 134px; padding: 20px 0px; border-top: 14px solid #565656; background-color: #E8E8E9; }
/* Creates the container for the content */ #contentContainer { padding-top:20px; padding-right:10px; margin-bottom: 20px; width: 814px; padding-left: 20px; float: left; background-color: #fff; border-top: 14px solid #565656; font-family: "Trebuchet MS", Helvetica, sans-serif; }
/* Set up height place holder for the banner */ #bannerContainer { height:200px; margin:auto; text-align:center; color: #24B694; }
/**** VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) ****/
/* Change the styling of text for everything inside main container */ #mainContainer p { font-size: 13px; color: #000000; }
/* This changes the color and font family */ #contentContainer h1, h2, h3, h4, h5, h6 { color: #565656; border-bottom: none; font-weight: bold; font-family: "Trebuchet MS", Helvetica, sans-serif; margin-top:10px; }
/* Style of the links - links are different inside the menu */ #contentContainer a { font-weight: bold; color: #23b593; }
/* Styling links on hover- links are different inside the menu */ #contentContainer a:hover { color: #59bf92; }
/* Change the styling of tables */ #contentContainer table { border: 1px solid #565656; border-collapse: collapse; width: 90% margin: auto; margin-bottom: 15px; margin-top: 15px; margin-right: 10px; margin-left: 10px; }
/* Change the styling of table cells */ #contentContainer td { padding: 10px; border: 1px solid #565656; border-collapse: collapse; vertical-align: text-top; }
/ *Change the styling of table headers */ #contentContainer th { background-color: #E8E8E9; padding: 10px; border: 1px solid #565656; border-collapse: collapse; vertical-align: text-top; }
/**** MENU STYLING ****/
/* Styling for the links in the menu */ #menuContainer a { color: #565656; text-decoration:none; font-weight: bold; }
/* Sets the style for lists inside menuContainer */ #menuContainer ul { list-style: none; margin-left:0px; }
/* Styles the list items to become menu buttons */ #menuContainer ul li { text-align: center; display: block; width: 100%; height:30px; padding-top:10px; }
/* For the menu buttons, changes the color when hovering */ #menuContainer li:hover { color: #FFF; background-color: #24B694; }
/* Submenus are not displayed as default */ #menuContainer li ul { display: none; padding-top:15px; margin-left: -19px; }
/* Submenus are displayed when hovering the menu button */ #menuContainer li:hover ul { /*display: inline-block; */ display: block; position: absolute; float:right; margin-left: 134px; margin-top:-42px; }
/* Style the submenu buttons */ #menuContainer li ul li{ background-color: #59BF92; padding-left:20px; padding-right:20px; height:30px; padding-top:10px; margin-top:-2px; color: #565656; width: 150px; }
/**** CLASSES ****/
/* Clear class for all the pages, adds spacing too */ .clear{ clear:both; height: 10px; }
/* highlight box for special messages */ .highlightBox { width:500px; margin:auto; background-color: #E8E8E9; margin-bottom: 15px; margin-top: 15px; padding: 15px; padding-top: 5px; }
</style>