How do I correctly document this in CSS?

Posted on 2014-08-18
Medium Priority
Last Modified: 2014-08-18
Head out to vpweddingsandevents.com.

I'm putting together a Wordpress site for my client and I want to have a white area for the content, but only the content.

In other words, the background color of the body needs to be black. But where I have text needs to be white.

Using Firebug, I was able to locate the precise location where I want to make my change. The CSS looks like this:

<body class="home blog" itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div class="full-background">
<div class="body_wraper_box">
<header class="header-wraper">
<section id="contents" class="clearfix">
<div class="row main_content">
<div class="container content_wraper">

It's in "section id="contents" class="clear fix" - that's where I need to make by background color white.

So I head out to the css file and I can't find "contents." So I write:

#contents {
background: #fff;

...and nothing.

I'm poised on the threshold of great things, here, I know it. But I can't make the change and I don't know why.

What am I missing?
Question by:brucegust
  • 3
  • 2
LVL 58

Accepted Solution

Gary earned 1400 total points
ID: 40268149
Didn't I already give you the code for this in another question?

You probably want to add some padding to this
.container.content_wraper {
    background: #fff;

Open in new window

LVL 16

Expert Comment

by:Joshua Grantom
ID: 40268166
the issue is that section id="contents" gets its black background color from .body_wraper_box

Unless you change the html code of the template you will not be able to do this.

I believe he wants the entire bottom below header-wraper to be white, not just the inside content wrapper

Author Comment

ID: 40268176
Gary, you did give me some code but the problem was that what I asked for didn't do the trick in that in order for my header and menu to look seamless, I had to have more than just a border. But since that's what I asked for, I gave you the credit and closed the question.

Let me try this new suggestion of yours and see if that doesn't ring the bell.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 16

Assisted Solution

by:Joshua Grantom
Joshua Grantom earned 600 total points
ID: 40268199
try changing

.body_wraper_box {
    background:  #FFF;

and adding

.header-wraper {
background: #000;
padding: 0 0 10px 0;
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40268236
the above code does this, just choose your padding for the bottom of header-wraper


Author Comment

ID: 40268290
Gary, your suggestion worked! That will do it!

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month16 days, 19 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question