# 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:** 26

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

---

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