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

<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 17, 2022, 12:34pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/101 "2022-10-17T12:34:23Z")

</div>

I think it’s a request and the screenshot is from another tool.

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 21, 2022, 6:39pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/102 "2022-10-21T18:39:45Z")

</div>

Hello! Please, how can i get access to this community for sharing some tricks? 🙏

---

<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:** [October 21, 2022, 6:42pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/103 "2022-10-21T18:42:13Z")

</div>

you have access lol… just share it.

---

<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 21, 2022, 11:39pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/104 "2022-10-21T23:39:20Z")

</div>

Feel free to share it in the comments here, and we’ll pick them to add to the Notion database. Thank you!

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 1:21am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/105 "2022-10-22T01:21:15Z")

</div>

![Where-to-Find-All-Mending-Machine-Locations-in-Fortnite-Chapter-3-Season-4.jpg (2400×1800) - Google Chrome 21_10_2022 9_12_35 pm (2)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/114648b54dfecd33f6139d278210fd2dc1ea3432.png)

To add the outline to the images so that they display like those of Instagram Stories Highlights, I first set the list in style tiles, circle shape… Then I Used the code below, but only this list must be in tile styles on the screen, otherwise the circle will appear below too and it won’t be very pretty.

```auto
<pre><span><style>

.tile-inner {
padding: 3px 1px;
}

.tile-image-area {
border-radius: 50%;
box-shadow: inset 0px 0px 0px 15px white;
}

.tile-image-area:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -3px; 
    border-radius: inherit;
    background: radial-gradient(circle at 30% 107%, #fc4e03 40%, #fc4e03 65%, #fc4e03 45%,#fc4e03 60%,#ffb508 90%);
}

```

---

<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:** [October 22, 2022, 1:23am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/106 "2022-10-22T01:23:38Z")

</div>

you can post it in Code BOOK:

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io)**
>
> share cool CSS, scripts and links

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 1:47am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/107 "2022-10-22T01:47:11Z")

</div>

It’ll be a pleasure, thank you! 🙂

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 1:54am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/108 "2022-10-22T01:54:50Z")

</div>

![product_colors_available_jjml7n](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/0/c0534cd797d58d241123796e79cb4d5dde010c22.png)

For this time, I wanted to display the different colors of an item depending on the quantity available.

**HTML**

```auto
<p class="product-colors">
 <span class="red" data-color-primary="#7E021C" data-color-sec="#bd072d"> <span class="black" data-color-primary="#000" data-color-sec="#21212"> <span class="yellow" data-color-primary="#e0a604" data-color-sec="#e0a604"> <span class="blue" data-color-primary="#1807b0" data-color-sec="#2009ed"> <span class="green" data-color-primary="#02ab3d" data-color-sec="#026625"> <span class="pink" data-color-primary="#edbee7" data-color-sec=#edbee7"> <span class="white active" data-color-primary="#ffffff" data-color-sec="#ffffff"> <span class="purple" data-color-primary="#c507f5" data-color-sec="#9207b5"> <span class="brown" data-color-primary="#69341f" data-color-sec="#69341f"> <span class="apricot" data-color-primary="#f54b07" data-color-sec="#f54b07"> <span class="sky" data-color-primary="#4d8bf0" data-color-sec="#4d8bf0"> <span class="cream active" data-color-primary="#d6c996" data-color-sec="#d6c996">

```

**CSS**

```auto
<pre><span><style>

.product-colors span {
    width: 15px;
    height: 15px;
    top: 0px;
    margin-right: 100px;
    left: 17px;
    border-radius: 50%;
    position: relative;
    display: inline-block;

}
 .red {
    background: #f5071b;
}
 .black {
    background: #000;
} .yellow {
    background: #e0a604;
} .blue {
    background: #2009ed;
} .green {
    background: #02ab3d;
} .pink {
    background: #edbee7;
} .white {
    background: #ffffff;
} .purple {
    background: #6e0078;
} .brown {
    background:#69341f;
} .apricot {
    background: #f54b07;
} .sky {
    background:#4d8bf0;
} .cream {
    background: #d6c996;
} .product-colors .active:after{
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid #000;
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
}
</style></span></pre>

```

---

<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:** [October 22, 2022, 1:59am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/109 "2022-10-22T01:59:38Z")

</div>

yep… nice, I did a similar project:

 ![online store](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8c57f1ed1257c9600095db964f955e422a89bbf2.jpeg)

 ![store desctop](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/e/ce43a263de17c8107c3a288ad1f62aa3eb37e6da.jpeg)

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 2:03am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/110 "2022-10-22T02:03:36Z")

</div>

Wonderful 😊, how did you create this vertically?

---

<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:** [October 22, 2022, 2:03am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/111 "2022-10-22T02:03:59Z")

</div>

CSS the inline tile list

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 2:24am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/112 "2022-10-22T02:24:23Z")

</div>

![Add to Cart with Price](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b40967e327054377400a199a3768ec9b12821d1.png)

Use as a floating button of an “add to cart with price” image hosted on cloudinary. I used a template column to display the prices through the image link and this css code for the floating button display.

```auto
<div><div style=" position: fixed;
 top: 90%; right: 0%; width: 100%;">
<a href="" target="_blank"><img class="Retirer du Panier" src="URL of The cloudinary image" /></a>
</div>

```

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 3:21am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/113 "2022-10-22T03:21:52Z")

</div>

![colors inline list selection](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/49f6c961a257ca71c607ec012dd707e21bfb5a76.webp)

I’m working on a similar project! I managed to display the colors buttons through an inline list but not vertically. And the waist buttons next to it are perfect. Do you want to share the codes?

To reduce the size of the list with:

```auto
<pre><span><style>
[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(15,16.5px) !important;
margin: 1px;
column-gap: 6px !important;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 20px;
width: 20px;
}

```

---

<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:** [October 22, 2022, 4:04am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/114 "2022-10-22T04:04:56Z")

</div>

```auto
div[id*='screenScrollView'] > div > :nth-of-type(3){ 
position: absolute;
top:0px;
right:0%;
width: calc(10% + 30px);
z-index:1;
}

```

---

<div class="post-metadata">

**Author:** ![Ritchy\_Viker\_Louis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ritchy_viker_louis/32/49555_2.png) [@Ritchy\_Viker\_Louis](https://community.glideapps.com/u/Ritchy_Viker_Louis)\
**Post date:** [October 22, 2022, 9:01pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/115 "2022-10-22T21:01:18Z")

</div>

Thank You! 🙏

---

<div class="post-metadata">

**Author:** ![Wayne\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wayne_s/32/50714_2.png) [@Wayne\_S](https://community.glideapps.com/u/Wayne_S)\
**Post date:** [November 21, 2022, 12:22pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/116 "2022-11-21T12:22:34Z")

</div>

Is customer CSS only available in the business plan? Would be great to have it on Pro

---

<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:** [November 21, 2022, 11:43pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/117 "2022-11-21T23:43:17Z")

</div>

For Pages, only on Business & Enterprise.

For Apps, it’s available as a workaround using rich text, however don’t rely on that, it can break any moment.

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [December 24, 2022, 5:45pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/118 "2022-12-24T17:45:05Z")

</div>

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/105):
>
> To add the outline to the images so that they display like those of Instagram Stories Highlights, I first set the list in style tiles, circle shape… Then I Used the code below, but only this list must be in tile styles on the screen, otherwise the circle will appear below too and it won’t be very pretty. \<pre\>\<span\>\<style\> .tile-inner { padding: 3px 1px; } .…

Hi  
i want to implement something similar in my app, but it doesn’t work, am i missing something?

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

---

<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:** [December 25, 2022, 8:09am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/119 "2022-12-25T08:09:27Z")

</div>

I suspect the class names have changed since the time this was posted.

---

<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:** [December 25, 2022, 1:14pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/120 "2022-12-25T13:14:45Z")

</div>

It’s also important to note that if and when Glide converts all Glide apps to Glide Pages (sometime in 2024 I suspect), _ **all** _ CSS will break.

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

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