[Resolved] background color width -CSS code

[Filip]

Hi, please give me a hint. How could I define background color width (maybe with CSS style)?
I would have the background color width the same as page width, not all over web browser.
thank you

[David]

Hi there,

you can set the color in Customizer > Colors > Content

[Filip]

I dont want change content colors.
I want change width of all web page background color.
For example if you look at my website (I changed color for simplicity) you see (on high resolution monitors) blue background color width does not respect page width, like header or navigation bar does.

[David]

If you were to switch the Customizer > Layout > Container > Container Layout to Single Container then the above method works.

If you want to maintain separate containers as you have it currently – this will require more than CSS. We will need to hook in a ‘wrap’ around the sites content. You can do this like so:

1. Make sure you have the Elements module activated in Appearance > GeneratePress. And we’re going to create 2 x Hook Elements from the Appearance > Elements menu.

2. First Hook Element – title it open Content Wrap and Add this Code Below:

<div class="custom-content-wrap"><!-- open content wrap -->

The editor will automatically add a closing </div> – you must delete that.

2.1 Select the before_header hook from the list
2.2 Set the priority to 0;
2.3 Set the Display Rules to the entire site.

3. Second Hook Element – title it Close Wrap and add this code:

</div><!-- close content wrap -->

3.1 Select the after_footer hook.
3.2 Set the Display Rules the same as the first hook.

Now add this CSS:

.custom-content-wrap {
    /* Set max-width to match conatiner width */
    max-width: 1520px;
    margin-left: auto;
    margin-right: auto;
    /* Set background color */
    background-color: #cccccc;
}

[Filip]

Oh well, thank your for very precise support, its almost what I need.
Now I get rid of background color inside main area (was changed to grey), and blue background sides reamin.
I would have right opposite, I mean get rid of blue color (use default color of web browser and grey color switch to blue (body background).
Thank you for your effort to help me.

[David]

So:

Customizer > Colors > Body – this is the color that extends to the width of the browser. So change this to white which is what the browser should default to.

[Filip]

OK, background color on sides is now white (like my web browser default) its good, but how to switch grey color in main area background (created by hook and CCS magic) back to blue?

[David]

In the CSS provided here you will see this property:

background-color: #cccccc; just change the color hex code ie. #cccccc to whatever color hex code you want.

[Filip]

Yes thats it 🙂
Only small detail left to solve, border padding 15px of elements on main area, it should be yellow, but is sticked to left and right edges and no 15px space here.
Thank you for your patience, I have small experience in layout styling, I am a network guy.

[David]

Thats great – this is not a standard set-up so you’re doing very well 🙂

So add this CSS:

#page {
    margin: 40px;
}

It will add 40px of margin around the main content area. If you want to have different margins then use this:

#page {
    margin: 40px 40px 40px 40px;
}

The 4 variables of 40px are: Top Right Bottom Left.

[Filip]

# thank you a lot, now I am 100% happy with the result.
I like your product, have a nice day 🙂

[David]

Awesome – glad to be of help.

[Author]

Posts