/* custom.css ? custom styles for any WordPress theme that YOU define ------------------------------------------------------------------ This stylesheet will allow you to futureproof your CSS changes against future releases and upgrades on ANY WordPress theme. I know you work hard on your modified styles, and I don't want you to feel like every theme upgrade is a total drag! Also, if you're a designer who makes use of GPL themes in your work, you'll find this incredibly handy! You can come up with a set of core modifications for any WordPress theme, and by isolating these mods in a separate stylesheet, you'll be better able to track the changes that you make and their associated effects. Best of all, when the theme's designer releases a new version, you won't have to go back through and make all your changes anew. Plus, this is *definitely* the smartest way to scale out sites if you find yourself using one or two theme frameworks consistently. Instructions: Modifying existing theme styles to your liking is a breeze with this handy stylesheet. In order to turn on the CSS styles that you define here, you'll need to append the tag (usually found within the header.php file) with a CSS class called "custom". Thanks to this, you now have the ability to override ANY style that's declared in the theme's original stylesheet. In practice, you simply need to copy the CSS for the element that you want to change (from style.css) and then paste it here. Prefix the new CSS declaration with .custom, and then make your tweaks as necessary. Here's an example: To change the default color of the tag (let's say you want to make them a cherry red [#c00]) and to remove the default underline, this is what you would do: .custom a { color: #c00; text-decoration: none; } Oh, but remember, none of these changes will work unless you call custom.css from wihtin your header file! Cool? Now get to hackin! *************** INSTRUCTIONS *********************** Modify your theme’s header.php file Open up your desired theme’s header.php file and insert the following code between the tags: Next, while still inside the header.php file, locate the tag and append it with a CSS class called custom. Once you’ve done that, your resulting tag should look something like this: After that, save the header.php file and upload it to your server. */ @import url("css/menu.css"); /* --------------- Blockquote */ blockquote { color: #18486d; font-size: .9em; text-indent: -0em; padding: 10px 15px 0 15px; margin: 0 0 1em 0; border-top: double #e3e0e0; border-bottom: double #e3e0e0; } /* Pullquotes -------------------------------------------------------------- */ blockquote.left { margin-left: 0; margin-right: 20px; text-align: right; width: 33%; } blockquote.right { margin-left: 20px; margin-right: 0; text-align: left; width: 33%; } .pullquote { color: #0f4b9d; font-family: Georgia, serif; font-size: 1em; font-style: italic; float: left; width: 200px; display: block; padding: 12px 10px 14px 10px; margin: 5px 20px 0px 0px; border-top: double #5089d8; border-bottom: double #5089d8; } /* =WP STANDARD IMAGE CLASS STYLING -- Uploading with MEDIA via Admin ----------------------------------------------------------------------------------------------------*/ .alignright, img.alignright { float:right; display: inline; margin: 0px 0px 20px 20px; overflow: hidden; /* Expanding box issue. Floats w/ set widths sitting next to each other, If image or long text string is longer than width, layout breaks in IE6 */ } .alignleft, img.alignleft { float:left; display: inline; margin: 0px 20px 20px 0px; overflow: hidden; /* Expanding box issue. Floats w/ set widths sitting next to each other, If image or long text string is longer than width, layout breaks in IE6 */ } .aligncenter, img.aligncenter { clear: both; display: block; margin-top: 0px; margin-right: auto; margin-bottom: 1em; margin-left: auto; max-width: 550px; } /*---:[ image captioning ]:---*/ .wp-caption { border-style: solid; border-color: #efeded; background-color: #f8f8f8; text-align: center; } .wp-caption.alignleft { float: left; } .wp-caption.alignright { float: right; } .wp-caption.aligncenter { margin-right:auto; margin-left:auto; float:none; margin-bottom:1em; clear:both; } .wp-caption.alignnone { clear: both; } .wp-caption-text { color: #333; font-size: .7em; line-height: .9em; text-align: center; margin: 0; padding: 10px 20px 10px 20px; } .wp-caption-text p { /* Override global P style text-align left */ text-align: center; line-height: .9em; } p.alert { background: #ffffcd; border: 1px solid #e5e597; padding: 10px; } p.note { background: #f5f5f5; border: 1px solid #ddd; padding: 10px; } div.note { background: #f5f5f5; border: 1px solid #ddd; padding: 10px;margin-bottom:15px; } .box { background: #f5f5f5; border: 1px solid #ddd; padding: 10px; margin: 0 0 10px 0; } /* LINE 242 */ #breadcrumbs { font-family: arial, sans-serif; font-size: 1.0em; color: #9F1D20; margin-bottom:10px; } #addthis { float:right; width:auto; height:18px; margin: 0 0 5px 0; padding: 0 0 10px 0; } #addthis a { color: #ccced3; color: #e25b25; font-size: .8em; line-height: 18px; } #addthis a:hover { color: #e25b25; color: #333; } hr { display: none; } div.hr { height: 1px; margin: 15px 0 15px 0; background-image: url(images/dotted-line-h.gif); background-position: left top; background-repeat: repeat-x; } /********************* TABLES *********************************************/ table { table-layout:fixed; /* Sets width of table as specified */ word-wrap: break-word; /* Specified in the CSS3 Text Effects Module Forces the browser to break words as necessary to prevent overflow Only works in IE/Win, Safari, and Shiira*/ overflow: hidden; /* For the browsers that don’t support word-wrap -- Hides additional text */ } table { font-size: .8em; border-collapse: collapse; border-left: 1px solid #ccc; border-top: 1px solid #ccc; width: 100%; margin-bottom: 1.5em; } table caption { text-transform: uppercase; font-weight: bold; letter-spacing: 1px; text-align: center; padding: 5px; background: #2b4d91; border: 1px solid #2b4d91; color: #FFF; } table tr th, table tr td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; line-height: 1.2em; vertical-align: middle; padding: 8px } table tr th.name { padding-left: 10px; padding-right: 10px; } td.checkmark { background-image: url(images/icn-greencheck.gif); background-repeat: no-repeat; background-position: 50px 10px; } td.checkmark { /* ----- DISPLAYS BG CHECK ----- */ background-image: url(images/icn-tick_16.png); background-repeat: no-repeat; background-position: 50% 10px; } td.xmark { /* ----- DISPLAYS BG X ----- */ background-image: url(images/icn-delete_16.png); background-repeat: no-repeat; background-position: 50% 10px; } table tr.odd th, table tr.odd td { background: #f7f7f7; } table th.price { text-align: left; padding: 0 0 0 15px; } table td { text-align: center; } /* =TABLE HEAD --------- */ thead tr th { color: #333333; font-size: .8em; letter-spacing: 1px; text-transform: uppercase; padding: 10px; text-align: center; } /*---:[ header styles ]:---*/ .small { font-size: 80%;} #masthead { width: 1000px; height: 140px; background: url('images/header_2.gif') no-repeat; /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ } #masthead a { display: none; width: 1000px; height: 140px; } /* uncomment this line if you use a graphic in the header - make sure the height of your header graphic is equal to the height declared in this line of code! */ /* Changed to DISPLAY NONE to hide header link */ #header_img { margin: 0 0 10px 0; border-bottom: none; float: left; clear: both; } h1, h2, h3, h4 { font-family: Helvetica, Arial, sans-serif; font-style: normal; } h1 { font-size: 2.5em; margin: 0 0 15px 0; } h1 a { color: #000; text-decoration: none; } h1 a:visited { color: #666; text-decoration: none; } h1 a:hover { color: #0060FF; text-decoration: none; } h2 { font-size: 1.5em; } h2 a { color: #000; text-decoration: none; } h2 a:visited { color: #666; text-decoration: none; } h2 a:hover { color: #666; text-decoration: none; } .posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; } .pages h2, h2.page_header { margin: 0 0 0 0; padding: 0 0 0 0; background: none; } h3 { font-size: 1.3em; } .entry h3.related { color:#888; margin: 0 0 0.2em 0; } h4 { font-size: 1.1em; font-color: #000; } h4 a, h4 a:visited { color: #666; text-decoration: none; } h4 a:hover { color: #666; text-decoration: underline; } .posts h4 { margin: 0 0 15px 0; padding: 0; background: none; } .pages h4 { font-size: 1.2em; line-height: 1.6em; margin: 0; padding: 0; background: none; } .entry { font-size: 1.6em; line-height: 1.85em; } /* 369 */ .tagged { color: #888; font-size: .9em; line-height: 1.2em; margin: 1em 0 1em 0; padding: 0.4em 0 0 0; border-top: 1px dotted #888; background: none; clear: both; } .tagged a, .tagged a:visited { padding: 3px; color: #888; text-decoration: none; } .tagged a:hover { color: #fff; background: #333; text-decoration: none; } .clear { clear: both; }