[Screenshot 2021-04-14 at 13.52.51] 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 :slight_smile: Any ideas? (and help if needed!) Cheers! M

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

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 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] [Screenshot 2021-04-14 at 14.58.01] [Screenshot 2021-04-14 at 14.58.11] [Screenshot 2021-04-14 at 14.58.18] [Screenshot 2021-04-14 at 14.56.11]

@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?

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] 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!

[image] 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 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.

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

[image] Beautiful Design App Project Showcase Beautiful “Our Team” screen with Card View CSS transformation: [Screen Shot 2020-11-17 at 10.13.30 PM] [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…

Just needed a couple of template columns, with a little bit of Cloudinary magic :wink: English: [Screen Shot 2021-04-15 at 1.25.59 AM] German: [Screen Shot 2021-04-15 at 1.25.43 AM]

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

Doable in CSS?

Ask for Help

PabloMFalero April 14, 2021, 2:22pm 9

Topic		Replies	Views
Tell Glide how you use CSS General	128	18821	December 27, 2022
The CSS I am using these days Ask for Help	34	3096	September 28, 2021
Create Background with CSS Ask for Help	48	8791	March 28, 2024
Beautiful Design App Project Showcase	818	40347	November 16, 2021
Arrange compact inline list into a single line with CSS Ask for Help	8	989	December 5, 2021

Doable in CSS?

Related topics