I think it’s a request and the screenshot is from another tool.
Hello! Please, how can i get access to this community for sharing some tricks? 
you have access lol… just share it.
1 Like
Feel free to share it in the comments here, and we’ll pick them to add to the Notion database. Thank you!
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;
}
.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%);
}
1 Like
you can post it in Code BOOK:
It’ll be a pleasure, thank you! 
1 Like
For this time, I wanted to display the different colors of an item depending on the quantity available.
HTML
<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
<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>
Wonderful 
, how did you create this vertically?
CSS the inline tile list
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.
<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>
1 Like
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:
<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[id*='screenScrollView'] > div > :nth-of-type(3){
position: absolute;
top:0px;
right:0%;
width: calc(10% + 30px);
z-index:1;
}
Thank You!
1 Like
Is customer CSS only available in the business plan? Would be great to have it on Pro
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.
1 Like
I suspect the class names have changed since the time this was posted.
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.
1 Like