/* 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! */ body { border: none; margin: 0px; padding: 0px; // background: url('./images/bg.jpg'); } /* Hide the footer */ div#footer { display: none; } /* Hide the header */ span.custom div#header { display:none; } /* Compensate the hidden footer with some margin for the navigation bar */ div.navigation { margin-bottom: 30px; } /* Margin at the top, so won't start right at the top. We do this for both the sidebar and the content */ span.custom div#wrapper div#container, span.custom div#wrapper div#primary { margin-top:20px; } span.custom div#wrapper { background: #fff; max-width: 1024px; } span.custom div.sidebar { width: 260px; margin-left: 10px; } span.custom div#header { margin: 0px; padding: 3px; } span.custom div#secondary.sidebar { display: none; } span.custom div#header h1 a,span.custom div#header h1 a:link,span.custom div#header h1 a:visited { border-bottom: 0px; } span.custom div.sidebar a:hover { color: #c30; } span.custom div#content img { float: left; margin: 5px; } /* Cancel float and center centered images */ span.custom div#content img.aligncenter.size-full { float: none; margin-left: auto; margin-right: auto; display: block; } /* Display flash objects and such at the center */ span.custom div#content object { float: none; margin-left: auto; margin-right: auto; display: block; } /* Override general object settings for flash player*/ span.custom div#content object.audioplayer { float: none; display: block; margin-left: 5px; margin-rught: none; } span.custom div#content div.entry-meta { clear: both; } span.custom div.sidebar ul li a:hover,span.custom div.sidebar ul li.current_page_item li.page_item a:hover,span.custom div.sidebar ul li.current-cat ul.children li a:hover { background: none; } span.custom div#content { margin-right: 25px; } span.custom div.post_comments { clear: both; } .home span.custom div#content div.entry-meta a.post_comments_link img, .archive span.custom div#content div.entry-meta a.post_comments_link img { background: #fff; float: none; vertical-align: middle; } .home span.custom div#content div.entry-meta a.post_comments_link img { text-decoration: none; } body span.custom div#content div.hentry { margin-bottom: 40px; } span.custom div#content div.tags { margin-top: 5px; } /**************************** * Credit ****************************/ span.custom div#content div.entry-content div.credit { font-size:80%; color: #aaa; } span.custom div#content div.entry-content div.credit a { color: #B0B4DE; } span.custom li#sideblog- div.credit { display: none; } span.custom div.entry-header { margin-bottom: 5px; } /**************************** * Photo Strip style ****************************/ span.custom div#content div.photosStrip { display: block; text-align : center; } span.custom div#content div.photosStrip img { padding: 0.2em; float: none; vertical-align: middle; border: 1px dotted #BBBBBB; margin: 5px; } /**************************** * Centered Image in posts ****************************/ span.custom div#content img.centered { clear: both; float: none; display: block; margin-left: auto; margin-right: auto; } /**************************** * SideBlog ****************************/ span.custom li#sideblog li { border-bottom: thin dotted gray; } /**************************** * Header menu ****************************/ span.custom div#header_menu { float: right; } span.custom div#header_menu a, span.custom div#header_menu a:active, span.custom div#header_menu a:link, span.custom div#header_menu a:visited { background: #059; color: #fff; text-decoration: none; border-bottom: none; text-transform: uppercase; padding: 1px; margin: 0 10px 0 0; } span.custom div#header_menu a:hover { background: #0099CC; } /**************************** * Category cloud widget ****************************/ span.custom #category-cloud a { background: none; margin: 7px; } /**************************** * Ajax search form ****************************/ span.custom div.sidebar ul li form#searchform input#searchbutton { border: none; } span.custom div.sidebar ul li form#searchform input#s { border: 1px solid #bbb; width: 220px; height:22px; font-size: 18px; } span.custom div#search-results div#current-search-results .more{ font-weight: bold; font-size: 80%; border: none; } span.custom div#search-results div#current-search-results { background: #EAEAEA; } span.custom div#search-results div#current-search-results a{ background: none; } span.custom div#search-results div#current-search-results ul li { border-bottom: thin dotted gray; } span.custom div#search_x_button { display: none; } span.custom div#search_x_button a:hover { border-bottom: none; } span.custom li#search form#searchform { margin: 0.1em 0; padding: 0; } /**************************** * Extended Live Archives Customization ****************************/ span.custom #af-ela-menu li.selected { background: #059; color: #fff; } span.custom #af-ela-year li.selected, span.custom #af-ela-month li.selected, span.custom #af-ela-category li.selected, span.custom #af-ela-post-chrono li.selected, span.custom #af-ela-post-cats li.selected, span.custom #af-ela-post-tags li.selected, span.custom #af-ela-post-chrono li:hover, span.custom #af-ela-post-cats li:hover, span.custom #af-ela-post-tags li:hover{ background: #059 !important; border-top: 1px solid #95b9c7 !important; border-bottom: 1px solid #95b9c7 !important; padding-top: 0; padding-bottom: 0; color: #fff; } span.custom #af-ela-post-tags li:hover a, span.custom #af-ela-post-chrono li:hover a, span.custom #af-ela-post-cats li:hover a { color: #fff; } span.custom #af-ela-tag li.selected { background: #fc0; } span.custom #af-ela-tag { text-align: center; } span.custom #af-ela-tag li:hover { background: #ccc; } span.custom #af-ela-post-prev:hover, span.custom #af-ela-post-next:hover { background: #059 !important; border-top: 1px solid #95b9c7 !important; border-bottom: 1px solid #95b9c7 !important; padding-top: 0; padding-bottom: 0; color: #fff; } /**************************** * Share-This Style ****************************/ span.custom div#content div.entry-content div.akst_share_link_single_post { padding: 5px 0 5px 0; display: block; clear: both; float: right; } /**************************** * AJAXed Wordpress Corrections ****************************/ div#wrapper div#container div#content div.entry-meta a.comments_link img { float: none; }