Log in Get SwiftGrid →
Not resolved

Color choice for outside of content area

Ultra Theme started by rictans May 29, 2015 2 replies
rictans May 29, 2015 · 5:55 am #1652

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;

Andrew Misplon Puro May 29, 2015 · 10:06 am #1656

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.

Andrew Misplon Puro May 31, 2015 · 2:27 pm #1665

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.

3 posts