/* custom.css � custom styles for Cutline that YOU define ------------------------------------------------------ Need to fix top navbar so it's just one row. change 336699 border to green? Green 008000 not sure Gold ffdb43 side widgets so borders are equal - need to have some white space inbetween each one change dates so they are different color - but the second layer bullets in italic but same color??? Get is so there are different link treatments for widgets Make page background patterned after the flyer BJ made Chekc the blockquote deal... Add padding to the widget column Improve the very top navigation. background-image: url(http://www.hightechhigh.org/images/bg.jpg); background-repeat: repeat; This stylesheet will allow you to futureproof your changes against future releases and upgrades. I know you work hard on your modified styles, and I don't want you to feel like every upgrade is a total drag! Instructions: Modifying existing Cutline styles to your liking is a breeze with this handy stylesheet. The tag within the header.php file has been appended with a CSS class called "custom," and thanks to this, you now have the ability to override ANY style that's declared in the original Cutline 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 unvisited links from blue to red (#c00) and remove the default underline, this is what you would do: .custom a { color: #c00; text-decoration: none; } Cool? Now get to hackin! Additional notes: go to header.php file and put this in the head tag Then fine body class and put this. */ body.custom { /*background-color: #ffdb43; */background-image: url(http://sdcue.org/wp-content/uploads/2009/09/goldwhitebackground.gif); background-repeat: repeat; color: #333; font: 62.5% arial, helvetica, sans-serif; text-align: center; } * { padding: 0; margin: 0; } /* LINKS - scoop only had underline on hover - scoop had same color for visited and hover - added a img from scoop - not sure why it's needed - these appear to be the body links not the sidebar ones visited was 6d5fb3 */ .custom a { color: #000000; text-decoration: underline; } .custom a:visited { color: #000000; text-decoration: underline; } .custom a:hover { color: #ffffff; text-decoration: underline; background-color: #cccccc; } .custom a img { border: none; } /*This make the second line of the header with white - doesn't see to do anything when default header is not used */ .custom #container { background: #ffffff; width: 770px; margin: 15px auto 0 auto; } /*this changed the rest of the stuff under the header - in the columns to white - not sure if it does anything when not default header */ .custom #content_box { background: #fff; width: 770px; text-align: left; border-left: 2px solid #ffdb43; border-right: 2px solid #ffdb43; float: left; clear: both; } /* this isn't needed I think if there is no masthead - */ #masthead { background-color:#fff; } .custom blockquote { font-style: italic; font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif; color: #555; margin: 0 30px 1.5em 30px; padding: 0 0 0 10px; border-left: 1px solid #f0f8ff; } /*this changed the footer to white - working to get it to center text - check to see if 1 px instead of 2 or 3 and color ffdb43 instead of ccc - makes it look better border-top: 1px solid #ffdb43; */ .custom #footer { background: #ffffff; width: 770px; padding: 1.2em 0 0 0; border-top: 1px solid #ffdb43; border-left: 2px solid #ffdb43; border-right: 2px solid #ffdb43; border-bottom: 4px solid #ffdb43; float: left; clear: both; } /* This worked when background was white - this needed to center the footer text - added .custom in front */ .custom #footer p { margin: 0 0 0.923em 0; font-size: 1.3em; color: #888; text-align: center; } /*This changes the sidebar not already defined to white - change width for non-white background was margin: 10px 6px 0 10px; trying to tighten the boxes */ .custom #sidebar { /* background: #ffffff; */ width: 190px; margin: 10px 10px 0 10px; float: left; } /* this changed only the items in the horizontal menu to white background - trying to center the menu text-align: center; */ .custom ul#nav li { background: #ffffff; padding: 0.85em 40px 0.7em 0; font: bold 1.4em Helvetica, Arial, sans-serif; text-transform: none; float: left; } /* this changed the rest of the stuff in the horizontal menu to white took away the black line and made it white - adding border-bottom: 1px solid #ffdb43; stuff to finish it like the FOOTER */ .custom ul#nav { list-style: none; width: 750px; margin: 0 0 0 0; padding: 0 0 10 0 ; background: #fff; border-right: 2px solid #ffdb43; border-left: 2px solid #ffdb43; border-top: 1px solid #ffdb43; border-bottom: 3px solid #fff; border-bottom: 1px solid #ffdb43; float: left; clear: both; } /* changing the width of the border to see if it tightens the sidebar boxes - it was 7 - background-color: #6d5fb3; font-size: 1.077em;*/ .custom li.widget h2, li.linkcat h2 { color: #008000; font-weight: bold; font-size: 1.099em; text-transform: none; letter-spacing: normal; margin: 0 0 0 0; padding: 0 0 0 8px; border-top: 1px solid #000000; border-right: 1px solid #ffdb43; background-image: url(http://sdcue.org/wp-content/uploads/2009/09/goldwhitebackground.gif); background-repeat: repeat; border-top: 1px solid #ffdb43; } /* this was okay when background was white .custom ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 230px; margin: 0 0 0 0; font-size: 1.3em; line-height: 1.4em; float: left; }*/ /*hopefully this fixes the sidebar stuff showing on the background - background color controls the body parts of the widgets - margin: 0 0 2.5em 0; line-height: 1.4em; */ .custom ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 190px; margin: 0 0 0 0; font-size: 1.3em; line-height: 1.1em; float: left; background-color: #F0FFFF; border-left: 2px solid #fffff; border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-bottom: 5px solid #ffffff; } /* this changed the wider column to white*/ .custom #content { background: #ffffff; width: 500px; margin: 10px 0 0 18px; float: left; } /* this makes the colored space between the photo and the blog part go away - in it's place a 10 px white border makes it have some space - think this is cheating - there has to be another way - if there is no header image then ? not sure what it does */ .custom #header_img { position: relative; margin: 0 0 0 0; border-left: 2px solid #ffdb43; border-right: 2px solid #ffdb43; border-bottom: 1px solid #fff; float: left; clear: both; } /* adds colored line at top of the page */ .custom #masthead h1 { padding: 0.4em 0 0.2em 0; border-top: 4px solid #ffdb43; text-align: center; clear: both; } .custom #masthead { width: 770px; height: 100px; border-bottom: 2px solid #ffdb43; border-top: 2px solid #ffdb43; border-left: 2px solid #ffdb43; border-right: 2px solid #ffdb43; /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ } /* .custom #masthead a { display: block; background: #ffffff; width: 770px; height: 100px; } /*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! */ .custom .posts h2 { color:#008000; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:2.1em; font-weight:bold; letter-spacing:-0.05em; margin-top:10px; text-transform:capitalize; margin: 0 0 0.75em 0; line-height: 1.2em; } .custom .pages h2, h2.page_header { color:#008000; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:2.1em; font-weight:bold; letter-spacing:-0.05em; margin-top:10px; text-transform:capitalize; margin: 0 0 0.75em 0; padding: 0 0 0.6em 0; } .custom .posts h4 { margin: 0 0 1.25em 0; padding: 0 0 1.0em 0; } /* Tightens up the lines */ .custom .entry ul { line-height: 1.1em; list-style-type: square; } .custom .entry ol { line-height: 1.1em; } .custom .entry p { line-height: 1.4em; margin: 0 0 .7em 0; } .custom li.widget ul, li.linkcat ul { line-height: 1em; list-style: square; margin: 0 0 0.5em 20px; } /*---:[ search form styles - was .custom li.widget .search_input { font-size: 1.1em !important; } AND was .custom #search_form .search_input { width: 183px; changes the color of type and borders ]:---*/ .custom #search_form { } .custom #search_form .search_input { width: 183px; padding: 3px; background-color: #ffffff; color: #000000; font: normal .1em arial, helvetica, sans-serif;; border-top: 1px solid #cccccc; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; } .custom li.widget .search_input { font-size: .9em !important; } .custom #search_form .search_input:focus { border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 2px solid #999; } .entry blockquote { font-size: 1.0em; font-family: Helvetica, Arial, sans-serif; background: #F0E68C } .entry blockquote.right { width: 150px; font-style: normal !important; font-size: 1em !important; margin: 0.3em 0 0.3em 15px !important; padding: 0.3em 0 !important; border: 5px solid #F0E68C; border-width: 4px 4px 4px 4px; text-align: center; float: right; } .entry blockquote.left { width: 150px; font-style: normal !important; font-size: 1em !important; margin: 0.3em 15px 0.3em 0 !important; padding: 0.3em 0 !important; border: 5px solid #F0E68C; border-width: 4px 4px 4px 4px; text-align: center; float: left; } .entry blockquote a:hover { color: #ffffff; background: #DAA520; } /* CutlineNegative - custom.css file for Cutline 1.1 ------------------------------------------------------ This is a replacement custom.css file for your Cutline theme which will provide a grey-on-black site instead of black-on-white. Download this file or the full replacement theme at: http://bitfreedom.com/cutlinenegative License: this file is licensed under the same as Cutline it was derived from: http://creativecommons.org/licenses/by-sa/2.5/ body { background: #000; color: #aaa; font: 62.5% Georgia, "Times New Roman", Times, serif; text-align: center; } a:visited { color: #48c; text-decoration: underline; } h1, h2, h3 { font-weight: bold; font-family: Helvetica, Arial, sans-serif; color: #fff; } h1 a, h1 a:visited, h1 a:hover { color: #fff; text-decoration: none; } h2 a { color: #fff; text-decoration: none; } h2.archive_head { font-weight: bold !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 3px solid #fff !important; background: url('images/hr_dot_black.gif') 0 100% repeat-x !important; } #sidebar { width: 230px; float: left; background: #000; z-index: 10;} ul#nav { list-style: none; width: 750px; padding: 0 10px; background: url('images/hr_dot_black.gif') repeat-x; border-bottom: 3px solid #fff; float: left; clear: both; } ul#nav li a, ul#nav li a:visited { color: #fff; text-decoration: none; } ul#nav li a:hover { color: #fff; text-decoration: underline; } #header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #fff; float: left; clear: both; } li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #fff; background: url('images/hr_dot_black.gif') 0 100% repeat-x; } #search_form .search_input:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } #footer a, #footer a:visited { color: #fff; text-decoration: none; } #footer a:hover { color: #a8f; text-decoration: none; } */