Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

GolfSolid CSS Questions

Rob587

Rob587

macrumors 6502a
Original poster
Jul 4, 2004
801
1
Orlando, FL
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;
	}
 
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.
 
settings said:
that is to change the font of the posts
Click to expand...

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... ?
 
#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.
 
angelwatt said:
#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.
Click to expand...

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.
 
Rob587 said:
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.
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

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?
 
angelwatt said:
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.
Click to expand...

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. :)
 
Rob587 said:
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?
Click to expand...

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.
 

Attachments

  • golf-1.png
    golf-1.png
    126.1 KB · Views: 96
  • golf-2.png
    golf-2.png
    125.5 KB · Views: 84
Rob587 said:
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. :)
Click to expand...

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;
}
 
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.
 
Rob587 said:
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.
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

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.
 
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 */
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back