GolfSolid CSS Questions

Discussion in 'Web Design and Development' started by Rob587, Nov 10, 2009.

  1. Rob587 macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #1
    What do I need to change to see some of the background color in between my posts?

    Also, why can I not find how to change the post content font? I am only able to change the title.

    My Site: golfsolid.com

    Code:
    /* 
    	Theme Name: Revolution Code Blue
    	Theme URL: http://www.revolutiontwo.com/themes/code-blue
    	Description: Code Blue is a 3-column Widget-ready theme created for WordPress.
    	Author: Brian Gardner
    	Author URI: http://www.briangardner.com
    	Version: 2.0
    	Tags: three columns, fixed width, white, blue, sidebar widgets
    	
    	The CSS, XHTML and design is released under GPL:
    	http://www.opensource.org/licenses/gpl-license.php
    	
    	Changelog:
    		v2.0 - 11.01.08
    		First Release of Revolution Code Blue
    */
    
    body {
    	background: #1A4E88 url(images/bg.gif) repeat-x;
    	color: #202020;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    	
    #wrap {
    	background: #e6e5e9;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    	
    /************************************************
    *	Hyperlinks									*
    ************************************************/
    
    a, a:visited {
    	color: #2255AA;
    	text-decoration: none;
    	}
    	
    a:hover {
    	color: #7DAE12;
    	text-decoration: underline;
    	}
    	
    a img {
    	border: none;
    	}
    	
    /************************************************
    *	Header  									*
    ************************************************/
    
    #header {
    	width: 960px;
    	height: 147px;
    	color: #FFFFFF;
    	font-size: 16px;
    	font-weight: normal;
    	margin: 0px auto 0px;
    	padding: 0px;
    	overflow: hidden;
    	}
    	
    #header p {
    	padding: 0px 0px 5px 0px;
    	margin: 0px;
    	line-height: 20px;
    	}
    	
    #header h1 {
    	color: #FFFFFF;
    	font-size: 36px;
    	font-family: Times New Roman, Georgia, Trebuchet MS;
    	font-weight: normal;
    	margin: 0px;
    	padding: 20px 0px 0px 0px;
    	text-decoration: none;
    	}
    	
    #header h1 a, #header h1 a:visited {
    	color: #FFFFFF;
    	font-size: 36px;
    	font-family: Times New Roman, Georgia, Trebuchet MS;
    	font-weight: normal;
    	margin: 0px;
    	padding: 20px 0px 0px 0px;
    	text-decoration: none;
            }
    	
    #header h1 a:hover {
    	color: #FFFFFF;
    	text-decoration: none;
            }
    
    .headerleft {
            width: 470px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	overflow: hidden;
    	}
    	
    .headerright {
    	width: 480px;
    	float: right;
    	margin: 0px;
    	padding: 38px 0px 0px 0px;
    	text-align: right;
    	}
    	
    .headerright a, .headerright a:visited {
    	color: #FFFFFF;
    	font-size: 11px;
    	text-transform: uppercase;
    	text-decoration: none;
    	padding: 0px 0px 0px 3px;
    	}
    	
    .headerright a:hover {
    	color: #FFFFFF;
    	text-decoration: underline;
    	}
    	
    .headerright a img {
    	border: none;
    	margin: 0px 0px 0px 0px;
    	padding: 0px;
    	}
    	
    /************************************************
    *	Navbar  									*
    ************************************************/
    
    #navbar {
            background-image: url(images/nav_background.png);
            background-repeat: repeat-x;
            width: 100%;
    	height: 26px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	}
    	
    #navbarleft {
            width: 50%;
    	height: 26px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #navbarright {
    	width: 50%;
    	height: 26px;
    	float: right;
    	margin: 0px;
    	padding: 0px;
    	text-align: right;
    	}
    	
    #nav {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	}
    	
    #nav ul {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	}
    
    #nav a {
    	color: #FFFFFF;
    	display: block;
        font-weight: bold;
        margin: 0px 20px 0px 0px;
    	padding: 7px 10px 0px 10px;
    	}
    	
    #nav a:hover {
    	display: block;
    	text-decoration: none;
        margin: 0px 20px 0px 0px;
    	padding: 7px 10px 0px 10px;
    	}
    
    #nav li {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #nav li li {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	width: 140px;
    	}
    	
    #nav li li a, #nav li li a:link, #nav li li a:visited {
            background: #4A7EB8;
            color: #FFFFFF;
    	width: 140px;
    	float: none;
    	margin: 0px;
    	padding: 6px 10px 0px 10px;
    	border-bottom: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	border-right: 1px solid #FFFFFF;
    	}
    	
    #nav li li a:hover, #nav li li a:active {
    	background: 1A4E88; 
            color: #FFFFFF;
            
    	}
    
    #nav li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    	}
    
    #nav li:hover ul {
    	left: auto;
    	display: block;
    	}
    	
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    	}
    
    #nav-wrapper {
        width: 960px;
        height: 100%;
        margin: 0 auto;
    }
    	
    /************************************************
    *	Content 					     		    * 
    ************************************************/
    
    #content {
            width: 960px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px; 
            }
    
    #content p {
            padding: 0px 0px 10px 0px;
    	margin: 10px;
    	line-height: 20px;
    	}
    	
    #content h1 {
    	color: #000000;
    	font-size: 19px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	margin-left: 10px; margin-top: -10px; margin-bottom: 1px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #content h1 a  {
    	color: #000000;
    	text-decoration: none;
    	}
    
    #content h1 a:hover {
    	color: #7DAE12;
    	text-decoration: none;
    	}
    	
    #content h3 {
    	color: #2255AA;
    	font-size: 24px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: normal;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #content h4 {
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	margin: 0px 0px 20px 0px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #content img.wp-smiley {
    	float: none;
    	border: none;
    	padding: 0px;
    	margin: 0px;
    	}
    
    #content img.wp-wink {
    	float: none;
    	border: none;
    	padding: 0px;
    	margin: 0px;
    	}
    	
    #contentleft {
            background: #FFFFFF;
            float: left;
    	width: 580px;
    	margin: 0px 0px 0px 10px;
    	padding: 20px 30px 20px 0px;
            border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin-top: 10px; margin-bottom:10px; margin-right: 5px;
            }
    	
    #contentleft ol {
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 10px 0px;
    	}
    	
    #contentleft ol li {
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    #contentleft ul {
    	list-style-type: square;
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 10px 0px;
    	}
    	
    #contentleft ul li {
    	list-style-type: square;
    	margin: 0px 0px 0px 20px;
    	padding: 0px 0px 5px 0px;
    	}
    	
    .date {
    	width: 510px;
            font-size: 11px;
    	font-weight: bold;
    	padding: 0px 0px 10px 0px;
    	margin-left: 10px;
    	border-bottom: 1px solid #ccc;
    	}
    	
    .postmeta {
    	width: 510px;
    	font-size: 11px;
    	font-weight: bold;
    	padding:: 0px 0px 40px 0px
    	margin-left: 10px;
    	border-top: 1px solid #ccc;
            margin-left: 10px;
    	}
    	
    blockquote {
    	font-style: italic;
    	margin: 0px 25px 15px 25px;
    	padding: 0px 25px 0px 10px;
    	border-left: 2px solid #4A7EB8;
    	}
    	
    #content blockquote p {
    	margin: 0px 0px 0px 0px;
    	padding: 10px 0px 10px 0px;
    	}
    	
    /************************************************
    *	Images  					     		    * 
    ************************************************/
    
    img.centered  {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 10px;
    	padding: 0px;
    	}
    	
    img.alignnone {
    	padding: 0px;
    	margin: 0px 0px 10px 0px;
    	display: inline;
    	}
    
    img.alignright {
    	padding: 0px;
    	margin: 0px 0px 10px 10px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 0px;
    	margin: 0px 10px 10px 0px;
    	display: inline;
    	}
    	
    .aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}
    	
    .wp-caption {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    .wp-caption img {
    	margin: 0px 0px 10px 0px;
    	padding: 0px;
    	border: 0px;
    	}
    
    .wp-caption p.wp-caption-text {
    	margin: 0px;
    	padding: 5px 0px 0px 0px;
    	font-size: 10px;
    	font-style: italic;
    	font-weight: bold;
    	line-height: 12px;
    	}
    	
    /************************************************
    *	Sidebar 					     	    * 
    ************************************************/
    	
    #sidebar {
    	float: right;
            width: 326px;
    	margin: 0px 0px 0px 0px;
    	padding: 10px 0px 20px 0px;
    	line-height: 20px;
    	}
    	
    #sidebar h2 {
    	background: #FFFFFF url(images/headline_right.gif);
    	color: #021B3D;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 1px 0px 0px 0px;
    	padding: 2px 0px 2px 10px;
            border:1px solid #ccc;
    	}
    
    #sidebar p {
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
    	line-height: 20px;
    	}
    	
    #sidebar ul {
            list-style-type: none;
    	margin: 0px 0px 0px 0px;
    	padding: 0px;
    	}
    	
    #sidebar ul li {
    	list-style-type: none;
    	margin: 0px 0px 5px 0px;
    	padding: 0px;
    	}
    
    #sidebar ul ul {
            list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	border-left: 1px solid #ccc;
    	border-right: 1px solid #ccc;
    	}
    	
    #sidebar ul li li {
    	background: #F1F1F1;
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
            border-bottom: 1px solid #ccc;
    	}
    	
    #sidebar ul li ul li {
    	background: #F1F1F1;
    	padding: 0px 0px 0px 15px;
    	margin: 0px;
    	}
    
    #sidebar_section-1 {
     width: 50%;
     float: left;
    }
    
    #sidebar_section-2 {
     width: 50%;
     float: left;
    }
    
    #sidebar_section-3 {
     width: 50%;
     float: right;
    }
    
    #sidebar_section-4 {
     clear: left;
     width: 50%;
     float: left;
    }
    
    #sidebar_section-5 {
     width: 50%;
     float: left;
    }
    
    #sidebar_section-6 {
     width: 50%;
     float: left;
    }
    	
    /************************************************
    *	Footer Background							*
    ************************************************/
    
    #footerbg {
    	background: #1A4E88;
    	}
    	
    /************************************************
    *	Footer  									*
    ************************************************/
    
    #footer {
    	width: 960px;
    	height: 30px;
    	color: #FFFFFF;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    	
    #footer p {
    	color: #FFFFFF;
    	font-size: 10px;
        font-weight: normal;
        text-transform: none;
    	margin: 0px;	
    	padding: 0px;
    	}
    
    #footer a {
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    	
    #footer a img {
    	border: none;
    	margin: 0px;
    	padding: 0px;
    	}
    
    #footer a:hover {
    	color: #FFFFFF;
    	text-decoration: underline;
    	}
    	
    .footerleft {
    	width: 700px;
    	float: left;
    	margin: 0px;
    	padding: 8px 0px 8px 0px;
    	}
    	
    .footerright {
    	width: 250px;
    	float: right;
    	margin: 0px;
    	padding: 8px 0px 8px 0px;
    	text-align: right;
    	}
    	
    /************************************************
    *	Search Form									*
    ************************************************/
    
    #searchdiv {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    #searchform {
    	margin: 0px;
    	padding: 2px 0px 0px 0px;
    	}
    	
    #s {
    	background: #FFFFFF;
    	width: 210px;
    	color: #333333;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	padding: 3px;
    	margin: 0px 0px 0px 0px;
    	border-top: 1px solid #666666;
    	border-right: 1px solid #666666;
    	border-left: 1px solid #999999;
    	border-bottom: 1px solid #999999;
    	}
    	
    #sbutt {
    	background: #1A4E88 url(images/submit.png);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	padding: 1px;
    	margin: 0px;
    	border: 1px solid #FFFFFF;
    	}
    	
    /************************************************
    *	Comments									*
    ************************************************/
    	
    #commentblock {
    	width: 500px;
    	float: left;
    	padding: 0px 0px 10px 0px;
    	margin: 0px 0px 0px 0px;
    	line-height: 20px;
    	}
    	
    .commentleft {
    	width: 150px;
    	float: left;
    	padding: 0px 20px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	}
    	
    .commentright {
    	width: 300px;
    	float: right;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	}
    	
    #commentblock ol {
    	margin: 0px 5px 0px 20px;
    	padding: 0px 0px 10px 0px;
    	}
    	
    #commentblock ol li {
    	margin: 0px;
    	padding: 0px;
    	}
    	
    .commentdate {
    	font-size: 12px;
    	padding-left: 0px;
    	}
    	
    #commentlist li p {
    	margin-bottom: 8px;
    	line-height: 20px;
    	padding: 0px;
    	}
    
    .commentname {
    	color: #333333;
    	margin: 0px;
    	padding: 5px 5px 5px 0px;
    	}
    
    .commentinfo {
    	clear: both;
    	}
    	
    #name, #email, #url {
    	background: #EAEAEA !important;
    	color: #202020;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	margin: 0px;
    	padding: 4px;
    	border-top: 1px solid #666666;
    	border-right: 1px solid #DDDDDD;
    	border-left: 1px solid #666666;
    	border-bottom: 1px solid #DDDDDD;
    	}
    	
    #words {
    	background: #EAEAEA !important;
    	width: 460px;
    	color: #000000;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    	padding: 4px;
    	margin: 0px;
    	border-top: 1px solid #666666;
    	border-right: 1px solid #DDDDDD;
    	border-left: 1px solid #666666;
    	border-bottom: 1px solid #DDDDDD;
    	}
    	
    #submit {
    	background: #1A4E88 url(images/submit.png);
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Tahoma, Verdana;
    	text-transform: uppercase;
    	padding: 3px;
    	margin: 0px;
    	border: 1px solid #1A4E88;
    	}
    
     
  2. settings macrumors newbie

    Joined:
    Oct 29, 2009
    #2
    that is to change the font of the posts
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    A new post starts as a h1 tag so you would modify the CSS selector #content h1 to separate posts more. Moving it down won't reveal the background color though. The background color seems to be applied to your #contentleft area, so since all of your posts are in this single area, separation won't do anything. You would need to divide your posts into individual sections, e.g, <div class="post"> then you can apply a white background to that and any separation between posts will reveal any background color behind it.
     
  4. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #4
    I tried adding in #contentleft p in the css and made sure to use the div tags in the php and it didn't work. Im wondering if there isn't some other reason why thats not working because I tried adding font-family to #content, which has tags around my content, but that didn't work either... ?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    #contentleft p already exists in your CSS file, style.css on line 316 and it lists the font-family to use. This is where you need to modify it. You likely added CSS before this and then it got over written. Modifying the font-family using Firebug showed the text changing on the page so it should work.
     
  6. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #6
    hmm... Im not quite sure what your talking about because in my style.css line 316 seems to be #contentleft ul. And I cant find a #contentleft p anywhere.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    It should be 3 selectors prior to #contentleft ul, and right after the #contenleft selector. The line number may have changed if you were doing any editing. I was also just basing the line number off what Firebug told me.
     
  8. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #8
    This is so wierd....

    I think the #contentleft p you were seeing was what I added after you told me to. Anyway its not working even after I added it where you said you thought you were seeing it. I also put "font-family: Arial, Tahoma, Verdana;" under it and it didnt work. So now I removed it, and searched for anything in the css that has times font, because that seems to be what is in the posts, and I changed all of them to arial and its not doing anything. How can that be possible?
     
  9. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #9
    Im pretty confused by what your telling me to do. I kind of get it, but can you tell me exactly what code to put in, and where to put it? Thanks man. :)
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Yes, I think what I saw was what you added. I couldn't be for sure though. I took some snapshots with me using Firebug so you can see where I see things and that changing the font has an effect on-screen. See attachments.
     

    Attached Files:

  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    You currently have:
    HTML:
    <h1>Post title</h1>
    <p>content</p>
    
    <h1>Next Post</h1>
    <p>content</p>
    What I suggest is:
    HTML:
    <div class="post">
    <h1>Post title</h1>
    <p>content</p>
    </div>
    
    <div class="post">
    <h1>Next Post</h1>
    <p>content</p>
    </div>
    Then your CSS would be something like:
    Code:
    #contentleft {
     background: #E6E5E9;
    }
    .post {
     margin: 1em 0; /* creates spacing between posts */
     background: #fff;
    }
     
  12. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #12
    Great, its getting close now. I just cant figure out how to expand the white post background to the previous borders I have? And I need the space between the post titles and the top borders reduced.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    If I'm following you right, you can reduce the margin on the .post and also add padding to .post to achieve what you want. The padding should give you more white area around the post, and the margin will let you reduce the spacing between posts.
     
  14. Rob587 thread starter macrumors 6502a

    Rob587

    Joined:
    Jul 4, 2004
    Location:
    Orlando, FL
    #14
    Thats what I thought, but I tried this:


    .post {
    margin: 1.5em 0; /* creates spacing between posts */
    padding: 0px 50px 0px 0px;
    background: #fff;
    }

    and nothing happened.
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    Well I'm seeing changes on the page. There's a space between posts. The padding may be off from what you want from the looks of it. It can be tweaked and I'll try to convey some of the changes I tried that make it look better. Below is the CSS I changed and I tried to make notes on things I actually changed.

    Code:
    #content h1 {
    	color: #000000;
    	font-size: 19px;
    	font-family: Arial, Tahoma, Verdana;
    	font-weight: bold;
    	margin-left: 10px; margin-top: -10px; margin-bottom: 1px;
    	padding: [COLOR="Red"]10[/COLOR]px 0px 5px 0px; /* changed to 10 from 0 */
    }
    
    #contentleft {
      float: left;
    	width: 580px;
    	margin: [COLOR="Red"]0px 5px 10px 0px;[/COLOR]
    	padding: [COLOR="Red"]10px 0 0 0;[/COLOR] /* old 20px 30px 20px 0px;*/
    /* removed
     [s]border-top: 1px solid #ccc;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
     margin-top: 10px;
     margin-bottom:10px;
     margin-right: 5px; [/s]
    */
    }
    
    .post {
     margin: [COLOR="Red"]0 0 1.5em 0;[/COLOR] /* creates spacing between posts */
     padding: [COLOR="Red"]10px[/COLOR] 50px 0px 0px;
     background: #fff;
     [COLOR="Red"]border: 1px solid #ccc;[/COLOR] /* added */
    }
     

Share This Page