Change background colors with css

It seems there is alot of people who want to change the background color of the app and what I can gather the only way sofar is with unsupported CSS.

I found this great great ressource;

and used the below snippet of CSS to turn my app background into a solid color

<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
width: 100%;
height:100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
filter: brightness(100%);
background: #efede0; 
background-size: cover;
background-position: center center;
}

Which works great, but is there a way to also change the top and bottom navbar so the white the also changes color?

<div class="background"></div>

<pre><span><style>

.background {
position: fixed;
margin-top:0;
width: 100%;
height:100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
filter: brightness(100%);
background: #efede0; 
background-size: cover;
background-position: center center;
}

</style></span></pre>

<pre><span><style>

[data-test="glide-app-bar"] >div {
background: #efede0 !important; 
}

[id="tabBar"] {
background: #efede0 !important; 
}

Great to see our resource is of help!

4 Likes

It’s a wonderful great easy to understand ressource. Is there a way to find out how to target the different parts of the screen - like the classes and id’s?

The only way is to use the “Inspect Element” feature in each browser. You can read the snippets of code in the Notion library, take them as an example and find the corresponding elements, then find new elements yourself.

@KPT - I know that @darren did a quick “how-to” use browser dev tools to identify Glide component classes in one of his tutorials, although I don’t recall exactly which one it was. It was something to do with modifying the appearance of the Stopwatch component.

You could watch all of his tutorials one by one until you find it. If nothing else, you’d learn a lot about Glide :wink:

That was my line of thought. Would be good to be able to just be able to play around with all the magic, without constantly having to disturb the CSS wizards.
I assume you inspect the elements once the app is published?

If anyone know which one it is it’ll be awesome if I could be pointed in the direction. Otherwise I’ll take the long way though them all. Seems like a really good tutorial resource

Here you go:

2 Likes

Fantastic, thank you so much

You can do it in the app builder as well.

1 Like

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