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

<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 7, 2021, 1:22pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/628 "2021-06-07T13:22:32Z")

</div>

Yes, as this is rich text I think you can do that without any issues.

---

<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 7, 2021, 2:17pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/629 "2021-06-07T14:17:07Z")

</div>

Really nice trick. Adding this to my code book 😉

---

<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 7, 2021, 2:42pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/630 "2021-06-07T14:42:08Z")

</div>

I was used to do it with a .png image.

---

<div class="post-metadata">

**Author:** ![Blue\_Community](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blue_community/32/16616_2.png) [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)\
**Post date:** [June 8, 2021, 9:31pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/631 "2021-06-08T21:31:50Z")

</div>

me too

---

<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:** [June 8, 2021, 10:43pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/632 "2021-06-08T22:43:18Z")

</div>

> [@Manu.n](#):
>
> ```auto
> <pre><span><style>
> 
> [data-test="app-hr"] {
> background-color: rgb(246, 246, 246);
> padding:0px;
> }
> 
> [data-test="app-hr"] .sep-line {
> background-color: rgb(246, 246, 246);
> }
> 
> [data-test="app-hr"]:after {
> content: "";
> position:relative;
> top:-30px;
> height:20px;
> border-bottom-right-radius: 15px;
> border-bottom-left-radius: 15px;
> background:#fff;
> box-shadow: 0 3px 0 0 rgb(226, 226, 226);
> z-index:0 !important;
> }
> 
> [data-test="app-hr"]:before {
> content: "";
> position:relative;
> top:30px;
> height:20px;
> border-top-right-radius: 15px;
> border-top-left-radius: 15px;
> background:#fff;
> box-shadow: 0 -15px 0 0 rgb(246, 246, 246);
> z-index:0 !important;
> }
> 
> </style></span></pre>
> 
> ```

Is there a way to target just separator: small? Appears it affects all Separator element sizes.

---

<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 8, 2021, 11:58pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/633 "2021-06-08T23:58:21Z")

</div>

Thanks to @Lucas_Pires, I now have a much more reliable way to do my notifications tab. I guess I did not really need Cloudinary with the CSS magic here, and can let Glide handle the on/off status of the icon instead of creating 4 separate images.

```auto
<pre><span><style>
  button[aria-label="Notifications"]::before {
  content: "{N}";
  position: absolute;
  font-size: 9px;
  font-weight: 800;
  color: white;
  padding: 1px;
  top: 6px;
  right: 25px;
  z-index: 1;
  height: 16px;
  width: 16px;
  background-color: red;
  border-radius: 70%;
}

```

With {N} being the number of notifications to show. Thanks to @Robert_Petitto for the lead to use CSS for this as well!!!

---

<div class="post-metadata">

**Author:** ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)\
**Post date:** [June 9, 2021, 12:14am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/634 "2021-06-09T00:14:35Z")

</div>

That is very nice bro 👏

---

<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 9, 2021, 1:59am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/635 "2021-06-09T01:59:21Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/8/0815854d3eb9be3a95bf58c5b28cfe4fee09b189.png)

Gotta make these more “lively” with icons.

```auto
<img src="https://i.imgur.com/GIOeqeL.png" align="left" style="width:18px;height:18px;" /><b>
‏‏‎ ‎‏‏‎ ‎Venmo</b> 

```

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 9, 2021, 10:25am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/636 "2021-06-09T10:25:21Z")

</div>

> [@Joe\_Gabriele](#):
>
> Existe-t-il un moyen de cibler uniquement le séparateur : petit ? Il semble que cela affecte toutes les tailles d’élément de séparateur.

Bonjour @Joe_Gabriele

I also needed this option, so I adapted @Robert_Petitto CSS so that spaces respect “spacing”.  
BUT BE CAREFUL, this uses unnamed classes so it may not work one day. however, if this happens, the default is taken into account.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/6/46acc00da03d9038eb7fe5492ff42c6ba31c3e6c.png)

CSS

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

[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
padding-left:0px;
padding-right:0px;
}

[data-test="app-hr"]:after {
content: "";
position:relative;
top:-30px;
height:20px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background:#fff;
box-shadow: 0 3px 0 0 rgb(226, 226, 226);
z-index:0 !important;
}

[data-test="app-hr"]:before {
content: "";
position:relative;
top:30px;
height:20px; 
border-top-right-radius: 15px;
border-top-left-radius: 15px;
box-shadow: 0 -1px 0 0 rgb(226, 226, 226);
background:#fff;
z-index:0 !important;
}

/* **************** Default */
.kxHqnt:after {
}

.kxHqnt:before {
}

/* **************** Small */ 
.eUKgzh:after {
content: "";
top:-35px;
}

.eUKgzh:before {
content: "";
top:35px;
}

/* **************** Medium */
.gWGzJy:after {
content: "";
top:-45px;
}

.gWGzJy:before {
content: "";
top:45px;
}

/* **************** Large */
.iBGoXU:after {
content: "";
top:-55px;
}

.iBGoXU:before {
content: "";
top:55px;
}

</style></span></pre>

```

---

<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 9, 2021, 11:30am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/637 "2021-06-09T11:30:01Z")

</div>

Lively and lovely 🤩

---

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

</div>

Hola @ThinhDinh, @Manu.n, @Lucas_Pires, @Robert_Petitto

Is there a CSS to change the wording of the comments component from “Add Comment” to something else, say, “write message”?

Thanks guys!

---

<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 9, 2021, 3:59pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/639 "2021-06-09T15:59:16Z")

</div>

Amazing work - are you following the same process outlined by @Lucas_Pires? The videos are no longer available on this post

> [@In-app Notifications bell](https://community.glideapps.com/t/in-app-notifications/15980):
>
> Sup guys waveWhile we don’t have push notifications, I was testing and implementing some notifications in-app to improve the engagement in my apps. After a hardwork creating some logics, this is one of mine: [Jungle™](https://bit.ly/jungleapp) - Transform scenes, excerpts, poems or even thoughts into incredible stories. The best place in the world is inside the jungle! Tab Notification: Working with 2 tabs, we can create an illusion of pending notifications. Here people can see the notifications if: People the…

What is the best practice here 🤔

---

<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 9, 2021, 4:42pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/640 "2021-06-09T16:42:17Z")

</div>

Actually not @Harry_OBrien, this topic is old. This css is recent

---

<div class="post-metadata">

**Author:** ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)\
**Post date:** [June 9, 2021, 5:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/641 "2021-06-09T17:10:05Z")

</div>

![numeros thin](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76085766d999b6e310ab7f9a83dc05759a8ec81f.png)  
the numbers are css Thinh

---

<div class="post-metadata">

**Author:** ![Claudio\_Balbino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/claudio_balbino/32/33691_2.png) [@Claudio\_Balbino](https://community.glideapps.com/u/Claudio_Balbino)\
**Post date:** [June 9, 2021, 6:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/642 "2021-06-09T18:10:35Z")

</div>

@ThinhDinh very good! Thanks for sharing

---

<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 9, 2021, 11:36pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/643 "2021-06-09T23:36:17Z")

</div>

No they are not, it’s just two items from an inline list with images generated from [https://dummyimage.com/](https://dummyimage.com/).

Actually it’s a list of 4-item-per-line but the other two are intentionally made “blank”.

---

<div class="post-metadata">

**Author:** ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)\
**Post date:** [June 9, 2021, 11:42pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/644 "2021-06-09T23:42:41Z")

</div>

ha I see for a moment I thought it was css 🙃thanks for the link

---

<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 10, 2021, 1:01pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/645 "2021-06-10T13:01:51Z")

</div>

I noticed, I was trying to understand how you built the notification page, but I think its just as simple inline list with user specific columns, right?

I’m not going to miss anything tricky am I

---

<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, 1:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/646 "2021-06-10T13:18:33Z")

</div>

Kind of. Not that simple, because in that app I was collecting infos from many parts of the apps, thats why wasnt that simple. But once you have user email related and you can filter by this

---

<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 10, 2021, 2:43pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/647 "2021-06-10T14:43:19Z")

</div>

In my case it’s simply a list of rows from a Comments sheet. It’s marked “read” to a user-specific column when the user clicks it.

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

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