Changing background colors

It would be in your style.css file most likely. If you’re changing page background colors, you’d usually find they under the body selector.

If you post a link with more info on what exactly you’re looking to change to, we can give you more concrete instructions. ??

https://heyitsjake.com/reviews/

this is the layout i’m using.

I’ve been looking in the style.css file, and I found where to resize my header image, but I can’t find where to change the overall page background color (from gray to white), and to change the color behind the entries.

To change the background of the whole page, you’ll want to edit this:

body{
	font-family: Arial, Helvetica, "Trebuchet MS", Georgia, Sans-Serif;
	font-size: 11px;
	text-align: center;
	vertical-align: top;
	background: #ddd;
	color: #333;
}

to look like this:

body{
	font-family: Arial, Helvetica, "Trebuchet MS", Georgia, Sans-Serif;
	font-size: 11px;
	text-align: center;
	vertical-align: top;
	background: #fff;
	color: #333;
}

To change the color behind your entries, you’ll want to change this:

.entry{
	border: 1px solid #eee;
	padding: 0 10px 10px;
	line-height: 18px;
}

to look something like this:

.entry{
	border: 1px solid #eee;
	padding: 0 10px 10px;
	line-height: 18px;
	background-color: #EEDDEE;
}

Of course, you can change the background-color to whatever you’d like. ??

Yo Jake,

One other thing:

If you use Firefox (you should be), find the Firebug plugin and the Firefox Web Developer toolbar.

They really help in locating, troubleshooting, and editing CSS (and a whole lot more).

thank you!

one more thing, do you notice how it’s a gray behind the title of the post and the widget titles on the sidebar? What code would that be?

They’re both controlled by the same definition at the moment:

h2{
	padding: 10px;
	font-family: Arial;
	font-size: 11px;
	text-transform: uppercase;
	line-height: 18px;
	background: #eee;
}

If you wanted to set the background color to white, use #fff in place of the #eee. If you want to go darker, try #ddd or #ccc.

Make sense?

one last thing. How do I make the whole thing wider? The banner is exactly how I want it to be, but I would like the entries to be wider. I just don’t want to mess the whole thing up haha.

one last thing. How do I make the whole thing wider? The banner is exactly how I want it to be, but I would like the entries to be wider. I just don’t want to mess the whole thing up haha.

Always one last thing . . . ??

Well, right now, as you can probably see the layout is set to 600px. To increase this, you’d need to find the areas where this is controlled and widen it.

Since your banner is an image, it’s not going to stretch automatically.

You could start with something like:

#container{
	margin: 0 auto;
	width: 760px;
	text-align: left;
	vertical-align: top;
}

#header{
	margin:0 auto 20px;
	width: 610px;
	height: 320px;
	background: #fff url(images/adriana-lima.jpg) no-repeat;
}

#page{
	float: left;
	width: 760px;
	margin-bottom: 20px;
	background: #fff;
}

.narrowcolumn{
	float: left;
	width: 560px;
	text-align: left;
	vertical-align: top;
	background: #fff url(images/narrowcolumn.gif) no-repeat;
}

I wouldn’t make it too wide as your line length of your posts get longer and longer lines tend to be harder to read quickly.

My two cents.

while on same subject, is there a way to to put it a bg image? Ive been tinkering with for hours with no luck

while on same subject, is there a way to to put it a bg image? Ive been tinkering with for hours with no luck

Yep, this should point you in the right direction:

https://www.w3schools.com/css/css_background.asp

Hi there! Thanks for this thread, it has helped me a lot.

I also have ‘one last question regarding the background for entries. I do not find the code marked ” .entry{ ” as described above in the stylesheet. Can it be named something else?

I am using 2.6.3 and the Freshy2 theme.

I’d like to say thanks to sewmyheadon, too! I was able to put a background color behind my post titles in the VERY WHITE Prime Press theme by changing this:

.entry-title, .page-title{font-size:2.2em; line-height:1; margin:0.9091em 0 0;}

to this:

.entry-title, .page-title{font-size:2.2em; line-height:1; margin:0.9091em 0 0;}
.entry-title{padding: 10px 3px 10px;
background-color: #EEEEEE;}

You can see how it turned out at colleencoover.net