/* File: custom.css Description: Custom styles for Thesis BASIC USAGE: If you have enabled the custom stylesheet in the Thesis options panel, the tag will be appended with the "custom" class, like so: . You can use the "custom" class to override *any* CSS declarations contained in the style.css file. For example, if you wish to change the default link color to green, you would add the following declarations to this file: .custom a, .custom a:visited { color: #090; } <--- This makes links green .custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them WHY THIS WORKS: By using the "custom" class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered! More information about styling your Thesis installation using this file can be found in the User's Guide: http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/ */ /* menu nav reset */ /* RLN: 3/27/10 : upgraded to Thesis 1.7b3; upgrading from 1.5.1 caused the ul#tabs to go away and be replaced by .menu in CSS; read notes in thesis website */ /* I moved these to the top to reset the nav menu items before anything else */ .custom .menu { border-bottom:none; border-left:none;} .custom .menu li { margin-bottom:0; border:none; background:none;} .custom .menu li.current_page_item, .custom .menu li.current-cat { padding-bottom:0; background:none;} .custom .menu li.rss {} .custom .menu li a {} .custom .menu li a:hover { text-decoration:none;} .custom .menu li.current_page_item a, .custom .menu li.current-cat a {} /* end of nav reset */ body.custom { background-color: #000000; margin: 1em auto; } /* rln: With the full-width option, it does away with the container div. This allows us to style the replacement divs, #header-area, #content_area & footer_area. If we style them the same as we would have the container div, then the site will look as if it had a container div. So, it could be a matter of putting padding on certain divs to create the green/red borders while with other divs, it may take a border and no padding. */ .custom #header_area .page { background-color: #b90000; /* rln: this makes red area */ padding: .5em .5em 0; /* rln: this makes red border on top and two sides */ border: 0; margin: 0 auto; } .custom #header { height: 191px; width: 925px; background-color: #5d7b52; /* rln: this creates green area around header */ padding: .2em .5em 0; /* rln: this creates green borders */ margin: 0 auto; border: 0; overflow: hidden; /* rln: had to add this for IE6 */ } .custom #content_area .page { background-color: #b90000; /* rln: this makes red area */ padding: 0 .5em .5em; /* rln: this makes red border on bottom and two sides */ } /* these might be the menu colors */ .custom .menu { background-color: #000000; border: none; border-left: .5em solid #5d7b52; border-right: .5em solid #5d7b52; margin: 0 auto; text-align: center; width: 925px; height: 1.8em; overflow: hidden; } /*---:[ nav menu styles ]:---*/ .custom .menu li { background: Black; border: none; padding: 3px 0; margin: 0px auto; display: inline; font-weight: bold; } .custom .menu a { background-color: #000000; border: none; padding: 3px 7px 3px; margin: 0px auto; display: inline; color: #b90000; text-transform: none; letter-spacing: 1px; line-height: 1.15em; } .custom .menu a:hover { border: none; padding: 3px 7px 3px; margin: 0px auto; color: Black; background-color: #b90000; text-decoration: none; } .custom .menu .current a, .custom .menu .current a:hover, .custom .menu .current-cat a, .custom .menu .current-cat a:hover { background: #5d7b52; border: 0; padding: 3px 6px 3px; margin: 0px auto; color: #000000; border-bottom: 0; } .custom .menu li.rss { /* rln: only needed if you leave the 'subscribe' link in the nav menu bar */ padding-right: 0; background: none; border: none; float: right; display: none; } .custom .menu li.rss a { /* rln: only needed if you leave the 'subscribe' link in the nav menu bar */ padding-right: 16px; display: none; } /* end list of menu colors */ /* rln: from here on, it was pretty much 'hit & miss'. I ended up having to force the widths on the divs rather than letting the 'design-options' do it. I think it probably best to come up with a width and a design without any header image to begin with. After getting all the divs as you want, then create the header banner from the size remaining. The 'torn' edges around the nav menu was problematic. I could not think of a way to 'tear' the borders. */ .custom #content_box { background: #fffae3 url('images/header_lower.png') no-repeat top center; padding: 0 .5em .5em; width: 97.87%; border: .5em solid #5d7b52; border-top: none; } .custom #column_wrap { /* rln: this wraps left sidebar and content */ background: none; width: 72em; height: 100%; } .custom #content { background-color: #fffae3; margin-top: 16px; height: 100%; width: 52.5em; } .custom .content h2 { /* rln: notice there is an id and a class named content. Important to keep separate in your mind */ color: #b90000; font-weight: normal; } .custom .post_box { /* rln: this was to help clear the content box of the background image at the top of the content_box */ margin: 1.3em; padding: 0; } .custom #sidebars { /* rln: this is sidebar area on right side of content */ padding: 0; margin: 0; width: 19.4em; } .custom #sidebar_1 { /* rln: wrapped by #column_wrap */ background-color: #fffae3; margin-top: 16px; width: 19.4em; } .custom #sidebar_2 { /* rln: in #sidebars */ background-color: #fffae3; margin-top: 16px; width: 19.4em; } .custom li.widget ul li { margin-bottom: .2em; /* rln: this reduced spacing between titles in sidebars */ } /* rln: this is for the RSS in the sidebar */ .custom li.widget abbr { font-size: 1em; } .custom li.widget abbr img { margin-bottom: -2px; } .custom .sidebar h3 { color: Black; text-transform: none; } .custom .teaser h2 { color: #b90000; font-weight: bold; } .custom #footer_area .page { background-color: #000000; /* rln: by making this black and no padding, there is no red/green borders */ } .custom #footer { background-color: #000000; border: none; }