# Change background colors with css

**URL:** https://community.glideapps.com/t/change-background-colors-with-css/50960
**Category:** Ask for Help
**Created:** [October 5, 2022, 9:29pm UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960 "2022-10-05T21:29:00Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [October 5, 2022, 9:29pm UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/1 "2022-10-05T21:29:00Z")

</div>

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.](https://www.notion.so/glidecommunity/Glide-Community-Resources-8f4cef535db147db83f49f088a47407e)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

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

```auto
<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;
}

```

 ![Screenshot 2022-10-05 at 22.34.29](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8be523ae4b7511ffec9be0aedd16f08210af7ad2.jpeg)

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="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 6, 2022, 1:04am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/2 "2022-10-06T01:04:49Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85e8903d5c7eb816efefa08a57379d12d1ef165b.jpeg)

---

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [October 6, 2022, 5:40am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/3 "2022-10-06T05:40:55Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 6, 2022, 7:23am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/4 "2022-10-06T07:23:25Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [October 6, 2022, 7:45am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/5 "2022-10-06T07:45:19Z")

</div>

@KPT - I know that @Darren_Alderman 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 😉

---

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [October 6, 2022, 10:29am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/6 "2022-10-06T10:29:50Z")

</div>

> [@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

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [October 6, 2022, 10:42am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/7 "2022-10-06T10:42:35Z")

</div>

Here you go:

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cd3e4197fdea4642ca6b54c93322e8e71e730d78.jpeg "How to Add a Timer to Your Glide App (plus custom CSS styling)") ](https://www.youtube.com/watch?v=SAqqIMlsWCk)

---

<div class="post-metadata">

### Author: ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)
#### Post date: [October 6, 2022, 10:46am UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/8 "2022-10-06T10:46:00Z")

</div>

Fantastic, thank you so much

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 6, 2022, 12:11pm UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/9 "2022-10-06T12:11:39Z")

</div>

> [@KPT](#):
>
> I assume you inspect the elements once the app is published?

You can do it in the app builder as well.

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [October 7, 2022, 12:11pm UTC](https://community.glideapps.com/t/change-background-colors-with-css/50960/10 "2022-10-07T12:11:48Z")

</div>

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