Advertisement
wclendining

WIDELAYOUTallCSS

Apr 6th, 2015
563
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.40 KB | None | 0 0
  1. /*
  2. Theme Name: Warren's Full Width Layout
  3. Author: [insert your name here]
  4. Description: This is the HTML for the theme I used while attending the course Customizing Themes in WordPress.
  5.  
  6. The styles are grouped into the following sections:
  7.    Section 1: Document defaults
  8.    Section 2: Header element rules
  9.    Section 3: Content element rules
  10.    Section 4: Footer element rules
  11.    Section 5: Responsive rules
  12.    Section 6: Print rules
  13.  
  14. Version: 1.0
  15. */
  16.       /* ============================ */
  17.       /* Section 1: Document defaults */
  18.       /* ============================ */
  19.       @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
  20.       @import url(http://fonts.googleapis.com/css?family=Bangers);
  21.       body {margin: 0; font-family: Lato, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
  22.          background: linear-gradient(white/*#CCE4EE*/, /*#33566B*/#1a2d38);
  23.       }
  24.  
  25.       /* =============================== */
  26.       /* Section 2: Header element rules */
  27.       /* =============================== */
  28.       header {
  29.          background-image: url(images/SeeThroughWaves.png);
  30.          background-repeat: no-repeat;
  31.          background-size: 100%;
  32.          height: 0;
  33.          padding-bottom: 24.1%;
  34.       }
  35.       header h1 {
  36.          margin: 0;
  37.          padding: 1em 0 0 0;text-align: center;
  38.          font-family: Bangers, "Times New Roman", Times, serif;
  39.          font-size: 5.8vw;
  40.          text-shadow: 8px 8px #B9D9E8;
  41.          }
  42.       header p.TagLine {margin-bottom: 1em; font-style: italic; text-align: center; font-size: 1.8vw}
  43.       #global {background-color: #121E26;text-align: right;overflow: auto;}
  44.       #global a, #global a:link, #global a:active, #global a:visited {color: #E7F1F6;text-decoration: none; }
  45.       #global a:hover {color: white; text-decoration: underline; }  
  46.       #searchform {display: inline; float: right; }
  47.       /* Making the cardinal navigation list horizontal, and drop-down */
  48.       #cardinal {background-color: #1a2d38; display: block; /*float: left;*/ margin: 0 auto; width: 100%; height: 40px; font-size: 90%;}
  49.       #cardinal ul, ul { list-style: none; margin: 0; padding: 0; }
  50.       #cardinal li {float: left; position: relative;}
  51.       #cardinal ul ul {display: none;position: absolute;top: 40px;left: 1em;float: left;width: 180px;opacity: 0.95;z-index: 99999;}
  52.       #cardinal a {color: #aaa; display: block; line-height: 40px; padding: 0 10px; text-decoration: none; font-weight: normal;}
  53.       #cardinal ul li:hover > ul { display: block;}
  54.       #cardinal li:hover > a,
  55.       #cardinal ul ul :hover > a {background-color: #333; color: #fff;}
  56.       #cardinal ul ul a {background-color: #333; line-height: 1em; padding: auto 10px; width: 160px; height: 40px;}
  57.       #cardinal ul li.current_page_item > a,
  58.       #cardinal ul li.current-menu-ancestor > a,
  59.       #cardinal ul li.current-menu-item > a,
  60.       #cardinal ul li.current-menu-parent > a {color: #fff;}   
  61.  
  62.       /* ================================ */
  63.       /* Section 3: Content element rules */
  64.       /* ================================ */
  65.       #main {
  66.          padding: 0 1em;
  67.          overflow: auto;
  68.          }
  69.       article {
  70.          overflow: auto;
  71.          background-color: white;
  72.          padding: 0 2em;
  73.          }
  74.       #leftbar {font-size: 90%;}
  75.       #rightbar {padding-left: 1em;font-size: 90%;}
  76.       #breadcrumbs {border-bottom: solid #324853 1px;font-size: 90%;}
  77.       #breadcrumbs a, #breadcrumbs a:link, #breadcrumbs a:active, #breadcrumbs a:visited {color: black; text-decoration: none; }
  78.       #breadcrumbs a:hover {color: black; text-decoration: underline;}
  79.       #pagefoot {margin: 1em 2em;border-width: 0;border-top: solid #666699 1px;font-size: 90%;overflow: auto;clear: both;}
  80.       /* Making the sidebar thing happen */
  81.       article {margin: 0 200px;}
  82.       #leftbar {width: 198px; float: left;}
  83.       #rightbar {width: 198px; float: right;}
  84.  
  85.       /* === Text styles === */
  86.       #main ul {list-style-type: initial;margin: 2em;}
  87.      
  88.       /* === Wordpress-isms === */
  89.       .current_page_item, .current-page-ancestor, .current-menu-item {font-weight: bold;color: #330000;} /* Mainly to highlight the section in cardinal navigation */
  90.       .alignright {float: right;}
  91.       .alignleft {float: left;}
  92.       .wp-caption {
  93.         border: solid black 1px;
  94.         margin: 2em auto;
  95.         padding: 15px;
  96.         text-align: center;
  97.         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. */
  98.        }
  99.        .wp-caption-text {font-style: italic;font-size: 90%;}
  100.      
  101.       /* =============================== */
  102.       /* Section 4: Footer element rules */
  103.       /* =============================== */
  104.       footer {
  105.          font-size: 85%;
  106.           }
  107.       footer a, footer a:link, footer a:active, footer a:visited, footer a:hover {color: black; text-decoration: none;}
  108.       footer a:hover {color: white; text-decoration: underline;}
  109.       .TopRow {
  110.          background-color: #324853;clear: both;overflow: auto;
  111.          background-image: url(images/darkwavesOil.png);
  112.          background-size: 100%;
  113.          min-height: 10vw;
  114.          border-top: solid #1a2d38 10px;
  115.          }
  116.       .Centre {text-align: center;}
  117.       .BottomRow {background-color: #1a2d38; color: white;text-align: center;padding: 1em 0;}
  118.       /* making the 3 column thing happen */
  119.       .Centre {margin: 0 200px;}
  120.       .LeftSide {width: 198px; float: left;padding-left: 2em;}
  121.       .RightSide {width: 198px; float: right;padding-right: 2em;}
  122.  
  123.       /* =========================== */
  124.       /* Section 5: Responsive rules */
  125.       /* =========================== */
  126.       @media (min-width: 1100px) {
  127.       /* what to do for wide screens */
  128.       }
  129.       @media (min-width: 600px) and (max-width: 1099px) {
  130.       /* what to do for medium screens */
  131.       }
  132.       @media (max-width: 599px) {
  133.       /* what to do for small screens */
  134.       body {margin: 0; }
  135.       article, .Centre {margin: 0;}
  136.       #leftbar, #rightbar, .LeftSide, .RightSide {float: none;width: 100%; }
  137.       }
  138.  
  139.       /* ====================== */
  140.       /* Section 6: Print rules */
  141.       /* ====================== */
  142.       @media print {
  143.          body {font-size: 10pt; margin: 0; }
  144.          nav, aside#rightbar {display: none;}
  145.          article {margin: 0;}
  146.       }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement