# Tell Glide how you use CSS

**URL:** <https://community.glideapps.com/t/tell-glide-how-you-use-css/27641>\
**Category:** General\
**Created:** [June 4, 2021, 4:09pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641 "2021-06-04T16:09:41Z")\
**Posts on this page:** 1\
**Showing post:** 18

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 4, 2021, 5:57pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/18 "2021-06-04T17:57:23Z")

</div>

https://www.loom.com/embed/954f9219eeba4754a4c20fe30936676c?sharedAppSource=personal_library

## Summary

> **One the Most important and used**
>
> - Styling a Component by the order in the Screen
> 
> ```auto
> <span/>
> <style> /* Replace # for the number of the component in the screen */
> div[id*='screenScrollView'] > div > div:nth-of-type(#) { 
> 
> [here I set what I wanna change]
> 
> }
> 
> ```

* * *

> **Nav bar, Background image, Moving up some components..**
>
> - Icon in Nav-bar
> - Transparent Nav-bar
> - Hide Nav-bar name
> - Bringing Image (2nd component) up
> 
> ```auto
> <span/>
> <style>
> [data-test="nav-bar"] {
> content: "";
> display: flex;
> background-image: url(https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Hyc06jcwxpwF0p3GNTZi/pub/EpMfBYoYysfDFBqRaLA5.png);
> background-size: 45px 45px;
> background-repeat: no-repeat; 
> background-position: center, center;
> ;}
> [data-test="glide-app-bar"] >* {
> backdrop-filter: blur(0px);
> background: transparent; 
> -webkit-backdrop-filter: blur(0px);
> }
> #app-root div[opacity='1'] {
> color: transparent;
> }
> div[id*='screenScrollView'] > div > div:nth-of-type(2) {
> z-index: -2 !important;
> opacity: 1 !important;
> margin-top: -145px !important;
> }
> div[id*='screenScrollView'] > div > div:nth-of-type(3) {
> z-index: 1 !important;
> margin-top: -95px !important;
> margin-bottom: -65px !important;
> }
> 
> </style>
> 
> ```

* * *

> **Color of 2 items independently - Inline Card Style**
>
> - Changing colors of `Avatar Text` dynamically by profit (green or red)
> 
> ```auto
> <pre><span><style>
> div[id*='screenScrollView'] > div > :nth-of-type(8) :nth-of-type(1) .floating-overlay-text {
> color: #COLOR1;
> font-weight: 800;
> }
> div[id*='screenScrollView'] > div > :nth-of-type(8) :nth-of-type(2) .floating-overlay-text {
> color: #COLOR2;
> font-weight: 800;
> }
> 
> ```

* * *

> **Title Color - Inline List Style**
>
> - Blue Subtitle in a List style Inline list
> 
> ```auto
> <pre><span><style>
> [class="textContainer"] .textDetailStyle {
> color: #08A8BF;
> font-weight: 800;
> }
> [class="textContainer"] .textCaptionStyle {
> font-weight: 600;
> font-size: 0.95rem;
> }
> 
> ```

---

_[View the full topic](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641)._