WordPress › Support » How can I add a colored background on either side of my main content?

oneninetyseven
Member
Posted 1 year ago #

Hi everyone,

I'm at a loss as to how to add a colored background to either side of my main content. As an example (this is not my site!), look at THIS website (belongs to a health food store).

See how the main content is arranged on a white background - but there's a solid lime-green border on either side of the white content background?

What I'm trying to achieve is something like that (different look, different color - but the same basic thing; I want my content's background white, which it is, but I want solid color on either side of it).

I'm looking at the theme's style.css, and it's a relatively short sheet, but I'm totally lost; is there a simple line of code I specify to achieve what I need, and where in style.css should it go?

Much appreciate anyone's help.

Cheers!
alchymyth
The Sweeper
Posted 1 year ago #

solid lime-green border

this might be the answer - using a css border: http://www.w3schools.com/css/css_border.asp

without seeing your site, there is not much more to say about this.
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

We need to see your site - not an example site.
oneninetyseven
Member
Posted 1 year ago #

Of course; good point about not being able to help without seeing my site. Check the link. :) Here it is.

Go easy on me, it's still in the works. ;)
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

It's not possible without adding an enclosing wrapper div that separates the page area from the body background.
oneninetyseven
Member
Posted 1 year ago #

"It's not possible without adding an enclosing wrapper div that separates the page area from the body background."

How do I do this? Bear in mind that I'm a complete newbie when it comes to code or knowing where it goes...

Cheers
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

You would need to start editing the theme's template files - specifically header.php and footer.php - to insert extra markup. How comfortable are you with using HTML and CSS?
oneninetyseven
Member
Posted 1 year ago #

You would need to start editing the theme's template files - specifically header.php and footer.php - to insert extra markup. How comfortable are you with using HTML and CSS?

Well, I have no problem opening up header.php and footer.php.

If someone tells me where to put what code or what specifically to change, I can do that; I'd just make a copy and paste backup of the php files first.

Though, the guy who made the theme I'm using suggested starting somewhere in style.css - but he couldn't/didn't specify where - just said that it would be a good place to start.

Can you offer specific suggestions as to what I should edit?

Cheers
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #
OK - this ain't going to be easy via a forum but here goes:

In header.php, try adding <div id="wrapper"> immediately after <body <?php body_class(); ?>>. In footer.php, add </div> immediately before:
```
<?php wp_footer(); ?>
</body>
```
Let me know when you have those in place.
oneninetyseven
Member
Posted 1 year ago #

OK - this ain't going to be easy via a forum but here goes:

In header.php, try adding <div id="wrapper"> immediately after <body <?php body_class(); ?>>. In footer.php, add </div> immediately before:

<?php wp_footer(); ?>
</body>
Let me know when you have those in place.

Okay; I'm going to back up the php files and give this a go. I'll be back...
oneninetyseven
Member
Posted 1 year ago #

Alright, I'm back...

First thing I found is in header.php, there's no <body <?php body_class(); ?>> to be found. The closest line of code that looks like that appears as follows:
<body <?php if(function_exists("body_class") && !is_404()){body_class();} else echo 'class="page default"'?>>

In footer.php, the only code which resembles what you suggested looks like this: <?php ce4_get_fonts(); ?>

Hmm. What do you think?

Cheers
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

In that case, place the opening div tag after <body <?php if(function_exists("body_class") && !is_404()){body_class();} else echo 'class="page default"'?>>

Is there an </body> in footer.php?
oneninetyseven
Member
Posted 1 year ago #

Alright, I've placed <div id="wrapper"> immediately after body <?php if(function_exists("body_class") && !is_404()){body_class();} else echo 'class="page default"'?>>

Now it looks like: <body <?php if(function_exists("body_class") && !is_404()){body_class();} else echo 'class="page default"'?>><div id="wrapper">

In footer.php, yes, there is a </body>
It is found the second line from the bottom of footer.php
Underneath </body> is found </html>
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

OK - add the </div> just before the </body>
oneninetyseven
Member
Posted 1 year ago #
Done. Now, the last three lines in footer.php look like:
```
</div>
</body>
</html>
```
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #
Now add:
```
#wrapper {
	width: 987px;
	margin:0 auto;
	padding:0;
	background:#fff;
	color:#000;
}
```
to style.css. The bottom of the file will be OK.
oneninetyseven
Member
Posted 1 year ago #

Okay; this'll take me a sec. The way this theme's set up, I have to download style.css through my Cpanel, modify it and upload it; I'll post back when I'm done.
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

FWIW, I think that's the better option compared to editing onsite. At least using the FTP method, you can keep a backup copy on your local machine in case everything goes pear-shaped.
oneninetyseven
Member
Posted 1 year ago #

True; I actually made a full backup of my site prior, so nothing can be lost if something goes awry. I'll be back in a bit; stay tuned! Cheers
oneninetyseven
Member
Posted 1 year ago #
Hey esmi,

Okay, I've uploaded the new style.css with
```
wrapper {
	width: 987px;
	margin:0 auto;
	padding:0;
	background:#fff;
	color:#000;
}
```
at the bottom.
oneninetyseven
Member
Posted 1 year ago #
Sorry, with
```
#wrapper {
	width: 987px;
	margin:0 auto;
	padding:0;
	background:#fff;
	color:#000;
}
```
at the bottom (I'd missed the # in the previous post, but yup, it's there correctly in the new style.css
oneninetyseven
Member
Posted 1 year ago #

Okay, now, the site looks different; that buttermilk yellow color at the top of the page just shows up as a block of color on either side of the content, but doesn't cover the whole length of the page. There's also a big, white space between the color that wasn't there before; everything else is still white...
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

Ah yes! I can see why. Can you move <div id="wrapper"> down to just above <div class="main">?
oneninetyseven
Member
Posted 1 year ago #

Do you mean in header.php? If so, the closest code I see in it that resembles <div class="main">? looks like this:

<div class="header"><div class="siteTitle"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></div><div class="tagline">

Should I move <div id="wrapper"> to one line above it so it looks like:

<div id="wrapper">
<div class="header"><div class="siteTitle"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></div><div class="tagline">

?

Cheers
esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

Add it immediately after the closing </div> for the header. That's possibly the last thing in header.php
oneninetyseven
Member
Posted 1 year ago #

Add it immediately after the closing </div> for the header. That's possibly the last thing in header.php

You're right; </div> was the last line in header.php

Okay, I did that; now, the site looks pretty much like it did before we made these changes: The yellow extends across the upper section of the page, from edge-to-edge of the screen.

What do you think?

esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

Excellent. Now for the last change. Edit style.css and change:

body.page, body.archive, body.single, body.search {
    background: url("header.gif") repeat-x 0 -285px;
}

to:

body.page, body.archive, body.single, body.search {
    background:#000 url("header.gif") repeat-x scroll 0 -285px;
}

replacing #000 with the color code that you prefer.

oneninetyseven
Member
Posted 1 year ago #

Alright; I'll need a bit of time again, since I'll have to modify style.css on my computer and replace the current style.css on my host. I'll be back!
oneninetyseven
Member
Posted 1 year ago #

Checking in: I've done that; I know the color's not a good choice (!); just experimenting.

Now, there are a couple of things I wonder about:

1. Do you see at the bottom of the site, the edges of the background color I've chosen has an extra little rectangular chunk on the left hand side that cuts into the white, and a slightly larger (taller) chunk on the right hand side that's missing? What could be going on there?

2. On the top of the site, where there's that buttermilk-yellow section that goes from edge-to-edge, is it possible for the background color we've added to cover the edges of that yellow color, so the entirety of each edge of the side (outside of the main content) is filled in with background color?

Thanks!

esmi
Theme Diva & Forum Moderator
Posted 1 year ago #

1. Change:

.copyright {
    border: medium none;
    margin: 0 auto 20px;
    padding: 0 0 0 15px;
}

to:

.copyright {
    border: medium none;
    margin: 0 auto 20px -10px;
    padding: 0 0 0 15px;
    width: 972px;
}

2. Not without doing a lot more work and re-structuring the layout further.

And now, I really must log off. It's gone midnight here. :-)

12 Next »

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

How can I add a colored background on either side of my main content? (32 posts)

Topic Closed

About this Topic

Tags

Code is Poetry