Beautiful Design App

Amazing!!! Congratulations!!!

3 Likes

Hey everyone,

Has any of the CSS gurus merge 3 choice component into one line. If so, would car to share the CSS? If not, Do you think it’s possible?

The use case is to have the 3 choice components in one line to have the user select month, day, and year.

I know we have a date picker but I am looking for a different approach I’d it’s possible.

Thank you guys!

Tried it out and the animation is pretty clean and smooth. If you hit play, the animation is much smoother.

6 Likes

great​:smiling_face_with_three_hearts::heart_eyes:

create your own.

1 Like

Where can I find some gifs like this to put in my sign-in screen?

1 Like

That’s a video loop not a giff, I am quite sure.

I didn’t know we can upload videos in sign-in screen

2 Likes

But a loop is not exactly a video…I don’t know why they call them videos…normally we use html embeds on sites

1 Like

but once we need to upload, I guess it’s a gif, isn’t it?

2 Likes

I created and downloaded it from loading.io as an SVG file, which you can also upload as a background!

It does cost like $10/month to create unlimited or $2 for 1 download with unlimited edits for 2 days.

They do work well on desktop and tablet view as well as the loading screen!

6 Likes

I always thought that was the idea and now I end up in a forum with coders pretending to be no coders :wink:

3 Likes

where can I get more info about how to use CSS in Glide?

1 Like

is there somewhere a tutorial or guide to understand how to use CSS in Glide?

CSS in Glide is the same as anywhere else. The only key difference is that you need to place the CSS in a Richtext Box. You can either put the code directly in the Richtext Box or have it use a column in a table with CSS.

You also need to use Developer Mode to find all the classes that you want to change.

1 Like

thank you, can you please elaborate on this:

You also need to use Developer Mode to find all the classes that you want to change.

I guess i just need a bit of context, Im not an expert in CSS, I just want improve my glide app and some people use CSS to change backgounds, text, button positions etc. No idea where to start.

Its probably easier if you google how to Inspect a Webpage via Developer Mode in Google Chrome than for me to try and explain in to you here.

I would also google or youtube how to apply CSS to certain elements.

3 Likes

i’m having problem to control audio player on iOS… other systems works good, on Safari and iPhones the sound bar is not affected by CSS… anybody have idea how to make it work? this is the code :

<pre><span><style>
audio::-webkit-media-controls-enclosure {
position: fixed;

width: 90%;
max-width: 630px;
height: 30px;
flex-shrink: 0;
bottom:70px;
text-indent: 0;
padding: 1px 5px 5px 0px;
box-sizing: border-box;

}
2 Likes

Releasing this beast thanks to @Lucas_Pires’ code for having custom tab icons.

The tab icon here has 4 states:

  • Not chosen (not the notifications tab), no unread notifications: Grey bell
  • Chosen (viewing notifications tab), no unread notifications: Violet bell
  • Not chosen, at least 1 unread: Grey bell with red dot
  • Chosen, at least 1 unread: Violet bell with red dot

Pros: Look cool, can use this idea as a base to notify people of something that needs their attention.

Cons: Have to put this code (wrapped behind 2 If Then Else columns) in every damn single details view for it to work correctly, and configure the correct flow + user journey for it to work. I imagine it would be easier if I don’t want a dynamic icon, but knowing if the user is viewing the notifications tab or not is already hard.

Cloudinary links for these images:

https://res.cloudinary.com/[yourusername]/image/fetch/e_colorize,co_rgb:999999/https://i.imgur.com/hiZuvbA.png
https://res.cloudinary.com/[yourusername]/image/fetch/e_colorize,co_rgb:2E3192/https://i.imgur.com/hiZuvbA.png
https://res.cloudinary.com/[yourusername]/image/fetch/l_fetch:aHR0cHM6Ly9pLmltZ3VyLmNvbS8ycXhHNjhZLnBuZw==,w_150,h_150,x_100,y_-100/https://i.imgur.com/EE9kLeN.png
https://res.cloudinary.com/[yourusername]/image/fetch/l_fetch:aHR0cHM6Ly9pLmltZ3VyLmNvbS8ycXhHNjhZLnBuZw==,w_150,h_150,x_100,y_-100/https://i.imgur.com/rIPOE9q.png

This was documented in our Notion:

Hope this helps @Robert_Petitto @Jeff_Hager @Darren_Murphy and all others.

14 Likes