Support/Ultra Theme/Color choice for outside of content area

Color choice for outside of content area

Tagged: 

  • Author
    Posts
  • May 29, 2015 at 5:55 am #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;

    May 29, 2015 at 10:06 am #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.

    May 31, 2015 at 2:27 pm #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.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Scroll to top