# 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:** 20
**Page:** 2

<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, 6:14pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/21 "2021-06-04T18:14:32Z")

</div>

https://www.loom.com/embed/a8da39a25fdf4078baa9cbb44fc11771

## Summary

* * *

> **Full Mobile/Destop Background**
>
> ```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(30%);
> background-image: url("https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/xmLP8vaObRbgV6VTggV0/pub/28Q2XMiX1jNfyFWbL0l0.jpg"); 
> background-size: cover;
> background-position: center center;
> }
> 
> ```

* * *

> **Modal/Pop-up (gradient stylish)**
>
> ```auto
> /* Blurry */
> <a style="top:180px;">
> <div style="
> position:fixed;
> top:0px;
> left:-5%;
> margin: 0%; 
> padding:100vh;
> background-color: rgb(0 0 0 / 70%); 
> backdrop-filter: blur(4px);">
> </style></div></a>
> 
> /* Box */
> <div style =" position: fixed;
> top: 250px; 
> width: 94%;
> max-width:680px;
> opacity: 1;
> margin-left: -5px;
> height:190px;
> background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
> border-radius: 10px;
> padding-top: 1%;
> padding-left: 7%;
> padding-right: 7%;
> box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
> text-align: center;
> z-index:0 !important;">
> <br><br>
> <h3><font color=#fff>Perfil Enviado</h3>
> <div style="white-space: break-spaces;"><font color=#fff>Seu perfil será analisado e em breve você poderá acessar nossa plataforma.<br><br> <b> Equipe LíderNegra
> <bg>
> <a style="position: fixed; 
> width:100%; 
> top: 0%; 
> right: 0%; 
> left:0%;
> z-index:-1; 
> opacity: .4;">
> <div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">
> 
> </style></span></pre>
> 
> ```

* * *

> **No Nav-bar Title**
>
> ```auto
> <pre><div><style>
> [data-test="glide-app-bar"] :nth-child(1) {
> backdrop-filter: blur(1px);
> background: transparent; 
> -webkit-backdrop-filter: blur(1px);
> }
> #app-root div[opacity='1'] {
> color: transparent; 
> }
> 
> ```

* * *

> **Stylish Header - Rounded Border**
>
> ```auto
> <a style="position: absolute; width:100%; top: 105px; right: 0%; z-index:-1; opacity: 1;" target="_blank">
> <div style="background-color: #f5f5f5; padding-bottom: 90vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div></a> 
> 
> <a style="position: absolute; width:100%; top:-120px; right: 0%; z-index:-2; opacity: 1;">
> <div style="background-color: #101010; margin: 0%; padding-bottom:330px;">
> <pre><span><style>
> [data-test="glide-app-bar"] >* {
> backdrop-filter: blur(0px);
> background: transparent; 
> -webkit-backdrop-filter: blur(0px);
> }/*----- hide nav bar ------*/
> #app-root div[opacity='1'] {
> color: transparent; 
> }
> 
> ```

* * *

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [June 4, 2021, 6:47pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/22 "2021-06-04T18:47:24Z")

</div>

Thanks for taking the time to address this, @Jason. I’m sure this thread will become pretty long, pretty quickly.

### CSS Use: More efficient use of space

Every component takes up visual real estate. I use CSS often to adjust the margins/paddings/locations of components to make better use of space so that content isn’t “below the fold”.

### Before:

 ![Screen Shot 2021-06-04 at 2.43.21 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c918b8eefb38ce1f457ff64ebe2acb62884cab2.png)

### After:

 ![Screen Shot 2021-06-04 at 2.43.29 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/12729e5b8e3eba2b8399cbd71fb89e0d85b93101.png)

```auto
<pre><span><style>
[data-test="app-summary"] {
margin-top: -90px;
}

[data-test="glide-app-bar"] :nth-child(1) {
background: transparent !important;
}

[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background:transparent;
    -webkit-backdrop-filter: blur(2px);
    }

#app-root div[opacity='1'] {
      color: transparent; 
    }

[data-test="app-summary"] >:nth-child(1) {
height: 150px !important;
}

[data-test="app-summary"] >:nth-child(1) >:nth-child(1) >:nth-child(2) >:nth-child(1) {
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3)) !important;
}

//[data-test="app-summary-title"], [data-test="app-summary-subtitle"] {
text-align: center;
}

.tile-inner {
width: 50px;
}

.tile-image-area {
border: solid 4px white;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 40px;
}
.inner {
grid-template-columns: repeat(10, 25px) !important;
}

[data-test="app-button-view"] {
margin-top: -50px;
position: fixed;
right: 0;
padding: 0 20px;
min-height: 35px;
}

```

---

<div class="post-metadata">

### Author: ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)
#### Post date: [June 4, 2021, 6:58pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/23 "2021-06-04T18:58:48Z")

</div>

**NO CODE** is the future of CODE 🙂

---

<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, 7:05pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/24 "2021-06-04T19:05:58Z")

</div>

> [@Jason](#):
>
> 1. Give me a description of what you are using CSS for.

Almost two years ago when I met Glide I had already met and seen some other platforms no code but what did they sin? Design. In other words, today your platform is one of the most beautiful in terms of mobile design because I know that in the future it will also be for the desktop.

As you said Jason, you still have a lot to improve and we understand that. You are not doing anything wrong.

I started using some CSS on my own, which to improve the design of the apps, and also because of some requests from some customers, I started researching how to modify and use Glide’s own features so we can improve the user experience even more.

And as I developed more apps for more clients, I started to realize that always using white backgrounds with the same design, it gets a little tiring.

Remember that at the beginning of Glide I pissed you off about various things and one of them was asking you to have actions in images? You asked me why, and I showed you that I used images to make the app even more “beautiful”.

But as I showed above, many times these images or colors other than white or a dark gray (dark mode), would need to occupy the space of the Nav bar too, or stay as a background.

And even if it sounds like it, I’m not a CSS user - since I have over 150 apps on my account, and not even 20% have code. I currently use these apps to improve these little details, and also to build unique apps! This is why I use them the most.

* * *

**Before | After**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d982654ec8444e884ec30925896e1dc2b7fde840.jpeg)

**Before | After**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/f/9fad6205d7f8fb7d7a5876c3df4976262ab6f40a.png)

**Before | After**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d0ac82b17ea7fb9e9354f7c07245b18837f9fbf8.jpeg)

---

<div class="post-metadata">

### Author: ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)
#### Post date: [June 4, 2021, 8:01pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/25 "2021-06-04T20:01:05Z")

</div>

Background rocks here , i’m happy !

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [June 4, 2021, 9:46pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/26 "2021-06-04T21:46:57Z")

</div>

I think @Manu.n and @Lucas_Pires have covered a lot of what I have ~~stolen~~ borrowed, so I’ll just share a few of the other modifications I have done.

* * *

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/6/266971f7e14dca4d0b33f95b7e52b8103bf0f0f1.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/8/1828e484b0be3811ccd4702be057fa8a63789b9f.jpeg)

This is to apply a gray background color to the cards in the log history list:

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

```

This is to apply a shadow behind the tile with the vehicle image:

```auto
<pre><span><style>
[data-test="tile-item"] {
width: 100%;
margin-left: 0%;
margin-top: 10px;
margin-bottom: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 5px !important;
}
</style></span></pre>

```

This is to create the separator with the curves between the chart and the log history. Similar to what @Lucas_Pires has done with the curved background at the top of the screen:

```auto
<a style="position: absolute; width:100%; right: 0%; z-index:-2; opacity: 1;">
<div style="background-color: #960000; margin: 0%; padding-bottom:100px;"></div>
</a>

<a style="position: absolute; width:100%; right: 0%; z-index:-1; opacity: 1;" target="_blank">

<div style="background-color: #ffffff; padding-bottom: 30px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-origin: content-box;"></div>
<p>
<div style="background-color: #ffffff; padding-bottom: 40vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div>

 </a>

```

This is what I’m using for the modal popup:

```auto
<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%; 
padding:100%;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>

<!-- Box -->
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#000>Is this the correct amount?</h3>
<h1>{amount}</h1>

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left:7%;
width:30%;
max-width:180px;
}

.fab-target >* {
display:none;
}

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

```

* * *
Here is a hint component that that I've modified to become fixed so it's always visible in the same position while scrolling.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/27f00447ad8a192002c5ffd2e8ff3059b617bd5f.png)

```auto
<pre><span><style>
[data-test=app-hint] {
position:fixed;
 top: calc( var(--safe-area-inset-top) +75px);
 background-color: rgba(0, 0, 0,.2) !important;
 backdrop-filter: blur(8px);
width: 92.1%;
text-align: center;
z-index: 1}
</style></span></pre>

```

* * *
This one is completely gross and is some massive manipulation on a cards style list to get more columns. I think if we had the option for more tile or card columns, then this could largely be avoided.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/1/01aadfcfd4c032f2aa9562da5a845e53651f6b69.jpeg)

```auto
<pre>
<span>
<style>
.inner {
    grid-template-columns: repeat(7, 53%) !important;
    column-gap: 0px !important;
    padding: 0px 0px !important;
    width: 27%;

}
.card-title {
    text-align: center;
}

.card-title:nth-child(even),
.card-title:hover {
    border-radius:20px;
    background-color: #58656F;
    color: #fff !important;
    font-weight: 700;
    cursor: pointer;
}
.card-subtitle {
    margin-left: calc(10px+10%);
    margin-top: -25%;
}
[data-test="app-horizontal-list"] {
padding-top: 1px;
padding-bottom: 1px;
}

[data-test="app-avatar-wrap"] {
font-size: xx-small;
}

.card-title-container {
    height:5px !important;
    margin-bottom: 10px !important;
}

.bottom-area {
    padding: 0px !important;
}

.sts-row {
    height: 20px !important;

}

[data-test="app-button-view"] {
min-height:0px;
height:0px;
margin-top: 0px
}

.ReactVirtualized __Grid__ innerScrollContainer {
height: 100px;
}
</style>
</span>
</pre

```

* * *
I also create dynamic html tables with some mild css styling, but I'm not sure if that applies to this thread.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/674a4be3610020bc3c97f721c44df4a96816c554.png)

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [June 4, 2021, 11:39pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/27 "2021-06-04T23:39:09Z")

</div>

## Use CSS to reveal hidden text.

I’ll often use CSS to reveal text that’s cropped in Basic Tables, Tile Titles, etc.

### Before:

 ![Screen Shot 2021-06-04 at 7.34.31 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7f81b91d5aff80107a1243ac3e0623688314c275.jpeg)

### After:

 ![Screen Shot 2021-06-04 at 7.34.09 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7fbcdb627024455d0fe7b9d875764b9966771b44.jpeg)

```auto
<pre><span><style>
[data-test="app-st-item-label"] {
white-space: break-spaces !important;
}

.sts-row {
    height: auto !important;
    padding: 10px 0;
}

```

@Jason

---

<div class="post-metadata">

### Author: ![Steven](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/steven/32/15309_2.png) [@Steven](https://community.glideapps.com/u/Steven)
#### Post date: [June 5, 2021, 12:24am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/28 "2021-06-05T00:24:00Z")

</div>

I like how @Robert_Petitto did these overlapping icons using CSS.

![users](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/06c2e5c8687586babcd1f4cfa25bb9853f756560.png)

I think the code he used is

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a3598fdb01a0418237f990232d6cd4b93a695668.jpeg)

---

<div class="post-metadata">

### Author: ![Steven](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/steven/32/15309_2.png) [@Steven](https://community.glideapps.com/u/Steven)
#### Post date: [June 5, 2021, 12:27am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/29 "2021-06-05T00:27:35Z")

</div>

The tag styling, tab functionality, button anchoring and offsetting of lists in this image is pretty slick too. In YELLOW…

Here are some CSS design goals that I thought were really good:

> [@Design Wishlist](https://community.glideapps.com/t/design-wishlist/24453):
>
> I wanted to compile a list of design features that I feel are missing from Glide. Here are some design features that would go a long way and would freshen things up… 1. Ability to place icons within a detail page (like the image below) that perform actions or hide/show elements on the detail page 2. Ability to change the app background or section and/or place vertical anchored icons in any of the screen corners (like below) Ability to place category tags that are sized i…

 ![design](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a17033b2cb8a0756f943b6070db846f654dbeb3.png)

---

<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: [June 5, 2021, 2:47am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/30 "2021-06-05T02:47:23Z")

</div>

Hi again, @Jason.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

Above is the link as promised. @Lucas_Pires has posted some in this thread.

We started this a while ago and plan to integrate more things in here (let’s say sharing Integromat scenarios, how to use them and attach the blueprint) so the community can learn and use them in their own apps.

At the moment, each CSS card has a code snippet and a sample image of how it looks like.

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/f/4f6b258127500462ab6d910fa7972eea6ffb5d32.jpeg)

We have also added an Inspiration list, those are nice designs I took mostly from Dribbble that I plan to try and implement at some point.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/472d60acda80482ca32d5b72e94e5670?v=20a572661fe14e4f9b7f29d0017318f1)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/e/dec2cad5cc8f4ebf2f9af52946ac742d4442402c.jpeg)

Edit: Forgot to update it to public, if you can’t access it please tell me.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [June 5, 2021, 3:16am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/31 "2021-06-05T03:16:23Z")

</div>

I like the principle of using the notion.so as a memo for CSS 👏 👏 👏

---

<div class="post-metadata">

### Author: ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)
#### Post date: [June 6, 2021, 8:13am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/32 "2021-06-06T08:13:45Z")

</div>

I’m using it , planning to be honest , for having an animated background , i would like also to color the audio player , not the background of it , using the faboulous code book but now its not working for me. Would be so great to have a css section on all lists and components to give life to Glide or at least a background option.

ps.Thanks to Uzo for pointing me out with the initial code

This way I can have an array of audio players

```
[data-test="app-audio-wrapper"] { position: ; background-color: #8FE147 ; color:yellow; width: 100%; max-width: 700px; flex-shrink: 0; bottom:80px; text-indent: 0; padding: 15px 5px 5px 5px; box-sizing: border-box; z-index:1; } ps.sunday's experiments!!!! ;) this way you can have only the play and pause button ( no download ? I hope so....seems so ,uiiii :slight\_smile: )
```
[data-test="app-audio-wrapper"] { position: ; background-color: rgba(255, 255, 255, 0) ; color: #8FE147 ; width: 0%; max-width: 700px; flex-shrink: 0; bottom:80px; text-indent: 0; padding: 15px 5px 5px 165px; box-sizing: border-box; z-index:1; } changing the padding and the hex color you can have something different and you can also put another rich text editor together and put a makebackground.io ( loading.io) ( spread guys !!they deserve it !!! ) as i told first for having beautiful svg there !!!! And if you use the great sirv.com and reach their support ( very very gentle ) you can remove the download option as server side so if someone tries to download your files will get a 403! ps. 3 main issues : 1.this way all players can play together , if you press all play buttons ; 2.if you put an image on top it disappears ( appears only on mouse over, didn't check the real beahviour on the phone just on the editor loaded in Safari-Catalina) if the background svg in the rich text editor is there ;3. without transports you have no controls so when it pauses it doesn't step back to the beginning , its tricky but its a beginning , maybe we could enlarge till main disappear the three dots needed for the download outside of the screen ( yes I hate the download option ! ) Have a nice Sunday , @Jeff , @Uzo , @FabioLeanzi and @Manu.n , thank youuu !!!!! ps.sadly is not working on the mobile side ( Android and iOs...) ps.2 i made a new tab with only the audio player ... no rich text no css and the player doesn't show up..., as far its not a pro component I don't know then ( by the way guys I hope it helps ! )
```
```

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [June 6, 2021, 10:09am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/33 "2021-06-06T10:09:08Z")

</div>

For use in arrays. remove position and bottom from the code, so they don’t overlap each other.

---

<div class="post-metadata">

### Author: ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)
#### Post date: [June 6, 2021, 10:19am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/34 "2021-06-06T10:19:16Z")

</div>

Thanks, I will .Can you try ? On my devices now I can’t see any audio players at all , maybe mine its just a mess and the player just declared WAR to me ; ) !

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [June 6, 2021, 12:30pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/35 "2021-06-06T12:30:58Z")

</div>

here you go:

[LINK](https://sa-test.glideapp.io/dl/ewAiAHQAIgA6ADcALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBBAEsAagBWAHYAbgBwAG8AbgBHAG8AdABRAGUARQBZAGwAdAA5AHIAIgAsACIAcgAiADoAIgBmAC0AUAB2AG8AYwBvADIAUQBiAHkANQBBAG4AZgBYAG0AZwBpAHgATQBnACIALAAiAG4AIgA6ACIAYQB1AGQAaQBvACAAcABsAGEAeQBlAHIAIgB9AA%3D%3D)

 ![Screen Shot 2021-06-06 at 7.02.24 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/d/9deef124babcc16df33bccb9015c8b960856a965.png)

---

<div class="post-metadata">

### Author: ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)
#### Post date: [June 6, 2021, 12:40pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/36 "2021-06-06T12:40:57Z")

</div>

Uzo and Manu masters of Css on Glide!!!

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [June 7, 2021, 10:50am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/37 "2021-06-07T10:50:23Z")

</div>

Hi Lucas,

Would love to better understand how you set css for specific component on the page.

Can you share an example of how I should use the css you posted?

Thanks

---

<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: [June 7, 2021, 11:54am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/38 "2021-06-07T11:54:45Z")

</div>

That CSS targets the component by its order number on the screen, top-down, visibility conditions taking into account. The best use case is you want to change a component on the screen, but not its other siblings (let’s say the 1st hint text but not the 2nd or 3rd).

Assuming you know the specific characteristics of the component you want to edit already, and it’s at first place, you can be confident putting number 1 in there and it will never fail to do its work when it’s visible.

However let’s say you want to change a component at number 3, but your component number 2 has a visibility condition. When it’s visible your specific code will work, but when your component number 2 is not visible then your “3” will become “2”, thus break the logic.

So please think through about all the possibilities to construct the right rich text components and its visibility conditions.

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [June 7, 2021, 12:27pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/39 "2021-06-07T12:27:26Z")

</div>

Thank you. I think I understood. Will play with this and see how it works

---

<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 7, 2021, 2:42pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/40 "2021-06-07T14:42:56Z")

</div>

@Jason another little sugestion/variation of separator component

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/620):
>
> Check this out! Using CSS to turn our Separator: Small into a divider that rounds out the components above and below! Note, this only works with Light Theme. Dark theme apps should use this as the background/box-shadow colors: rgb(30, 34, 43); \<pre\>\<span\>\<style\> [data-test="app-hr"] { background-color: rgb(246, 246, 246); } [data-test="app-hr"]:after { content: ""; position:absolute; top:-40px; right:0…

[Previous page](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641.md?page=1)

[Next page](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641.md?page=3)