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

<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:** [June 10, 2021, 2:50pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/648 "2021-06-10T14:50:46Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f18686389b2e1e30fa1212cffeb1cc9bef8d9794.jpeg)

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [June 10, 2021, 2:58pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/649 "2021-06-10T14:58:22Z")

</div>

This looks great Lucas!

One question: how did you get the top-banner to be a picture “on top” or “behind” the Title picture?

---

<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:** [June 10, 2021, 3:01pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/650 "2021-06-10T15:01:47Z")

</div>

2nd code in this topic

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/18):
>
> Summaryplay_button One the Most important and used play_button Nav bar, Background image, Moving up some components..play_button Color of 2 items independently - Inline Card Styleplay_button Title Color - Inline List Style

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [June 10, 2021, 3:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/651 "2021-06-10T15:11:28Z")

</div>

Wicked! Thank you!

---

<div class="post-metadata">

**Author:** ![Elisaul\_Espinoza](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elisaul_espinoza/32/26842_2.png) [@Elisaul\_Espinoza](https://community.glideapps.com/u/Elisaul_Espinoza)\
**Post date:** [June 11, 2021, 2:39pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/652 "2021-06-11T14:39:34Z")

</div>

Como le puso su foto alli

---

<div class="post-metadata">

**Author:** ![Cokorda](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/cokorda/32/27735_2.png) [@Cokorda](https://community.glideapps.com/u/Cokorda)\
**Post date:** [June 13, 2021, 8:04am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/653 "2021-06-13T08:04:33Z")

</div>

Very cool!! Thanks for sharing

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 14, 2021, 12:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/654 "2021-06-14T12:55:19Z")

</div>

Looking good

![Screenshot 2021-06-14 at 13.54.00](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/230cf9a86ef698686a59be792f1062927d44488f.png)

I’m curious, is there a way to apply this CSS globally without having to add the same rich text component to every tab?

---

<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 14, 2021, 12:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/655 "2021-06-14T12:55:58Z")

</div>

As far as I aware there isn’t one.

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 14, 2021, 8:48pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/656 "2021-06-14T20:48:36Z")

</div>

I really need this compact design Bob - care to share the trickery?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 14, 2021, 8:54pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/657 "2021-06-14T20:54:34Z")

</div>

The one with the button in the title?

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/529):
>
> Ya…messing around with some CSS and placement of items…

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 14, 2021, 8:54pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/658 "2021-06-14T20:54:55Z")

</div>

Yep

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 14, 2021, 9:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/659 "2021-06-14T21:00:24Z")

</div>

I think this is the one (I’m away from my computer at the moment).

```auto
<pre><span><style>
[data-test="app-summary"] {
margin-top: -90px;
}

[data-test="glide-app-bar"] :nth-child(1) {
background: transparent !important;
}

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

#app-root div[opacity='1'] {
      color: transparent; 
    }

[data-test="app-summary"] >:nth-child(1) {
height: 150px !important;
}

```

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 14, 2021, 9:13pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/660 "2021-06-14T21:13:31Z")

</div>

That’s great help, tinkering with it now

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [June 14, 2021, 10:29pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/661 "2021-06-14T22:29:10Z")

</div>

The trick is to make a template column in the sheets you reference (or in your sheet named as the ‘User Profile’ as you can always reference these values (mostly) ) and put your CSS in the template.

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 14, 2021, 10:33pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/662 "2021-06-14T22:33:06Z")

</div>

Yep, already doing this.

Just have to add the component to all pages and it doesn’t work on Non-Detail Views where it’s not possible to add components.

---

<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:** [June 15, 2021, 2:41am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/663 "2021-06-15T02:41:35Z")

</div>

Edit: the client didnt keep with the app, but the design is still really cool!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dc3e35dc0a8754a47c38adfc6a4972ddc23c2a2a.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 15, 2021, 3:24am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/664 "2021-06-15T03:24:30Z")

</div>

Love this:  
 ![Screen Shot 2021-06-14 at 11.24.25 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4d49528ca4c37842ad8ab56e2ee2c6ffdfae36b6.png)

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 15, 2021, 1:06pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/665 "2021-06-15T13:06:34Z")

</div>

Nothing special, but here’s an alternative design for the Choice Bar component

![Screen Recording 2021-06-15 at 01.59.43 pm](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c34310b325e32405c8be28e4404dc9bc749a23a.gif)

**Code:**

```auto
[data-test="app-inline-picker"] .ips-inner {
background: #fff;
}

.bYahys {
color: rgb(0 0 0);
}

```

To edit the the active Choice

```auto
.dMZZie {
   box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
   color: #ffffff;
   background-color: #000000;
}

```

 ![Screenshot 2021-06-15 at 14.29.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8be874b0981f1150d81d44f166229000b6222b2d.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:** [June 15, 2021, 2:48pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/666 "2021-06-15T14:48:51Z")

</div>

Thank you for sharing, this looks great. However the class name in the second one might vary from app to app.

---

<div class="post-metadata">

**Author:** ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)\
**Post date:** [June 15, 2021, 3:49pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/667 "2021-06-15T15:49:23Z")

</div>

Edited out 👍

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

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