# Beautiful Design App

**URL:** <https://community.glideapps.com/t/beautiful-design-app/16191>\
**Category:** Project Showcase\
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")\
**Posts on this page:** 20\
**Page:** 30

<div class="post-metadata">

**Author:** ![Joao\_Paulo\_Lima](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joao_paulo_lima/32/12256_2.png) [@Joao\_Paulo\_Lima](https://community.glideapps.com/u/Joao_Paulo_Lima)\
**Post date:** [May 25, 2021, 9:59pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/588 "2021-05-25T21:59:45Z")

</div>

Amazing!!! Congratulations!!!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [May 27, 2021, 10:59am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/589 "2021-05-27T10:59:45Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 27, 2021, 12:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/590 "2021-05-27T12:55:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [May 27, 2021, 2:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/591 "2021-05-27T14:00:15Z")

</div>

great​:smiling\_face\_with\_three\_hearts:😍

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [May 27, 2021, 6:05pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/592 "2021-05-27T18:05:44Z")

</div>

> **[my apps](https://imgflip.com/gif/5b6pb6)**

create your own.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 27, 2021, 6:07pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/593 "2021-05-27T18:07:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [May 27, 2021, 6:08pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/594 "2021-05-27T18:08:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 27, 2021, 6:12pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/595 "2021-05-27T18:12:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [May 27, 2021, 6:13pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/596 "2021-05-27T18:13:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 27, 2021, 6:16pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/597 "2021-05-27T18:16:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 27, 2021, 6:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/598 "2021-05-27T18:18:50Z")

</div>

I created and downloaded it from [loading.io](http://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!

---

<div class="post-metadata">

**Author:** ![erwblo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwblo/32/75_2.png) [@erwblo](https://community.glideapps.com/u/erwblo)\
**Post date:** [May 27, 2021, 7:07pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/599 "2021-05-27T19:07:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![plusmartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/plusmartin/32/5819_2.png) [@plusmartin](https://community.glideapps.com/u/plusmartin)\
**Post date:** [May 27, 2021, 7:58pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/600 "2021-05-27T19:58:52Z")

</div>

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

---

<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:** [May 27, 2021, 8:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/601 "2021-05-27T20:00:11Z")

</div>

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191):
>
> Hello, Glide community slight_smile With some glider we want to make a showcase with all the Most Beautiful Design App. Specially the App with a innovant or Nice Design ! If you think your App Match the topic be free to comment with some explanation of your app Regard Stan

---

<div class="post-metadata">

**Author:** ![plusmartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/plusmartin/32/5819_2.png) [@plusmartin](https://community.glideapps.com/u/plusmartin)\
**Post date:** [May 27, 2021, 8:04pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/602 "2021-05-27T20:04:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 27, 2021, 8:09pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/603 "2021-05-27T20:09:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![plusmartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/plusmartin/32/5819_2.png) [@plusmartin](https://community.glideapps.com/u/plusmartin)\
**Post date:** [May 27, 2021, 8:37pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/604 "2021-05-27T20:37:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 27, 2021, 8:42pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/605 "2021-05-27T20:42:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 31, 2021, 6:48pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/606 "2021-05-31T18:48:48Z")

</div>

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 :

```auto
<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;

}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 6, 2021, 8:27am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/607 "2021-06-06T08:27:09Z")

</div>

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:

```auto
https://res.cloudinary.com/[yourusername]/image/fetch/e_colorize,co_rgb:999999/https://i.imgur.com/hiZuvbA.png

```

```auto
https://res.cloudinary.com/[yourusername]/image/fetch/e_colorize,co_rgb:2E3192/https://i.imgur.com/hiZuvbA.png

```

```auto
https://res.cloudinary.com/[yourusername]/image/fetch/l_fetch:aHR0cHM6Ly9pLmltZ3VyLmNvbS8ycXhHNjhZLnBuZw==,w_150,h_150,x_100,y_-100/https://i.imgur.com/EE9kLeN.png

```

```auto
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:

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/Tab-Profile-Icon-db21d15bae4b4e11a7f825c54f2e0f2e)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

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

[Previous page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=29)

[Next page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=31)