Change background colors with css

[KPT]

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;

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

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?

[ThinhDinh]

<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!

[KPT]

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?

[ThinhDinh]

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.

[Darren_Murphy]

@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

[KPT]

@ThinhDinh

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.

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?

@Darren_Murphy

@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

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

[Darren_Murphy]

Here you go:

How to Add a Timer to Your Glide App (plus custom CSS styling)

[KPT]

Fantastic, thank you so much

[ThinhDinh]

@KPT

I assume you inspect the elements once the app is published?

You can do it in the app builder as well.