Customizing the area beyond the wrapper

Travelify
1

Hi

I can’t seem to set a colour on the area outside the wrapper.

The code inspector I use gives this info:
body.custom-background {
background-color: #FFF;
}

Where and how can I set another colour (the same as for the wrapper which can be set in the customizer)? In Travelify Other Options custom CSS can be added I know but how do I get this to work?

See screenshot. The white should become the colour of the wrapper.

Arnold

2

Hi Arnold,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Customize -> Travelify Other Options

html body.custom-background {
  background: #CDC6B3;
}

Best Regards,
Movin

3

Hi Movin,

Ouch. I must have been as blind as a bat with a broken radar.

In the theme’s Customizer - in the Colours section - the background colour can be set! I’m sure I must have seen this setting earlier on but never came back to it until now.

In the inspectors I use I found the class you also suggest but I couldn’t get this to work through the custom css method, whichever code variant (including yours) I applied there.

Thanks for answering anyway. Much appreciated.

Arnold

4

Hi Arnold,

Yes you are right that there was an option to set the background color as mentioned in the section “3. Custom Background” on the following page.

But in the latest version of the theme there is only the option to set background image on the following path and not the background color.

Admin Area -> Apperance -> Customize -> Background Image

The background color option will be added again in the future version of the theme.

In the meanwhile you can use the CSS code solution that i have shared with you.

I noticed the CSS solution that i have shared above only works when you have set the background image so i have developed the following CSS code which works regardless whether the background image is set or not.

html body {
  background: #CDC6B3 !important;
}

Please try using this updated CSS code and if for some reason it doesn’t work for you then please share your site URL so that i can troubleshoot it.

Regards,
Movin

5

Thanks Movin for the advice. I sorted this out as you can see here:

null

6

You are most welcome here :slight_smile: