Color choice for outside of content area

This topic contains 2 replies, has 2 voices, and was last updated by  Andrew Misplon 3 years, 4 months ago.

  • Author
    Posts
  • #1652

    rictans
    Participant

    Hi Andrew,
    I would like to choose the color of areas outside of the content area, ie. outside of max-width. And if you can even give me an option for an image background in the outside area, that would be great too. Choosing color is more important though…

    Thanks,
    Ric.

    #colophon {
    margin: 0 auto;
    max-width: 960px;

    #1656

    Andrew Misplon
    Keymaster

    Hi Ric

    The next version introduces a boxed layout. When boxed is set a regular background color and background image option is introduced. If you’d like, I could work that up for you now.

    To add a background color and image, we’d need to add another constraint, this time around the main content area. Previously we introduced a constraint to the footer. I’m a little slammed today. If you could give me the weekend on this I’ll come back to with a solution ASAP.

    #1665

    Andrew Misplon
    Keymaster

    Hi Ric

    I think have this worked up for you. It’s a 100% width header with everything else boxed.

    This will no longer be necessary:

    #colophon {
    margin: 0 auto;
    max-width: 960px;
    }

    Instead, we’ll use this:

    /* Boxed Layout: 100% Width Header */
    
    body {
      background: red;
    }
    
    #page {
      background: none;
    }
    
    .container {
      padding: 0 2.67857em;
    }
    
    @media (max-width: 1200px) {
      .container {
        padding: 0 1.78571em;
      }
    }
    
    .site-content, 
    #colophon {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: block;
      position: relative;
      margin: 0 auto;
      max-width: 85.7143rem;
    }

    Change the first selectors color value from red to your preferred color. To use a background image there, change the background property as follows:

    background: #ffffff url("img_tree.png") no-repeat fixed center;

    Ref: http://www.w3schools.com/cssref/css3_pr_background.asp

    Let me know how you come along.

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

You must be logged in to reply to this topic.

Scroll to top