[Resolved] background color width -CSS code

Home Forums Support background color width -CSS code

This topic contains 11 replies, has 2 voices, and was last updated by  David 3 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #983890

    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

    #983899

    David Customer Support

    Hi there,

    you can set the color in Customizer > Colors > Content

    #983919

    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.

    #984105

    David Customer Support

    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;
    }
    #984127

    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.

    #984144

    David Customer Support

    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.

    #984189

    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?

    #984219

    David Customer Support

    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.

    #984230

    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.

    #984237

    David Customer Support

    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.

    #984247

    Filip

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

    #984248

    David Customer Support

    Awesome – glad to be of help.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.