Background Color in Theme options won't apply

Support
#1

dear support,
i refer to: https://theme.co/apex/forum/t/cant-change-page-background-color-in-pro/8758/5
i have the same issue with icon! not even the background picture is showing.
i tried the customizer (which in pro should not be touched anymore) and the theme options in the builder.
the code you provided does not fix it. only if i put the color directly in the code. otherwise the builder settings are still being ignored!

i applied this custom css which helps:

body .site,
body .x-site {
background-color: rgba(0, 0, 0, 0.06);
}

but when you remove this code the background color settings from the theme options stop working again.

greetings from your new beta-tester, kai

#2

Hey Kai,

You don’t need custom code. Renew and Icon stacks’ background could be seen if you choose the Boxed Layout design. It worked this way since the early days of X. This is the stacks’ design. If you use transparent background, you will need custom CSS for other parts of the stacks as well. Compare the screenshots below:

With white background:

Transparent:

Also check out our demos.




When designing with X, it is best to compare your design with one of the demos first.

Thanks.

#3

dear christian,
thanks for fast your support - even on the weekend!
i don’t want a transparent background. i just did it this way. i could also use a solid color.
my background color is slightly not white. greyish right now. the content background almost white.
there must be a setting for that background color in the nonbox layout somewhere. no?
and also: why do the background color options in the theme options work when i add this css code and why not when the code is gone? – but wait. now i checked again and the color options don’t work even though the css code is active. that confuses me now even more. but nevermind. i will go the practical way now and leaf the css in. that’s the way it look good to me.
thanks again! kai

#4

I’m sorry I could not answer this question because this is product design related.

This is because the body .site which has a background of white in Renew’s and Icon’s CSS itself so you need a CSS override.

Thanks.

#5

that sounds to me like pro has no color option for the background color. or only if boxed layout is activated. then of course the background color options are confusingly shown in the no-box layout. thanks.

#6

Hello Kai,

Background color on Theme Options works differently per stack. Some stacks has predefined color as stated previously by @christian_y. If you want background color to work regardless of stack, add CSS overrides to body .site.

To understand better, Background Color is added on the body, the main container of header, footer, and content. Now on other stacks, like Icon, inside the body is another container with the class site. This container is where header, content and footer is added. Depending on stack, there is background color set on this site class. That is the difference. See below structure.

Hope this helps.

1 Like
#7

thanks @Lely !
i understand now.
but i must say that having the background color option available does imply that it would work…
maybe you could give a respective hint at the settings INFO box?
thanks a lot, kai

#8

Thanks for your feedback. I’ll post your concern to our issue tracker so our development team could be made aware once they go through the list of reports.

#9

thanks a lot christian!

#10

Glad to see we managed to help.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.