# CSS code to change the color of header and bottom menu

**URL:** <https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805>\
**Category:** Ask for Help\
**Created:** [March 27, 2021, 8:09pm UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805 "2021-03-27T20:09:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Petr\_Shemyagin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/petr_shemyagin/32/59902_2.png) [@Petr\_Shemyagin](https://community.glideapps.com/u/Petr_Shemyagin)\
**Post date:** [March 27, 2021, 8:09pm UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/1 "2021-03-27T20:09:01Z")

</div>

Hey everyone!

I am wondering whether anyone has created a CSS code to change the colour of bottom menu bar and header part of the tab?

I tried to find it in the Codebook app and in the community but cannot find it.

Would be really greteful if someone could help!

---

<div class="post-metadata">

**Author:** ![Petr\_Shemyagin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/petr_shemyagin/32/59902_2.png) [@Petr\_Shemyagin](https://community.glideapps.com/u/Petr_Shemyagin)\
**Post date:** [March 27, 2021, 8:50pm UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/2 "2021-03-27T20:50:53Z")

</div>

I have actually found a way to do that already

But now I cannot find a way to change the colour of a card. Does anyone know how to do that?

---

<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:** [March 27, 2021, 11:27pm UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/3 "2021-03-27T23:27:14Z")

</div>

I believe you want to change the background color of the bottom area.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e59fda61cadf6ca60614a3b89aab82d2f11ec98b.png)

Here’s the code.

```
<pre><span><style>
[data-test="card-item"] .bottom-area {
background-color: gold;
}
```

---

<div class="post-metadata">

**Author:** ![Petr\_Shemyagin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/petr_shemyagin/32/59902_2.png) [@Petr\_Shemyagin](https://community.glideapps.com/u/Petr_Shemyagin)\
**Post date:** [March 28, 2021, 4:20pm UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/4 "2021-03-28T16:20:33Z")

</div>

Amazing! Thank you so much! That works!

---

<div class="post-metadata">

**Author:** ![vijay](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vijay/32/3259_2.png) [@vijay](https://community.glideapps.com/u/vijay)\
**Post date:** [May 12, 2021, 3:30am UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/5 "2021-05-12T03:30:17Z")

</div>

Is there a way to change the color of only some cards in an inline list based on a condition?

Is there a code that can detect specific card items and change the background 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:** [May 12, 2021, 9:37am UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/6 "2021-05-12T09:37:24Z")

</div>

No, I don’t think so. I did want to do something like that a while ago but couldn’t find a way.

---

<div class="post-metadata">

**Author:** ![vijay](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vijay/32/3259_2.png) [@vijay](https://community.glideapps.com/u/vijay)\
**Post date:** [May 12, 2021, 10:32am UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/7 "2021-05-12T10:32:55Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> [data-test="card-item"] .bottom-area {
> background-color: gold;
> }
> 
> ```

Ok. One more help, in the below CSS Code:

```
[data-test="card-item"] .bottom-area { background-color: gold; If I want some nth item to be only gold, let's say the 3rd item to be gold, what will be the code?
```

---

<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:** [May 12, 2021, 10:35am UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/8 "2021-05-12T10:35:54Z")

</div>

Maybe you can try this.

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/360):
>
> \<pre\>\<span\>\<style\> div[id\*='screenScrollView'] \> div \> div:nth-of-type(#) { -webkit-transform: rotate(-90deg); width: 42px; margin-left: auto; margin-top: 60%; } Replace the # in div:nth-of-type(#) as the number of the component in th screen. Eg: div:nth-of-type(3)

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:52pm UTC](https://community.glideapps.com/t/css-code-to-change-the-color-of-header-and-bottom-menu/24805/9 "2024-01-17T16:52:16Z")

</div>