Site background color

Posted in: ionMag
Post count: 10

I’m using “Stretch row and contents (With paddings)” for the elements on my homepage.

Whenever I want to change the background color of the site from the theme admin panel, the elements would shrink back to Default.

Is there a way to change the background color and keep them stretched with paddings?

Thank you!

Simion C.
Post count: 254

Hi,

If there is a background color or image set, the website will be boxed. This will happen regardless of the row settings, when setting a background
https://www.wpion.com/members/background-settings-overview/

Thanks

Post count: 10

Hi Simion and thank you for your reply.

I forgot to mention I had seen you posting the same response to a similar question earlier on the forum.

I was hoping for some workaround?

Thank you!

Simion C.
Post count: 254

Hi,

Unfortunately there is not. Setting a general background will transform the website to boxed. You could maybe set backgrounds for stretched rows instead, or even blocks
https://www.screencast.com/t/77cSN1k02FjN
Or apply the background with CSS instead of the theme panel, there could be solutions that can be used instead of the theme panel to apply a background.

Thanks

Post count: 10

OK, thank you. Let me play around with it.

The rationale was, if you want to add a photo as a background, which would take up additional space, then yes, it would box the website but if I want to change the current white with another color, I thought it shouldn’t be a problem.

Speaking of which, can you please give me a hint where I can find the background color in the CSS code?

I tested changing this in style.css but it didn’t work.

*/
body {
visibility: visible !important;
background-color: #fff;
}

Thank you!

Simion C.
Post count: 254

Hi,

So you would like to change the default white color of the containers, after setting a background image. Try a code like this for example, maybe add more elements in it
https://www.screencast.com/t/HcErhKib
https://www.screencast.com/t/wacOccIwwB
https://www.screencast.com/t/dJkvP2Ig

.td-header-menu-wrap,
.td-main-content-wrap {
background-color:grey;
}

Use the browser inspector to identify these elements, with it you can see where the color is coming from and create your custom code
https://www.screencast.com/t/7zi0wcSd4g
Then use the codes in Theme panel->Csutom CSS, or child theme.

Thanks

Post count: 10

Hi,

Just a clarification, I don’t want to add an image. Just to change the default white background color of the site.

And thank you! Let me go ahead and check your code.

Before I do though, I thought there would be a way to edit the main background of the entire site at one go somewhere, rather than element by element? Is that possible?
I checked the inspector but didn’t find it.

Thank you!

Simion C.
Post count: 254

Hi,

A setting for this is not available at the moment, it could only be done with code. Each element or container you want to customize will have to be added in the code.

Thanks

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.