# Doable in CSS?

**URL:** <https://community.glideapps.com/t/doable-in-css/25532>\
**Category:** Ask for Help\
**Created:** [April 14, 2021, 11:56am UTC](https://community.glideapps.com/t/doable-in-css/25532 "2021-04-14T11:56:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [April 14, 2021, 11:56am UTC](https://community.glideapps.com/t/doable-in-css/25532/1 "2021-04-14T11:56:43Z")

</div>

![Screenshot 2021-04-14 at 13.52.51](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7b5564c75e82bf29b56f386dae24fa847b180c2e.jpeg)

I am close to a design on my app and was wondering what magic could be used in CSS to make this type of design work?

top is easy - no CSS, it is just an image 1:1  
the middle bit is an inline list  
— I have a multilingual app so EITHER I need to make the images for the languages we support, OR I use a cloudinary overlay and pick up the user text (but not so easy I think as I would have to have a template column picking up user values… maybe…)

OR there is CSS so I can have the standard Glide things, and use CSS to move the text around

the ? is easy - floating button 🙂  
Any ideas? (and help if needed!)

Cheers! M

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [April 14, 2021, 12:10pm UTC](https://community.glideapps.com/t/doable-in-css/25532/2 "2021-04-14T12:10:41Z")

</div>

The blue and green options are images in an inline list? or are tiles edited with CSS?

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [April 14, 2021, 1:02pm UTC](https://community.glideapps.com/t/doable-in-css/25532/3 "2021-04-14T13:02:05Z")

</div>

That is the choice - right now in the app I am playing around with images for the inline list (no illustration or text on yet).

I can make cloudinary URL that can have overlay images and text - e.g. [https://res.cloudinary.com/di8rh54am/image/fetch/l\_text:roboto\_15:Small%20text%20here,co\_black,g\_west,x\_220,y\_5/l\_text:roboto\_25:Take%20a%20Test,co\_black,g\_west,x\_220,y\_-30/https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Nlrw4jqEKYY2NEab88yM/pub/WvsP909CzFCRyfBP93bS.png](https://res.cloudinary.com/di8rh54am/image/fetch/l_text:roboto_15:Small%20text%20here,co_black,g_west,x_220,y_5/l_text:roboto_25:Take%20a%20Test,co_black,g_west,x_220,y_-30/https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Nlrw4jqEKYY2NEab88yM/pub/WvsP909CzFCRyfBP93bS.png)

My app is designed so that I have an Admin only app where I can use the nice UX to upload photos, etc - that allows me to play without having to dig into the columns, etc.

Using native Glide would be easier to deal with for sure - one less thing to think about.

It seems like I can change the size of the images so that they fit nicely. And it is not hard to have an overlay for the illustrations (I have a designer working on them). The words will be the tricky bit. I can use the Construct URL to make a nice URL with the text string automatically including the %20 things to replace the spaces. All I have to do is then work out how to get the user strings into the column… (maybe)

 ![Screenshot 2021-04-14 at 14.57.47](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cfca6da1a758525110113edc6ff58092600ed00c.png) ![Screenshot 2021-04-14 at 14.58.01](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3d1bffa8c289445136002a957a5223506e588053.jpeg) ![Screenshot 2021-04-14 at 14.58.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/24b58005a3da2402d9c587b213e8e9573816d65d.png) ![Screenshot 2021-04-14 at 14.58.18](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/53fae640453191708400b798ad6ced3516afe01d.png)

 ![Screenshot 2021-04-14 at 14.56.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/7/97403d913da3a8c651d01dcd8f5d883ee5cf79aa.jpeg)

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [April 14, 2021, 1:05pm UTC](https://community.glideapps.com/t/doable-in-css/25532/4 "2021-04-14T13:05:02Z")

</div>

@Robert_Petitto did something with card layouts, is in the beautiful design app thread and it looks just like that. If I’m not wrong it was something to do with doulas, right Robert?

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [April 14, 2021, 1:07pm UTC](https://community.glideapps.com/t/doable-in-css/25532/5 "2021-04-14T13:07:41Z")

</div>

Another thing I am wondering in CSS - I found some CSS to change ALL button colors… but how does it work to change specific button colors (or look) - e.g. on this screen here:

 ![Screenshot 2021-04-14 at 15.05.54](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4e0c801d363621bd321edcab52308818852d0c60.jpeg)

I would like the bottom set to be ‘as normal’ and the buttons below the Services to look different (to avoid confusing the user). Any tips? Thanks!

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 14, 2021, 2:11pm UTC](https://community.glideapps.com/t/doable-in-css/25532/6 "2021-04-14T14:11:21Z")

</div>

> [@Mark\_Turrell](#):
>
> I can make cloudinary URL that can have overlay images and text - e.g. [https://res.cloudinary.com/di8rh54am/image/fetch/l\_text:roboto\_15:Small%20text%20here,co\_black,g\_west,x\_220,y\_5/l\_text:roboto\_25:Take%20a%20Test,co\_black,g\_west,x\_220,y\_-30/https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Nlrw4jqEKYY2NEab88yM/pub/WvsP909CzFCRyfBP93bS.png](https://res.cloudinary.com/di8rh54am/image/fetch/l_text:roboto_15:Small%20text%20here,co_black,g_west,x_220,y_5/l_text:roboto_25:Take%20a%20Test,co_black,g_west,x_220,y_-30/https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Nlrw4jqEKYY2NEab88yM/pub/WvsP909CzFCRyfBP93bS.png)

That will work. Just put that in a template column, and instead of hard-wiring the text bits, use the appropriate SV columns from your CollectUser table as replacements.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [April 14, 2021, 2:18pm UTC](https://community.glideapps.com/t/doable-in-css/25532/7 "2021-04-14T14:18:54Z")

</div>

I have just about managed to get it working - it is a very elegant way of doing things, extremely flexible 🙂

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [April 14, 2021, 2:20pm UTC](https://community.glideapps.com/t/doable-in-css/25532/8 "2021-04-14T14:20:51Z")

</div>

Where is that?

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [April 14, 2021, 2:22pm UTC](https://community.glideapps.com/t/doable-in-css/25532/9 "2021-04-14T14:22:50Z")

</div>

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/134):
>
> Beautiful “Our Team” screen with Card View CSS transformation: \<pre\>\<span\>\<style\> [data-test="card-item"] { width: 40%; overflow: visible; margin-left: 20px; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 25px 10px !important; } .bottom-area { position: absolute; height: 100%; margin-left: 115%; text-align: left; width: 120%; background-color: transparent !important; } .card-title { padding-top: 50% !important; font-size: 1.2rem !importan…

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 14, 2021, 5:39pm UTC](https://community.glideapps.com/t/doable-in-css/25532/10 "2021-04-14T17:39:42Z")

</div>

Just needed a couple of template columns, with a little bit of Cloudinary magic 😉

English:  
 ![Screen Shot 2021-04-15 at 1.25.59 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b7af8ac42b7f5841ecf7fb4b3be1d1e8dfb33544.png)

German:  
 ![Screen Shot 2021-04-15 at 1.25.43 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b3aa99ad8c0b9de61d3330bafd57ae7628c21ce6.png)

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [April 14, 2021, 6:04pm UTC](https://community.glideapps.com/t/doable-in-css/25532/11 "2021-04-14T18:04:33Z")

</div>

And the functionallity is an action when clicking the image right?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 14, 2021, 6:31pm UTC](https://community.glideapps.com/t/doable-in-css/25532/12 "2021-04-14T18:31:06Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [April 14, 2021, 9:13pm UTC](https://community.glideapps.com/t/doable-in-css/25532/15 "2021-04-14T21:13:57Z")

</div>

@Mark_Turrell I’m not sure if you want to keep all the details above public ? Remember that basically anyone can access the datas you published without having to sign up in the Glide Community…

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [April 14, 2021, 9:42pm UTC](https://community.glideapps.com/t/doable-in-css/25532/16 "2021-04-14T21:42:14Z")

</div>

Argh!!! I thought I was chatting privately!!