[Abby MParticipant]

Hello!

I’m currently using the Renew Stack with the Renew Child Theme at full-width.

I have been playing around with this for awhile, and am not getting anywhere so I’m assuming I need custom CSS to set a background, I’m just not sure what CSS or where to put it. I want the blog’s background to be a pattern, not #ffffff.

Thanks!

[KyleKeymaster]

Hiya Abby,

I normally can’t help with support requests, but this is one I can chime in on 🙂 Either way, we can get a solution for you that is desirable, just wanted to first walk you through why it is setup the way it is.

Currently, only the Integrity Stack can have a background pattern or image show up when fullwidth is activated. We did this to give some individuality to each Stack, and this is one of the unique features to Integrity. You can absolutely set a background on Renew or Icon if the layout is set to boxed, it’s only in fullwidth where this applies.

We could do a better job of explaining that in the documentation, so I’ve already made a note to have that addressed.

So you more or less have two options. 1) Switch to Integrity fullwidth then be able to use any background texture/pattern or 2) Keep Renew and add some custom CSS. There will be a few things you’ll need to update but our guys would be happy to help provide you with the required changes since this was an intentional omission from Renew due to the flat styling, etc.

Hopefully this gives you a little more insight into why this was setup this way. We look forward to hearing back from you as to how you’d like to proceed.

Also, as an aside, I love that passage in Isaiah listed in the graphic in your sidebar. A great passage and reminder as we move into 2014. Looking very forward to seeing your finished site!

Keep being an “Oak” 🙂
Kyle

[Abby MParticipant]

Thanks for the reply, Kyle! Eight Oaks is a very special project, and the X theme has made the process of building their website quite enjoyable and easy! Seriously life-changing.

I have played around with the different stacks, and I think Renew is what I’d like to stick with. Whatever CSS I need to implement to make it happen, I’m happy to do it!

Thanks!

-Abby

[RubinKeymaster]

Hey Abby,

before I can help you with this here are some questions:

can you show me the pattern/give me the link to that pattern.
Should the pattern cover the whole background or should the “real” content area stay white so the text is readable?

Once I know that I can give you further instructions. Thanks!

[Abby MParticipant]

Hello!

The pattern:

The pattern should cover the whole background, so yes also the content area.

Thanks!

[KoryKeymaster]

Hey Abby,

Thanks for that, this helps a lot! 🙂

So the element you’re going to want to target is the .site div. You can add your background pattern using the following CSS:

.site {
  background-image: url(http://8oaks.org/wp-content/uploads/2013/12/cream-bg.jpg);
  background-repeat: repeat;
}

After doing this, you might have some other things that you need to adjust based on how you have things set. For example, the icons for the blog posts have a white background behind them normally based on the original intent of the design, so you could remove that with the following:

.entry-title:before {
  background-color: transparent;
}

There might be some other things based on the widgets and everything you’re trying to use. If you need to figure out an element you’re trying to target, try right clicking in Chrome and selecting Inspect Element. This will bring up a popup in your browser that will allow you to scroll through the markup of your theme and see what CSS is applied to it in the right hand side. You can even use this to live-edit some changes you want to see and then take that and implement the custom CSS in your theme when you’re done.

Of course, we’re always here to help you if you need anything, just offering it up as another potential solution so that you don’t always have to wait on us to get a response back to you!

Thanks again and let us know if you need further clarification!

[Abby MParticipant]

Thank you so much!!

[KoryKeymaster]

No problem. 🙂

[markpevansParticipant]

Has this issue been fixed for renew as I can see that you have full width colour segmants on the http://theme.co/x/demo/renew/2/ demo

[Kosher KMember]

Hi There,

The Renew 2 demo home page was created using (No Container | Header, Footer) Template,

It is constructed with multiple content band with a container and each content band had their own different background.

I hope that clarifies.

Have a great day

[markpevansParticipant]

Ok cool. Thanks so much, I will give this a go 🙂

[Kosher KMember]

No Problem,

Cheers

[Author]

Posts