Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- Theme Name: Warren's Floating Theme
- Author: Warren
- Description: This is the HTML for the theme I used while attending the course Customizing Themes in WordPress.
- The styles are grouped into the following sections:
- Section 1: Document defaults
- Section 2: Header element rules
- Section 3: Content element rules
- Section 4: Footer element rules
- Section 5: Responsive rules
- Section 6: Print rules
- Version: 1.0
- */
- /* ============================ */
- /* Section 1: Document defaults */
- /* ============================ */
- @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
- @import url(http://fonts.googleapis.com/css?family=Bangers);
- body {margin: 2% 15%; font-family: Lato, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
- background-image: url(images/plhouse.jpg);
- background-repeat: no-repeat;
- background-size: 30%;
- background-attachment: fixed;
- /* background-position: right top;*/
- }
- /* =============================== */
- /* Section 2: Header element rules */
- /* =============================== */
- header {
- background-image: url(images/SeeThroughWaves.png);
- background-repeat: no-repeat;
- background-size: 100%;
- height: 0;
- padding-bottom: 24.1%;
- border-left: solid #121E26 1px;
- border-right: solid #121E26 1px;
- }
- header h1 {
- margin: 0;
- padding: 0;text-align: center;
- font-family: Bangers, "Times New Roman", Times, serif;
- font-size: 5.8vw;
- text-shadow: 8px 8px #B9D9E8;
- }
- header p.TagLine {margin-bottom: 1em; font-style: italic; text-align: center; font-size: 1.8vw}
- #global {
- background-color: #121E26;
- text-align: right;
- overflow: auto;
- padding-right: 40px;
- height: 40px;
- border-top-left-radius: 30px; -ms-border-top-left-radius: 30px; -moz-border-top-left-radius: 30px; -webkit-border-top-left-radius: 30px; -khtml-border-top-left-radius: 30px;
- border-top-right-radius: 30px; -ms-border-top-right-radius: 30px; -moz-border-top-right-radius: 30px; -webkit-border-top-right-radius: 30px; -khtml-border-top-right-radius: 30px;
- }
- #global a, #global a:link, #global a:active, #global a:visited {color: #E7F1F6;text-decoration: none; }
- #global a:hover {color: white; text-decoration: underline; }
- #searchform {display: inline; float: right; }
- /* Making the cardinal navigation list horizontal, and drop-down */
- #cardinal {background-color: #1a2d38; display: block; /*float: left;*/ margin: 0 auto; width: 100%; height: 40px; font-size: 90%;}
- #cardinal ul, ul { list-style: none; margin: 0; padding: 0; }
- #cardinal li {float: left; position: relative;}
- #cardinal ul ul {display: none;position: absolute;top: 40px;left: 1em;float: left;width: 180px;opacity: 0.95;z-index: 99999;}
- #cardinal a {color: #aaa; display: block; line-height: 40px; padding: 0 10px; text-decoration: none; font-weight: normal;}
- #cardinal ul li:hover > ul { display: block;}
- #cardinal li:hover > a,
- #cardinal ul ul :hover > a {background-color: #333; color: #fff;}
- #cardinal ul ul a {background-color: #333; line-height: 1em; padding: auto 10px; width: 160px; height: 40px;}
- #cardinal ul li.current_page_item > a,
- #cardinal ul li.current-menu-ancestor > a,
- #cardinal ul li.current-menu-item > a,
- #cardinal ul li.current-menu-parent > a {color: #fff;}
- /* ================================ */
- /* Section 3: Content element rules */
- /* ================================ */
- #main {
- padding: 0 1em;
- overflow: auto;
- background-color: white;
- opacity: .9;
- border-left: solid #121E26 1px;
- border-right: solid #121E26 1px;
- }
- article {
- overflow: auto;
- background-color: white;
- opacity: .95;
- padding: 0 2em;
- }
- #leftbar {font-size: 90%;}
- #rightbar {padding-left: 1em;font-size: 90%;}
- #breadcrumbs {border-bottom: solid #324853 1px;font-size: 90%;}
- #breadcrumbs a, #breadcrumbs a:link, #breadcrumbs a:active, #breadcrumbs a:visited {color: black; text-decoration: none; }
- #breadcrumbs a:hover {color: black; text-decoration: underline;}
- #pagefoot {margin: 1em 2em;border-width: 0;border-top: solid #666699 1px;font-size: 90%;overflow: auto;clear: both;}
- /* Making the sidebar thing happen */
- article {margin: 0 200px;}
- #leftbar {width: 198px; float: left;}
- #rightbar {width: 198px; float: right;}
- /* === Text styles === */
- #main ul {list-style-type: initial;margin: 2em;}
- /* === Wordpress-isms === */
- .current_page_item, .current-page-ancestor, .current-menu-item {font-weight: bold;color: #330000;} /* Mainly to highlight the section in cardinal navigation */
- .alignright {float: right;}
- .alignleft {float: left;}
- .wp-caption {
- border: solid black 1px;
- margin: 2em auto;
- padding: 15px;
- text-align: center;
- border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; /* this is an example of how to make rounded corners, the extra rules are for older browsers that do it own their own. */
- }
- .wp-caption-text {font-style: italic;font-size: 90%;}
- /* =============================== */
- /* Section 4: Footer element rules */
- /* =============================== */
- footer {font-size: 80%;
- }
- footer a, footer a:link, footer a:active, footer a:visited, footer a:hover {color: black; text-decoration: none;}
- footer a:hover {color: white; text-decoration: underline;}
- .TopRow {background-color: #324853;clear: both;overflow: auto;}
- .Centre {text-align: center;}
- .BottomRow {height: 40px;background-color: #1a2d38; color: white;text-align: center;
- border-bottm-left-radius: 30px; -ms-border-bottom-left-radius: 30px; -moz-border-bottom-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -khtml-border-bottom-left-radius: 30px;
- border-bottom-right-radius: 30px; -ms-border-bottom-right-radius: 30px; -moz-border-bottom-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -khtml-border-bottom-right-radius: 30px;
- }
- /* making the 3 column thing happen */
- .Centre {margin: 0 200px;}
- .LeftSide {width: 198px; float: left;padding-left: 2em;}
- .RightSide {width: 198px; float: right;padding-left: 2em;}
- /* =========================== */
- /* Section 5: Responsive rules */
- /* =========================== */
- @media (min-width: 1100px) {
- /* what to do for wide screens */
- }
- @media (min-width: 600px) and (max-width: 1099px) {
- /* what to do for medium screens */
- }
- @media (max-width: 599px) {
- /* what to do for small screens */
- body {margin: 0; }
- article, .Centre {margin: 0;}
- #leftbar, #rightbar, .LeftSide, .RightSide {float: none;width: 100%; }
- }
- /* ====================== */
- /* Section 6: Print rules */
- /* ====================== */
- @media print {
- body {font-size: 10pt; margin: 0; }
- nav, aside#rightbar {display: none;}
- article {margin: 0;}
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement