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

<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:** [June 6, 2021, 9:10am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/608 "2021-06-06T09:10:34Z")

</div>

Let me tell that a save state functionality with all those settings is something I do hope to see coming , I know there are undos, I know there are the duplicates but an history of the changes would be so important , all those wonderful workarounds and maybe you’re in hurry or tired and you lose all , or maybe could be so useful to go back to a day where we know the app was working…, just saying.I know its not having the code but a “project file” saved on my desk would make sleep better.  
Bit off topic but see how much work here from all you talents, a save its needed IMO.

---

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

</div>

Nice job 👏

---

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

</div>

How about custom floating buttons icons???  
But anyway… since we have reach text actions now, most of the css tricks should focus on good images targeting and style. That would work on all devices and operating systems

---

<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 6, 2021, 6:53pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/611 "2021-06-06T18:53:38Z")

</div>

You got this notification blue badge with Cloudinary?

How can I use it? I’m not familiar with cloudinary 😕

---

<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 6, 2021, 6:59pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/612 "2021-06-06T18:59:42Z")

</div>

> [@ThinhDinh](#):
>
> ```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
> 
> ```

@ThinhDinh You can also create another conditional Rich Text CSS box to overlay an emoji. Again, you’d need to do this on EVERY details screen in the entire app.

 ![Screen Shot 2021-06-06 at 2.58.33 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76b11d531f6c79d309a5a08d095cd7b929e72445.jpeg)

---

<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 6, 2021, 7:07pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/613 "2021-06-06T19:07:04Z")

</div>

> [@ThinhDinh](#):
>
> `[yourusername]`

I tried to put my Cloudinary’s username, but didnt work… Do I have to create something in my account?

---

<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 6, 2021, 7:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/614 "2021-06-06T19:18:57Z")

</div>

Can we do it a little bit smaller?

---

<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 6, 2021, 7:26pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/615 "2021-06-06T19:26:36Z")

</div>

Sure can!

> **[Glide Actions Concept App · Glide](https://www.loom.com/share/e3c13ce54b844df88ffb952c4bb80181)**

---

<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 6, 2021, 7:38pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/616 "2021-06-06T19:38:23Z")

</div>

Or this?

![2021-06-06 15.37.38](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/5767aaf29e301d9250531d70e516a96963b41664.gif)

```auto
<pre><span><style>
  button[aria-label="Profile"]::before {
content:url("https://www.teahub.io/photos/full/226-2267889_animated-circle-gif-transparent.gif");
bottom: -346px;
transform: scale(.045);
font-size: 8px;
position:absolute;
padding-left:0px;
z-index:1;
  }
</style>

```

---

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

</div>

Thanks Bob these are super helpful!

Going forward if we do want something like this even more thoughts need to be put in the building process. Can’t emphasize enough how much work it will be to put this on every details screen possible.

---

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

</div>

Did you remove the brackets? " [" and "] ".

---

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

</div>

Yes

---

<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:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/620 "2021-06-07T02:06:53Z")

</div>

Check this out! Using CSS to turn our `Separator: Small` into a divider that rounds out the components above and below!

Note, this only works with Light Theme. Dark theme apps should use this as the background/box-shadow colors: rgb(30, 34, 43);

 ![Screen Shot 2021-06-06 at 9.57.37 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed68c7b71b1086bbcddd4e5ce7bab4a409cd0054.png)

 ![Screen Shot 2021-06-06 at 9.57.46 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/782914c7591350e0a116179ffdfd849906a65e1a.png)

```auto
<pre><span><style>
[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
}

[data-test="app-hr"]:after {
  content: "";
  position:absolute;
  top:-40px;
  right:0;
  height:40px;
  width: 100%;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  background:#fff;
  box-shadow: 0 15px 0 0 rgb(246, 246, 246);
  z-index:-1 !important;
}

[data-test="app-hr"]:before {
  content: "";
  position:absolute;
  top:15px;
  right:0;
  height:40px;
  width: 100%;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  background:#fff;
  box-shadow: 0 -15px 0 0 rgb(246, 246, 246);
  z-index:-1 !important;
}

```

---

<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 7, 2021, 2:19am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/621 "2021-06-07T02:19:20Z")

</div>

great it’s good 👍 👏

---

<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, 2:24am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/622 "2021-06-07T02:24:50Z")

</div>

Impressive. Will be a lot helpful to divide tabs into clear sections. Thanks Bob.

---

<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 7, 2021, 3:36am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/623 "2021-06-07T03:36:56Z")

</div>

Well uh mm oddly the CSS works with the editor but does not work after publication ☹  
I allow myself to suggest a small correction, and at home it works.  
(Test with chrome/windows10 & Android)

result with your css

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

result after the small correction

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

the correction

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

```

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [June 7, 2021, 10:36am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/624 "2021-06-07T10:36:41Z")

</div>

Is there a way to put just a static cercle arround the image? Like a pink (with the theme color) circle

---

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

</div>

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

```auto
<pre><span><style>
  button[aria-label="Showcase 1"] svg {
    display: none;
  }
  button[aria-label="Showcase 1"] div div[size] {
    border: solid 2px #000000;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d");

  }

</style>

```

Change #000000 to your color’s hex.

---

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

</div>

This is awesome! Just what I was looking for so thanks!

I’ll assume it’s possible with visibility conditions to have two tabs (duplicate first one after completion), one shows the tab icon without this CSS - if “Profile”/“Avatar” [user-specific column] image IS EMPTY, and the other shows the tab icon/label as the Profile/Avatar Image IF NOT EMPTY…?

All this CSS lately…sheesh! 🤓

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [June 7, 2021, 1:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/627 "2021-06-07T13:11:43Z")

</div>

This is cool! Thanks

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

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