/* Light Top Bar * * Changes the theme of the top bar from dark * to light. * --------------------------------------------- */ body.light_topbar .first-area { background:#fff; } body.light_topbar .first-area .site-title { box-shadow:inset 0 -15px 0 #eee; } body.light_topbar .first-area .site-title, body.light_topbar .first-area .social-nav .fa { color:#626262; } body.light_topbar .first-area #searchform #s, body.light_topbar .first-area .social-nav a, body.light_topbar .first-area .social-nav a:visited { color:#626262; background-color:#eee; } /* Hide Elements * * Add the corresponding class to the * tag in template.html to activate. * * Usage Examples: * * * * You can apply multiple changes to the theme * by using multiple classes at once. * * IMPORTANT: Make sure they're spaced apart like the example below. * * --------------------------------------------- */ /* Hide Site Name * * Class: hide_sitename ------------------------------ */ body.hide_sitename .first-area .site-title { display:none; } /* Hide Social Navigation * * Class: hide_socialnav ------------------------------ */ body.hide_socialnav .first-area .social-nav { display:none; } /* Hide Master Header * * Class: hide_masthead ------------------------------ */ body.hide_masthead .first-area { margin:0 auto 0; padding:20px 0; } body.hide_masthead .mast-head { margin:0 auto 0; padding:15px 0; background:none; height:60px; position:relative; z-index:999; } body.hide_masthead .site-navigation { padding:15px 0; background:#9F5C6D; bottom:0; } body.hide_masthead .main-nav ul li a { color:#292929; background:#eeeeee; border-radius:5px; } @media screen and (max-width:980px) { body.hide_masthead .mobile-name:before { opacity:0; } } /* Hide Site Disclaimer * * Class: hide_disclaim ------------------------------ */ body.hide_disclaim .disclaimer { display:none; } /* Change Body Font Size * * Default font size is 15px * --------------------------------------------- */ body, .listbox, .textinput, textarea, select, .statlink h2, td .tableh1:last-child, .thumb_title_title, .tableb { font-size:; } .catlink { font-size:; } .catrow span.cat-desc { font-size:; } /* HOW TO CHANGE YOUR THEME COLORS: * * Place your color HEX code in the empty selector * between the : and ; symbols. * * Usage examples: * * background-color: #ffffff; * color: #ffffff; * * If nothing changes after refreshing your * browser, clear your browser cache. --------------------------------------------- */ /* Theme Accent Colors * * Color: #9F5C6D --------------------------------------------- */ /* Elements that use the Accent color for a background color. --------------------------------------------- */ *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb:active, .social-nav ul li a:hover, .social-nav ul li a:focus, .social-nav ul li a:visited:hover, body.light_topbar .social-nav ul li a:visited:hover, body.light_topbar .social-nav ul li a:hover, body.light_topbar .social-nav ul li a:focus, .mobile-name .mobile-overlay, .cpg-nav a:hover, .cpg-nav a:focus, .site-footer:after, .site-footer .credit:hover, .button:hover, .buttonlist ul li a:hover, .button:focus, .buttonlist ul li a:focus, button:hover, button:focus, .navmenu-active, .thumb_title_views, body.hide_masthead .site-navigation { background-color:HEX_CODE; } /* Elements that use the Accent color for a text color. --------------------------------------------- */ body.light_topbar .first-area .site-title span, .first-area .site-title span, .site-footer .site-footer-name span, a:hover, a:focus, i, em, .catlink a, .tableh1 a:hover, .tableh1 a:focus, .tableh1-alt a:hover, .tableh1 .statlink a:hover, .tableh1 .statlink a:focus { color:HEX_CODE; } .tableh1 a:hover, .tableh1 a:focus, .tableh1-alt a:hover, .tableh1 .statlink a:hover, .tableh1 .statlink a:focus { box-shadow:inset 0 -1px 0 HEX_CODE; } /* Image Border when hovered --------------------------------------------- */ .image:hover { box-shadow:2px 2px 0 HEX_CODE; } /* Accent Text Color * * This is the color of the text for all elements * using the Accent color for a background color. * * Choose your color wisely so text is readable. --------------------------------------------- */ .social-nav ul li a:visited:hover, .social-nav ul li a:hover, .social-nav ul li a:focus, body.light_topbar .social-nav ul li a:visited:hover, body.light_topbar .social-nav ul li a:hover, body.light_topbar .social-nav ul li a:focus, .cpg-nav a:hover, .cpg-nav a:focus, button:hover, button:focus, .tableh1-alt, .navmenu-active { color:HEX_CODE; } /* Extra Colors * * These classes use the Accent Color * but for different elements. --------------------------------------------- */ body.hide_masthead .main-nav ul li a { color:HEX_CODE; background:HEX_CODE; } body.hide_masthead .main-nav ul li a:hover, body.hide_masthead .main-nav ul li a:focus { color:HEX_CODE; background:HEX_CODE; } /* Header Image * * You can change the height and width of the * header if your header is smaller or bigger. * --------------------------------------------- */ /* Here you can input a different filename * for your new header, otherwise leave it as * it is if your file name is the same as the * one already being used. * * You can also adjust the height and width * to accomdate your custom header if yours * is wider or shorter than the default one. * * Default height: 600px * Default Width: 1300px --------------------------------------------- */ .mast-head { height:YOUR_NEW_HEIGHT; max-width:YOUR_NEW_WIDTH; background-image:url('./images/header.png'); } /* Mobile Layout Options --------------------------------------------- */ .mobile-name .overlay { background-color:HEX_CODE; } @media screen and (max-width:980px) { .mobile-name h1, .site-navigation, .main-nav ul li, .main-nav ul li a, .show-menu { color:HEX_CODE!important; } }