# 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:** 40

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 7, 2021, 2:34pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/789 "2021-09-07T14:34:18Z")

</div>

@RossBoone This post has a link to my calendar concept app. I’ll warn you that it’s not a pretty or a simple process. It has some noticeable bugs due to the heavy usage of CSS to manipulate things. @Manu.n may have a cleaner version and I think there is a couple of others floating around, but I don’t know if anybody else has shared a copyable version.

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/340):
>
> I think I’ve taken this about as far as I’m comfortable going. I may play with the events more and there is a small bug when flipping through months that I have to work out, but as far as the calendar layouts, I think I have it about as good as it’ll get. I’d rather wait for a Glide native version of a calendar. To be honest, the Month Layout tab required a lot more CSS manipulation and other various hacks to get it to look good. In the end, the top calendar is a calendar made with a card lay…

Edit: Actually it looks like @Manu.n’s version is copyable, so it might be work looking at his.

> **[Demo PickCalendar Public](https://pickcalendar.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![RossBoone](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rossboone/32/72496_2.png) [@RossBoone](https://community.glideapps.com/u/RossBoone)\
**Post date:** [September 7, 2021, 2:51pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/790 "2021-09-07T14:51:17Z")

</div>

very cool. Thanks @Jeff_Hager . I’ll see if I can play with this.

---

<div class="post-metadata">

**Author:** ![ebele54](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ebele54/32/19267_2.png) [@ebele54](https://community.glideapps.com/u/ebele54)\
**Post date:** [September 10, 2021, 10:16pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/791 "2021-09-10T22:16:40Z")

</div>

Hi

Please is it possible to have different colours for each icon?  
i.e.  
Waiting: Yellow  
Lost: Red  
Won: Green

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/e/fe277a7b41504cb30dc087eb4562427b8a4e93fc.png)

---

<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:** [September 10, 2021, 11:01pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/792 "2021-09-10T23:01:35Z")

</div>

Do you have a fixed set of components on this screen? Do you have any conditional visibilities?

---

<div class="post-metadata">

**Author:** ![ebele54](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ebele54/32/19267_2.png) [@ebele54](https://community.glideapps.com/u/ebele54)\
**Post date:** [September 10, 2021, 11:33pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/793 "2021-09-10T23:33:10Z")

</div>

Yes and Yes

---

<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:** [September 11, 2021, 12:02am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/794 "2021-09-11T00:02:03Z")

</div>

Do you want to show the 3 above components at once or are there any conditions based on the user’s input?

---

<div class="post-metadata">

**Author:** ![ebele54](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ebele54/32/19267_2.png) [@ebele54](https://community.glideapps.com/u/ebele54)\
**Post date:** [September 11, 2021, 2:42am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/795 "2021-09-11T02:42:51Z")

</div>

There will be visibility conditions foe the three. They all won’t show at once hence the same title (status)

---

<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:** [September 11, 2021, 2:54am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/796 "2021-09-11T02:54:03Z")

</div>

Then you can have an If Then Else column on that screen and change the color accordingly.

Let’s say:

If status is waiting then

```auto
<pre><span><style>

[data-test="list-item"] >div >div >svg {
fill: yellow;
}

```

Do the same for the other two.

Then point the rich text component to that column.

---

<div class="post-metadata">

**Author:** ![ebele54](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ebele54/32/19267_2.png) [@ebele54](https://community.glideapps.com/u/ebele54)\
**Post date:** [September 11, 2021, 6:19am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/797 "2021-09-11T06:19:26Z")

</div>

Perfect!!!  
Thanks a bunch

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [October 1, 2021, 4:12pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/798 "2021-10-01T16:12:07Z")

</div>

Hi @ThinhDinh,  
thank you for the floating back button css.  
Do you know if it is possible to position a real floating button (which has actions) on that top right position. For me the standard floating button is too large and therefore sometimes covers important elements on the screen.  
Thanks.

---

<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:** [October 1, 2021, 11:46pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/799 "2021-10-01T23:46:57Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76f0035454e0281194c4f11e2d2e18a89174c420.jpeg)

Here’s my attempt to do it.

```auto
<pre><span><style>

[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}

[data-test="nav-button-menu"] svg {
display: none;
}

[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}

.fab-target >* {
	 position:fixed;
	 width:50px;
	 height:50px;
	 top: 5%;
}

.fab-target >:nth-child(1) {
left: 5% !important;
}

.fab-target >:nth-child(2) {
right: 5% !important;
}

```

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [October 3, 2021, 5:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/800 "2021-10-03T17:55:27Z")

</div>

Thank you @ThinhDinh ,  
the positioning works perfectly,

In my case I want to have the screen title and I need to scroll the content and therefore the first part, which sets the backdrop-filter, isn’t ideal, because then the content scrolls over the title.

I tried to position the floating button above the blurry header with z-index, but this didn’t work out.  
Do you have any idea how to position the button on top of everything else?

![image1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/5/c58d6b5b1732df864b7d2f8c5164a7762313636a.png)

this is what I tried

```auto
<pre><span><style>

[data-test="nav-button-menu"] svg {
display: none;
}

.fab-target >* {
	 position:fixed;
	 width:50px;
	 height:50px;
	 top: 5%;
}

.fab-target >:nth-child(1) {
right: 5% !important;
}

```

---

<div class="post-metadata">

**Author:** ![migo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/migo/32/29538_2.png) [@migo](https://community.glideapps.com/u/migo)\
**Post date:** [October 3, 2021, 7:39pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/801 "2021-10-03T19:39:01Z")

</div>

You can insert this piece of CSS right after : pre.span.style

```auto
[data-test="glide-app-bar"] {
  z-index: unset;
}
[data-test="nav-bar"] {
  z-index: 100;
}

```

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [October 3, 2021, 8:06pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/802 "2021-10-03T20:06:01Z")

</div>

Thanks @migo , unfortunately the text scrolls over the title.

![image2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/b/9ba28001667419617850ffe7ff9f2bbdcfc1c0c0.png)

---

<div class="post-metadata">

**Author:** ![migo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/migo/32/29538_2.png) [@migo](https://community.glideapps.com/u/migo)\
**Post date:** [October 3, 2021, 8:07pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/803 "2021-10-03T20:07:40Z")

</div>

The CSS suggested by @ThinhDinh from the post above works much better

```auto
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}

```

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [October 3, 2021, 8:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/804 "2021-10-03T20:10:46Z")

</div>

I tried it already before, but the text also scrolls over the title as in my last image.

---

<div class="post-metadata">

**Author:** ![migo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/migo/32/29538_2.png) [@migo](https://community.glideapps.com/u/migo)\
**Post date:** [October 3, 2021, 8:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/805 "2021-10-03T20:11:59Z")

</div>

I agree with you, this does not solve your problem … sorry ☹

---

<div class="post-metadata">

**Author:** ![migo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/migo/32/29538_2.png) [@migo](https://community.glideapps.com/u/migo)\
**Post date:** [October 3, 2021, 8:27pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/806 "2021-10-03T20:27:50Z")

</div>

Maybe you should give up the idea of placing the floating button so high? Replace top: 5% with top: 10% in your example and everything will look almost the way you want 🙂

---

<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:** [October 3, 2021, 11:04pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/807 "2021-10-03T23:04:25Z")

</div>

I did try doing this using z-index as well, but never succeeded ☹

Probably this is the best solution:

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/806):
>
> Maybe you should give up the idea of placing the floating button so high? Replace top: 5% with top: 10% in your example and everything will look almost the way you want slight_smile

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 4, 2021, 5:41am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/808 "2021-10-04T05:41:04Z")

</div>

But in your Vegan showcase, your floating is on top right corner and the title zone doesn’t hide it.  
How’s that?  
If you put a top title, does it remove any transparency or prevent from clicking on the button?  
Thks, ThinhDinh

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

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