Is there an easy option to change our app's background colour?

Hi all,

I want to use a dark background for my entire app and

  • I cannot find an option to set this for all pages/blocks without having to set this individually
  • when I do it by hand, I still see an issue of white zones when the page is not high enough (see screenshot)

Looking forward to see your ideas!

1 Like

I spent some time this morning playing around with CSS to see if I could get something to work.

It seems like a path to explore would be to add some custom code to the Code Inside Header section of your site along the lines of this:

<style>
* {
    background-color: #ff0000;
}
</style>

I hasten to add that this CSS is not correct - you will need to experiment with replacing the * with a more precise selector. The approach I was taking was to set the background color of one block, then use the Chrome debugger tools to explore what that did to the CSS on the page, then try to reproduce that selector in the site settings code. I didn’t get far enough to offer a solution but if you are able to experiment further with this approach, you might find it!

Thanks for the help, I’ll try to play with this !

Curious if you ever found an answer here? I have the same problem as you (weird white zones depending on size of blocks)!

1 Like

Has anyone found a solution here?

@joshuab share your app with me feel free to DM with a page link I will share a CSS back…

@joshuab you can try to add this into app settings custom code header area

<style>
html {
  background-color: #283f44;
}

body {
  background-color: #283f44;
}
</style>

That worked, thanks!

1 Like

Is this solution still working? It doesn’t seem to be…

Can you try to add the following css in the app settings => custom code => code inside header

<style>
#page-content {
  background-color: #EBEBEB; /*#EBEBEB to be changed */
}
</style>

PS: What are you trying to perform exactly? As the background color can be set in the theme settings

2 Likes

Hello there !

I have a similar problem with background colour on a metric block into a 2 division container.

My theme is set with white background colour, but for a specific page I need it black.

I made my way around with all other element of the page but this one… :disguised_face:

It stay white what ever custom code I use, I would be glad to get help there !

Capture d’écran 2024-11-27 aĢ€ 11.14.28

Thanks
Franck

Did it !

you to go look for the selector that corresponds with the background color in styles.

Then in custom code for the specific page where the container dont switch colour just copy paste the all selector and choose your background color.

<style>
[data-spr-block-parent-id="1aa90613-cb8f-4931-aaa7-c427b5b8c59a"] .b47fa8f_15bqpe66 
{

  background-color: #000000; /*#000000 to be changed */

}
</style>