Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding a dark background to the left/rigth of the content area

    I'm somewhat of a CSS newbie, so please forgive me if this question seems rudimentary. I'm running a Wordpress blog with the Copyblogger theme and I'm trying to add a dark grey border to the left and right of the main content area and sidebars.

    Here's my site.

    And this is what I'm trying to accomplish.

    I can paste whatever code is necessary for someone to check out. Please let me know!

    Thanks in advance,
    David

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    There's a div called "container" which you could use to add borders to the sides of it.

    Add this to your css:

    Code:
    #container {
      border-left: 20px solid #333;
      border-right: 20px solid #333;
      }
    That can be added by going to your Wordpress -> Presentation -> Theme Editor -> Style.css file in the admin interface.

    You can change the thickness of the border by changing the "20px" value to something else, and the color by changing the "#333" to either a 6-digit hexadecimal RGB equivalent or a CSS color keyword (such as "black" or "cyan").

    If you want all of the background to be dark you'd instead add a "background-color: #333" to the "body" style in the css file, and you may also need to set the "background-color: #fff" on #containter if the black shows through everywhere.
    Last edited by vtjustinb; 11-02-2007 at 03:34 PM.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vtjustinb View Post
    There's a div called "container" which you could use to add borders to the sides of it.

    Add this to your css:

    Code:
    #container {
      border-left: 20px solid #333;
      border-right: 20px solid #333;
      }
    That can be added by going to your Wordpress -> Presentation -> Theme Editor -> Style.css file in the admin interface.

    You can change the thickness of the border by changing the "20px" value to something else, and the color by changing the "#333" to either a 6-digit hexadecimal RGB equivalent or a CSS color keyword (such as "black" or "cyan").

    If you want all of the background to be dark you'd instead add a "background-color: #333" to the "body" style in the css file, and you may also need to set the "background-color: #fff" on #containter if the black shows through everywhere.
    Thank you for the response! I tried what you suggested. It added a border to the left and right of the sidebars, however the background was still white on the outside of the border. Changing the background for the entire site (background-color) works but the header background changes as well, which leaves the content area looking a little odd

    Is it possible to add special declarations to put the entire site within another container, or something? Here's the code for the main CSS file, if that helps!


    Code:
    body { background: #fff; color: #222; font: 62.5% Verdana, sans-serif; }
    
    * { padding: 0; margin: 0; }
    
    
    /*---:[ global typography elements ]:---*/
    
    a { color: #777; text-decoration: none; }
    
    a:visited { color: #777; text-decoration: none; }
    
    a:hover { color: #009933; text-decoration: none; }
    	
    a img { border: none; }
    	
    blockquote { margin: 0 0 1.5385em 1.5em; padding: 0 0 0 0.7692em; font-family: Georgia, "Times New Roman", Times, serif; color: #555; border-left: 0.2308em solid #009933; }
    
    abbr, acronym { font-size: 0.8462em; line-height: 1.0em; border-bottom: 1px dotted #999; text-transform: uppercase; letter-spacing: 1px; cursor: help; }
    
    code { color: #090; font-family: Courier, "Courier New", monospace; line-height: 1.0em; }
    
    pre { margin: 0 0 1.5385em 0; padding: 0.7692em; font-size: 1.3em; overflow: auto; background: #ececec; }
    
    p.unstyled { font-size: 1.3em; }
    
    p.center { text-align: center; }
    
    
    /*---:[ these styles apply to the flickrRSS plugin, which is not yet fully supported ]:---*/
    
    .flickr_blue { color: #007ae4; text-transform: lowercase; }
    
    .flickr_pink { color: #ff2a96; text-transform: lowercase; }
    
    
    /*---:[ headlines ]:---*/
    
    h1, h2, h3, h4 { font: 1.0em "Helvetica Neue", Helvetica, Arial, sans-serif; }
    	
    h1, h2 { font-size: 3.4em; line-height: 1.4286em; letter-spacing: 0px; color: #009933; }
    
    	h2 a, h2 a:visited { color: #009933; }
    	
    	h2 a:hover { color: #575757; }
    	
    	.page h1 { margin: 0 0 0.6071em 0; border-bottom: 0.10714em solid #ccc; }
    	
    	.archive h1 { font-size: 2.4em; line-height: 1.66667em; margin: 0 0 1.66667em 0; color: #575757; }
    	
    	#sidebar h2 { font-size: 2.0em; line-height: 1.5556em; margin: 0 0 0.5em 0; border-bottom: 3px solid #ccc; color: #575757; }
    	
    h3 { font-size: 1.3846em; line-height: 1.1111em; color: #575757; }
    
    	.entry h3 { margin: 1.6667em 0 0.5556em 0; }
    	
    	#comments h3 { font-size: 1.8em; }
    	
    	#comments h3.comment_intro { margin: 0 0 1.11111em 0; padding: 2.05556em 0 0 0; border-top: 0.166667em solid #ccc; }
    
    	#comments h3#respond { margin: 2.2222em 0 0 0; }
    	
    h4 { font-size: 1.1538em; line-height: 1.3333em; color: #575757; }
    
    
    /*---:[ core layout elements ]:---*/
    
    #container { width: 72.8em; margin: 0 auto; }
    	
    	#content_box { width: 72.8em; margin: 0 auto; }
    	
    		#content { width: 46.8em; padding: 0 6em 0 0; float: left; }
    		
    		#sidebar { width: 20em; float: left; }
    		
    .custom #header { background: url('images/header.png') top center no-repeat; height: 445px; width: 100%; text-align: center; margin: 0; }
    
    .custom #footer { background: url('images/footer.png') bottom center no-repeat; height: 360px; width: 100%; text-align: center; margin: 0; }
    
    
    /*---:[ #header styles ]:---*/
    
    /* #logo { width: 72.8em; margin: 0 auto; }
    	
    	#logo a { font: normal 5.0em "American Typewriter", "Trebuchet MS", Verdana, sans-serif; color: #fff; }
    		
    	#logo h1, #logo #tagline { display: none; font: normal 1.6em "Helvetica Neue", Helvetica, Arial, sans-serif; } */
    
    
    /*---:[ nav menu styles ]:---*/
    
    #nav { width: 72.8em; margin: 0 0 50px 0; }
    
    	#nav ul { list-style: none; }
    
    		#nav ul li { font-size: 2.0em; float: left; }
    	
    			#nav ul li a, #nav ul li a:visited { display: block; padding: 0.3125em 0.8125em 0.5em 0.8125em; color: #009933; }
    	
    			#nav ul li a:hover, #nav ul li a.current:hover { color: #fff !important; background: #009933; text-decoration: none !important; }
    		
    			#nav ul li a.current, #nav ul li a.current:visited { color: #009933; text-decoration: underline; }
    
    
    /*---:[ content styles ]:---*/
    
    .post_date { font-size: 1.3em; line-height: 1.5455em; margin: 0 0 1.8182em 0; color: #aaa; border-bottom: 3px solid #ccc; }
    
    	.post_date a, .post_date a:visited { color: #575757; padding: 0.0909em; }
    	
    	.post_date a:hover { color: #575757; background: #009933; }
    
    .entry { font-size: 1.3em; line-height: 1.5385em; }
    	
    	.entry a, .entry a:visited { padding: 1px 0; border-bottom: 1px solid #bbb; }
    	
    	.entry a:hover { padding: 1px 0; color: #fff; background: #009933; border-bottom: none; }
    	
    	.entry p { margin: 0 0 1.5385em 0; }
    
    	.entry ul, .entry ol { margin: 0 0 1.5385em 3.0em; }
    	
    	.entry ul { list-style-type: disc; }
    	
    		.entry li { }
    		
    			.entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol { margin: 0 0 0 1.5em; }
    	
    	.entry dl { margin: 0 0 1.5385em 0; }
    			
    		.entry dt { font-weight: bold; }
    		
    		.entry dd { margin: 0 0 0 1.5em; }
    		
    	.entry sup, .entry sub { line-height: 1.0em; }
    		
    	.entry blockquote.right, .entry blockquote.left { width: 13.6875em; padding: 0.4375em 0; font-size: 1.2308em; line-height: 1.25em; border: 0.0625em solid #ccc; border-width: 0.0625em 0; text-align: center; }
    	
    	.entry blockquote.right { margin: 0 0 0 0.9375em; float: right; clear: right; }
    	
    	.entry blockquote.left { margin: 0 0.9375em 0 0; float: left; clear: left; }
    
    		.entry blockquote.right p, .entry blockquote.left p { margin: 0 !important; }
    		
    	.entry .ad { margin: 0 0 0 1.1538em; float: right; clear: right; }
    	
    		.entry .ad_left { margin: 0 1.1538em 0 0; float: left; clear: left; }
    
    	.entry img { }
    
    	.entry img.left { margin: 0 1.1538em 0 0; float: left; clear: left; }
    	
    	.entry img.right { margin: 0 0 0 1.1538em; float: right; clear: right; }
    	
    	.entry img.center { display: block; margin: 0 auto 1.5385em auto; clear: both; }
    
    	.entry img.frame { padding: 5px; border: 5px solid #009933; }
    	
    	.entry img.stack { clear: none !important; }
    
    .post_meta { margin: 0 0 4.5385em 0; padding: 0.3846em 0 0 0; border-top: 0.23077em solid #ccc; font-size: 1.3em; line-height: 1.0em; clear: both; }
    	
    	.add_comment { float: left; padding: 0 0 0.2em 1.6154em; background: url('images/icon_comment.gif') 0 0 no-repeat; font-weight: none; }
    
    	.post_meta a:hover { color: #575757; border-bottom: 1px solid #009933; }
    
    .page .entry { margin: 0 0 3.0769em 0; border-bottom: 0.23077em solid #ccc; }
    
    .navigation { width: 39em; margin: 0 0 3.3333em 0; font-size: 1.2em; line-height: 1.6667em; }
    	
    	.navigation a:hover { color: #575757; border-bottom: 1px solid #009933; }
    	
    	.next { text-align: right; }
    
    
    /*---:[ sidebar styles ]:---*/
    
    /* #rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }
    
    	#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; } */
    
    ul.sidebar_list { list-style: none; }
    
    	ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; }
    
    		li.widget p { margin: 0 0 1.2em 0; }
    		
    		li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
    		
    			li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
    			 
    /* li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; } */
    					
    			li.widget li a:hover, li.linkcat li a:hover { display: block; padding: 0 0 0 0; color: #fff; background: #009933; width: 100%; }
    
    /* li.widget li a:hover, li.linkcat li a:hover { display: block; padding: 0 0 0 0.2em; color: #fff; background: #009933; width: 100%; } */
    				
    		/*---:[ special widget styles ]:---*/
    		
    		#calendar_wrap { width: 16.3333em; margin: 0 0 0.8333em 0; padding: 0 0.166667em; }
    		
    		table#wp-calendar { width: 16.3333em; border-collapse: collapse; }
    		
    			table#wp-calendar caption { font-weight: bold; line-height: 1.58333em; border-bottom: 0.08333em solid #ccc; }
    		
    			table#wp-calendar th { width: 2.3333em; font-size: 1.0em; line-height: 1.58333em; border-bottom: 0.08333em solid #ccc; color: #666; text-align: center; }
    			
    			table#wp-calendar td { width: 2.3333em; line-height: 1.66667em; color: #999; text-align: center; }
    			
    				table#wp-calendar td a, table#wp-calendar td a:visited { color: #009933; font-weight: bold; }
    				
    				table#wp-calendar td a:hover { text-decoration: underline; }
    				
    			table#wp-calendar td#next, table#wp-calendar td#prev { width: 7.0em; }
    		
    		/*---:[ the following styles are for the flickrRSS plugin, which is not yet fully supported ]:---*/
    		
    		li.widget ul.flickr_stream { list-style: none; margin: 0; padding: 0 10px; }
    		
    			li.widget ul.flickr_stream li { margin: 0; padding: 0 5px 5px 0; display: inline; }
    			
    				li.widget ul.flickr_stream li a img { padding: 3px; }
    				
    				li.widget ul.flickr_stream li a:hover img { background: #ff2a96; border-bottom: none; }
    
    
    /*---:[ footer styles ]:---*/
    
    /* #footer p { font-weight: bold; font-size: 1.0em; text-transform: uppercase; text-align: center; }
    
    #footer a, #footer a:visited { color: #009933; border-bottom: 1px solid #009933; }
    
    #footer a:hover { color: #fff; border-bottom: 1px solid #fff; }
    
    #footer { font-weight: bold; font-size: 1.0em; text-transform: uppercase; text-align: center; color: #009933 } */
    
    
    /*---:[ comment styles ]:---*/
    
    #comments { width: 46.8em; }
    
    	dl#comment_list { margin: 0 0 0 0; }
    		
    		dl#comment_list dt { padding: 0 0 33px 0; background: url('images/comment_top.gif') 0 100% no-repeat; font-size: 1.1em; line-height: 1.8182em; color: #999; }
    		
    		dl#comment_list dt.author { background: url('images/comment_author_top.gif') 0 100% no-repeat; }
    		
    			dl#comment_list dt .comment_num { padding: 0 0.3636em 0 0; }
    			
    				dl#comment_list dt .comment_num a, dl#comment_list dt .comment_num a:visited { color: #999; }
    				
    				dl#comment_list dt .comment_num a:hover { color: #009933; }
    				
    			dl#comment_list dt strong { font-size: 1.4545em; color: #575757; }
    				
    				dl#comment_list dt strong a, dl#comment_list dt strong a:visited { color: #009933; border-bottom: 1px solid #575757; }
    				
    				dl#comment_list dt strong a:hover { color: #009933; border-bottom: 1px solid #009933; }
    		
    		dl#comment_list dd { width: 428px; padding: 0 20px; margin: 0 0 1.5385em; background: #B0FFCA url('images/comment_bottom.gif') 0 100% no-repeat; }
    		
    		dl#comment_list dd.author { background: #FFE3B9 url('images/comment_author_bottom.gif') 0 100% no-repeat; }
    		
    			dl#comment_list dd.entry p, dl#comment_list dd.entry ul, dl#comment_list dd.entry ol, dl#comment_list dd.entry blockquote { margin-bottom: 1.1538em; }
    
    
    /*---:[ comment form styles ]:---*/
    
    #comment_form { width: 46.8em; margin: 0 0 4.0em 0; }
    
    	#comment_form a:hover { text-decoration: underline; }
    
    	#comment_form p { padding: 0.7692em 0; }
    	
    		#comment_form label { padding: 0 0 0 0.83333em; font-size: 1.2em; }
    
    		#comment_form .text_input { width: 15.3846em; padding: 0.23077em; color: #009933; font: bold 1.3em Verdana, sans-serif; border-top: 0.15385em solid #999; border-left: 0.15385em solid #999; border-right: 0.07692em solid #eee; border-bottom: 0.07692em solid #eee; }
    		
    		#comment_form .text_input:focus { border-top-color: #666; border-left-color: #666; border-right-color: #ddd; border-bottom-color: #ddd; }
    		
    		#comment_form .text_area { width: 32.9231em; }
    
    		#comment_form p.subscribe-to-comments { font-size: 1.3em; }
    		
    			#comment_form p.subscribe-to-comments label { font-size: 1.0em; }
    
    		#comment_form .form_submit { padding: 0.5em; background: url('images/submit_bg.gif') repeat-x; color: #575757; border: 0.21429em double #999; border-top-color: #ccc; border-left-color: #ccc; font: bold 1.4em/1.0em "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; }
    		
    		#comment_form .form_submit:hover { color: #009933; }
    
    
    /*---:[ search form styles ]:---*/
    
    #search_form { margin: 0 0 0.5833em 0; }
    
    html[xmlns*=""] body: last-child #search_form { margin: 0 0 0.75em 0; } /* This is a hack for Safari */
    
    	#search_form .search_input { width: 191px; padding: 0.25em; color: #777; font: normal 1.1em Verdana, Arial, Helvetica, sans-serif; border: 0.083333em solid #999; background: #caffdb; }
    	
    	#search_form .search_input:focus { background: #caffdb; }
    	
    	#content .search_input { font-size: 0.9231em !important; }
    
    
    /*---:[ self-clearing floats courtesy of Dan Cederholm at simplebits.com ]:---*/
    
    #header:after, #logo:after, #nav:after, #content_box:after, .page .entry:after, #comments:after, dl#comment_list dd:after, #comment_form:after { display: block; height: 0; content: "."; visibility: hidden; clear: both; }
    
    .diggit {
    float: right;
    }
    
    .related {
    margin: 0px 0px 5px 0px;
    }

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Since it involved a lot of small tweaks I just thought I'd post the whole code:

    Code:
    
    body {
    background:#333333 none repeat scroll 0% 50%;
    color:#222222;
    font-family:Verdana,sans-serif;
    font-size:62.5%;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    }
    * {
    margin:0pt;
    padding:0pt;
    }
    a {
    color:#777777;
    text-decoration:none;
    }
    a:visited {
    color:#777777;
    text-decoration:none;
    }
    a:hover {
    color:#009933;
    text-decoration:none;
    }
    a img {
    border:medium none;
    }
    blockquote {
    border-left:0.2308em solid #009933;
    color:#555555;
    font-family:Georgia,"Times New Roman",Times,serif;
    margin:0pt 0pt 1.5385em 1.5em;
    padding:0pt 0pt 0pt 0.7692em;
    }
    abbr, acronym {
    border-bottom:1px dotted #999999;
    cursor:help;
    font-size:0.8462em;
    letter-spacing:1px;
    line-height:1em;
    text-transform:uppercase;
    }
    code {
    color:#009900;
    font-family:Courier,"Courier New",monospace;
    line-height:1em;
    }
    pre {
    background:#ECECEC none repeat scroll 0%;
    font-size:1.3em;
    margin:0pt 0pt 1.5385em;
    overflow:auto;
    padding:0.7692em;
    }
    p.unstyled {
    font-size:1.3em;
    }
    p.center {
    text-align:center;
    }
    .flickr_blue {
    color:#007AE4;
    text-transform:lowercase;
    }
    .flickr_pink {
    color:#FF2A96;
    text-transform:lowercase;
    }
    h1, h2, h3, h4 {
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:1em;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    }
    h1, h2 {
    color:#009933;
    font-size:3.4em;
    letter-spacing:0px;
    line-height:1.4286em;
    }
    h2 a, h2 a:visited {
    color:#009933;
    }
    h2 a:hover {
    color:#575757;
    }
    .page h1 {
    border-bottom:0.10714em solid #CCCCCC;
    margin:0pt 0pt 0.6071em;
    }
    .archive h1 {
    color:#575757;
    font-size:2.4em;
    line-height:1.66667em;
    margin:0pt 0pt 1.66667em;
    }
    #sidebar h2 {
    border-bottom:3px solid #CCCCCC;
    color:#575757;
    font-size:2em;
    line-height:1.5556em;
    margin:0pt 0pt 0.5em;
    }
    h3 {
    color:#575757;
    font-size:1.3846em;
    line-height:1.1111em;
    }
    .entry h3 {
    margin:1.6667em 0pt 0.5556em;
    }
    #comments h3 {
    font-size:1.8em;
    }
    #comments h3.comment_intro {
    border-top:0.166667em solid #CCCCCC;
    margin:0pt 0pt 1.11111em;
    padding:2.05556em 0pt 0pt;
    }
    #comments h3#respond {
    margin:2.2222em 0pt 0pt;
    }
    h4 {
    color:#575757;
    font-size:1.1538em;
    line-height:1.3333em;
    }
    #container {
    background-color:#FFFFFF;
    margin:0pt auto;
    padding:0pt 10px;
    width:72.8em;
    }
    #content_box {
    margin:0pt auto;
    width:74.8em;
    }
    #content {
    float:left;
    padding:0pt 6em 0pt 0pt;
    width:48.8em;
    }
    #sidebar {
    float:left;
    width:20em;
    }
    .custom #header {
    background:#FFFFFF url(images/header.png) no-repeat scroll center top;
    height:445px;
    margin:0pt auto;
    text-align:center;
    width:98.8em;
    }
    .custom #footer {
    background:transparent url(images/footer.png) no-repeat scroll center bottom;
    height:360px;
    margin:0 auto;;
    text-align:center;
    width:98.8em;
    }
    #nav {
    margin:0pt 0pt 50px;
    width:72.8em;
    }
    #nav ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    #nav ul li {
    float:left;
    font-size:2em;
    }
    #nav ul li a, #nav ul li a:visited {
    color:#009933;
    display:block;
    padding:0.3125em 0.8125em 0.5em;
    }
    #nav ul li a:hover, #nav ul li a.current:hover {
    background:#009933 none repeat scroll 0%;
    color:#FFFFFF !important;
    text-decoration:none !important;
    }
    #nav ul li a.current, #nav ul li a.current:visited {
    color:#009933;
    text-decoration:underline;
    }
    .post_date {
    border-bottom:3px solid #CCCCCC;
    color:#AAAAAA;
    font-size:1.3em;
    line-height:1.5455em;
    margin:0pt 0pt 1.8182em;
    }
    .post_date a, .post_date a:visited {
    color:#575757;
    padding:0.0909em;
    }
    .post_date a:hover {
    background:#009933 none repeat scroll 0%;
    color:#575757;
    }
    .entry {
    font-size:1.3em;
    line-height:1.5385em;
    }
    .entry a, .entry a:visited {
    border-bottom:1px solid #BBBBBB;
    padding:1px 0pt;
    }
    .entry a:hover {
    background:#009933 none repeat scroll 0%;
    border-bottom:medium none;
    color:#FFFFFF;
    padding:1px 0pt;
    }
    .entry p {
    margin:0pt 0pt 1.5385em;
    }
    .entry ul, .entry ol {
    margin:0pt 0pt 1.5385em 3em;
    }
    .entry ul {
    list-style-type:disc;
    }
    .entry li {
    }
    .entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol {
    margin:0pt 0pt 0pt 1.5em;
    }
    .entry dl {
    margin:0pt 0pt 1.5385em;
    }
    .entry dt {
    font-weight:bold;
    }
    .entry dd {
    margin:0pt 0pt 0pt 1.5em;
    }
    .entry sup, .entry sub {
    line-height:1em;
    }
    .entry blockquote.right, .entry blockquote.left {
    border-color:#CCCCCC;
    border-style:solid;
    border-width:0.0625em 0pt;
    font-size:1.2308em;
    line-height:1.25em;
    padding:0.4375em 0pt;
    text-align:center;
    width:13.6875em;
    }
    .entry blockquote.right {
    clear:right;
    float:right;
    margin:0pt 0pt 0pt 0.9375em;
    }
    .entry blockquote.left {
    clear:left;
    float:left;
    margin:0pt 0.9375em 0pt 0pt;
    }
    .entry blockquote.right p, .entry blockquote.left p {
    margin:0pt !important;
    }
    .entry .ad {
    clear:right;
    float:right;
    margin:0pt 0pt 0pt 1.1538em;
    }
    .entry .ad_left {
    clear:left;
    float:left;
    margin:0pt 1.1538em 0pt 0pt;
    }
    .entry img {
    }
    .entry img.left {
    clear:left;
    float:left;
    margin:0pt 1.1538em 0pt 0pt;
    }
    .entry img.right {
    clear:right;
    float:right;
    margin:0pt 0pt 0pt 1.1538em;
    }
    .entry img.center {
    clear:both;
    display:block;
    margin:0pt auto 1.5385em;
    }
    .entry img.frame {
    border:5px solid #009933;
    padding:5px;
    }
    .entry img.stack {
    clear:none !important;
    }
    .post_meta {
    border-top:0.23077em solid #CCCCCC;
    clear:both;
    font-size:1.3em;
    line-height:1em;
    margin:0pt 0pt 4.5385em;
    padding:0.3846em 0pt 0pt;
    }
    .add_comment {
    background:transparent url(images/icon_comment.gif) no-repeat scroll 0pt;
    float:left;
    padding:0pt 0pt 0.2em 1.6154em;
    }
    .post_meta a:hover {
    border-bottom:1px solid #009933;
    color:#575757;
    }
    .page .entry {
    border-bottom:0.23077em solid #CCCCCC;
    margin:0pt 0pt 3.0769em;
    }
    .navigation {
    font-size:1.2em;
    line-height:1.6667em;
    margin:0pt 0pt 3.3333em;
    width:39em;
    }
    .navigation a:hover {
    border-bottom:1px solid #009933;
    color:#575757;
    }
    .next {
    text-align:right;
    }
    ul.sidebar_list {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    ul.sidebar_list li.widget, ul.sidebar_list li.linkcat {
    float:left;
    font-size:1.2em;
    line-height:1.6667em;
    margin:0pt 0pt 2.8em;
    width:16.6667em;
    }
    li.widget p {
    margin:0pt 0pt 1.2em;
    }
    li.widget ul, li.linkcat ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0pt 0pt 0.8333em;
    }
    li.widget li, li.linkcat li {
    background:transparent url(images/bullet.gif) no-repeat scroll 0pt 0.4167em;
    padding:0pt 1em 0pt 1.16667em;
    }
    li.widget li a:hover, li.linkcat li a:hover {
    background:#009933 none repeat scroll 0%;
    color:#FFFFFF;
    display:block;
    padding:0pt;
    width:100%;
    }
    #calendar_wrap {
    margin:0pt 0pt 0.8333em;
    padding:0pt 0.166667em;
    width:16.3333em;
    }
    table#wp-calendar {
    border-collapse:collapse;
    width:16.3333em;
    }
    table#wp-calendar caption {
    border-bottom:0.08333em solid #CCCCCC;
    font-weight:bold;
    line-height:1.58333em;
    }
    table#wp-calendar th {
    border-bottom:0.08333em solid #CCCCCC;
    color:#666666;
    font-size:1em;
    line-height:1.58333em;
    text-align:center;
    width:2.3333em;
    }
    table#wp-calendar td {
    color:#999999;
    line-height:1.66667em;
    text-align:center;
    width:2.3333em;
    }
    table#wp-calendar td a, table#wp-calendar td a:visited {
    color:#009933;
    font-weight:bold;
    }
    table#wp-calendar td a:hover {
    text-decoration:underline;
    }
    table#wp-calendar td#next, table#wp-calendar td#prev {
    width:7em;
    }
    li.widget ul.flickr_stream {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0pt;
    padding:0pt 10px;
    }
    li.widget ul.flickr_stream li {
    display:inline;
    margin:0pt;
    padding:0pt 5px 5px 0pt;
    }
    li.widget ul.flickr_stream li a img {
    padding:3px;
    }
    li.widget ul.flickr_stream li a:hover img {
    background:#FF2A96 none repeat scroll 0%;
    border-bottom:medium none;
    }
    #comments {
    width:46.8em;
    }
    dl#comment_list {
    margin:0pt;
    }
    dl#comment_list dt {
    background:transparent url(images/comment_top.gif) no-repeat scroll 0pt 100%;
    color:#999999;
    font-size:1.1em;
    line-height:1.8182em;
    padding:0pt 0pt 33px;
    }
    dl#comment_list dt.author {
    background:transparent url(images/comment_author_top.gif) no-repeat scroll 0pt 100%;
    }
    dl#comment_list dt .comment_num {
    padding:0pt 0.3636em 0pt 0pt;
    }
    dl#comment_list dt .comment_num a, dl#comment_list dt .comment_num a:visited {
    color:#999999;
    }
    dl#comment_list dt .comment_num a:hover {
    color:#009933;
    }
    dl#comment_list dt strong {
    color:#575757;
    font-size:1.4545em;
    }
    dl#comment_list dt strong a, dl#comment_list dt strong a:visited {
    border-bottom:1px solid #575757;
    color:#009933;
    }
    dl#comment_list dt strong a:hover {
    border-bottom:1px solid #009933;
    color:#009933;
    }
    dl#comment_list dd {
    background:#B0FFCA url(images/comment_bottom.gif) no-repeat scroll 0pt 100%;
    margin:0pt 0pt 1.5385em;
    padding:0pt 20px;
    width:428px;
    }
    dl#comment_list dd.author {
    background:#FFE3B9 url(images/comment_author_bottom.gif) no-repeat scroll 0pt 100%;
    }
    dl#comment_list dd.entry p, dl#comment_list dd.entry ul, dl#comment_list dd.entry ol, dl#comment_list dd.entry blockquote {
    margin-bottom:1.1538em;
    }
    #comment_form {
    margin:0pt 0pt 4em;
    width:46.8em;
    }
    #comment_form a:hover {
    text-decoration:underline;
    }
    #comment_form p {
    padding:0.7692em 0pt;
    }
    #comment_form label {
    font-size:1.2em;
    padding:0pt 0pt 0pt 0.83333em;
    }
    #comment_form .text_input {
    border-color:#999999 rgb(238, 238, 238) rgb(238, 238, 238) rgb(153, 153, 153);
    border-style:solid;
    border-width:0.15385em 0.07692em 0.07692em 0.15385em;
    color:#009933;
    font-family:Verdana,sans-serif;
    font-size:1.3em;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    line-height:normal;
    padding:0.23077em;
    width:15.3846em;
    }
    #comment_form .text_input:focus {
    border-color:#666666 rgb(221, 221, 221) rgb(221, 221, 221) rgb(102, 102, 102);
    }
    #comment_form .text_area {
    width:32.9231em;
    }
    #comment_form p.subscribe-to-comments {
    font-size:1.3em;
    }
    #comment_form p.subscribe-to-comments label {
    font-size:1em;
    }
    #comment_form .form_submit {
    background:transparent url(images/submit_bg.gif) repeat-x scroll 0%;
    border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
    border-style:double;
    border-width:0.21429em;
    color:#575757;
    cursor:pointer;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:1.4em;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    line-height:1em;
    padding:0.5em;
    }
    #comment_form .form_submit:hover {
    color:#009933;
    }
    #search_form {
    margin:0pt 0pt 0.5833em;
    }
    #search_form .search_input {
    background:#CAFFDB none repeat scroll 0%;
    border:0.083333em solid #999999;
    color:#777777;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:1.1em;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    padding:0.25em;
    width:191px;
    }
    #search_form .search_input:focus {
    background:#CAFFDB none repeat scroll 0%;
    }
    #content .search_input {
    font-size:0.9231em !important;
    }
    #header:after, #logo:after, #nav:after, #content_box:after, .page .entry:after, #comments:after, dl#comment_list dd:after, #comment_form:after {
    clear:both;
    content:".";
    display:block;
    height:0pt;
    visibility:hidden;
    }
    .diggit {
    float:right;
    }
    .related {
    margin:0px 0px 5px;
    }
    Make a backup of what you have in style.css just in case something is screwed up, and then completely replace what you have with that. Should give you what you want.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow that's fantastic, than you so much. The changes are up on the site right now.

    May I ask two small followup questions?

    1. On the right side, the header looks like it's misaligned by about 1px from the content. I'm using IE7 currently. How would I correct that?

    2. Would it be easy to add a 5px or so border between the white content area and the grey border? Just something to seperate the white from the grey.

    Thanks so much for your time.

    David


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •