Beautiful Design App

Project Showcase
588

Amazing!!! Congratulations!!!

3 Likes
589

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!

590

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

6 Likes
591

greatā€‹:smiling_face_with_three_hearts::heart_eyes:

592

create your own.

1 Like
593

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

1 Like
594

Thatā€™s a video loop not a giff, I am quite sure.

595

I didnā€™t know we can upload videos in sign-in screen

2 Likes
596

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
597

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

2 Likes
598

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
599

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
600

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

601
1 Like
602

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

603

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
604

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.

605

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
606

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
607

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.

15 Likes