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

<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:** [August 4, 2021, 11:03pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/769 "2021-08-04T23:03:51Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> [id*='screenScrollView'] >div >div .current {
> color: white !important;
> background-color: black;
> }
> 
> [data-test="app-inline-picker"]{
> padding: 2px 0px 12px 0px;
> height: 60px;
> justify-content: center;
> background: transparent;
> }
> 
> [data-test="app-inline-picker-item"] {
> background: #008080;
> color: white;
> border-radius: 50%;
> margin: 0 7px;
> max-width: 50px;
> }
> 
> [data-test="app-inline-picker-item"] >div {
> background-color: transparent !important;
> }
> 
> ```

I am trying to do something similar but for 20 emojis, representing 20 metrics. Is it possible to have 4 rows of 5?  
📇  
⚙  
🕶  
🧲  
💹  
🏖  
🍛  
☀  
💧  
♻  
🌄  
🏗  
🚇  
🍼  
🌿  
🦐  
🏞  
⛵  
🏫  
🌎  
or is that way too many? thank you for your help…!

---

<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:** [August 4, 2021, 11:05pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/770 "2021-08-04T23:05:10Z")

</div>

Do you mean in choice components? I’m sure we can do that. What color for the background of the chosen icon do 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:** [August 4, 2021, 11:25pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/771 "2021-08-04T23:25:25Z")

</div>

Here you go.

Copyable app: [https://tdconcepts.glideapp.io/](https://tdconcepts.glideapp.io/)

---

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [August 5, 2021, 3:37am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/772 "2021-08-05T03:37:27Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/0/20cb127fca92569a183f243e4854a56b6c61c4b1.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:** [August 5, 2021, 7:41am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/773 "2021-08-05T07:41:46Z")

</div>

Sorry, here’s the code.

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

[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: white;
border: 5px solid green;
}

[data-test="app-inline-picker"]{
padding: 2px 0px 12px 0px;
height: 60px;
justify-content: center;
background: transparent;
}

[data-test="app-inline-picker-item"] {
background: white;
border: 1px solid black;
color: white;
border-radius: 50%;
margin: 0 7px;
max-width: 50px;
}

[data-test="app-inline-picker-item"] >div {
background-color: transparent !important;
}

```

---

<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:** [August 9, 2021, 4:05pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/774 "2021-08-09T16:05:05Z")

</div>

Thank you!

---

<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:** [August 9, 2021, 4:40pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/775 "2021-08-09T16:40:51Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> 
> [id*='screenScrollView'] >div >div .current {
> color: white !important;
> background-color: white;
> border: 5px solid green;
> }
> 
> [data-test="app-inline-picker"]{
> padding: 2px 0px 12px 0px;
> height: 60px;
> justify-content: center;
> background: transparent;
> }
> 
> [data-test="app-inline-picker-item"] {
> background: white;
> border: 1px solid black;
> color: white;
> border-radius: 50%;
> margin: 0 7px;
> max-width: 50px;
> }
> 
> [data-test="app-inline-picker-item"] >div {
> background-color: transparent !important;
> }
> 
> ```

can’t thank you enough… much appreciated!

---

<div class="post-metadata">

**Author:** ![elvirabtny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elvirabtny/32/23719_2.png) [@elvirabtny](https://community.glideapps.com/u/elvirabtny)\
**Post date:** [August 17, 2021, 5:18am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/776 "2021-08-17T05:18:58Z")

</div>

Hi Gliders !  
I’m working on this 👇🏽  
Tell me what you think about it !

 ![Capture d’écran 2021-08-17 à 1.15.01 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4e205f8a6fa00165240361d58e1c6bfdd2457b14.jpeg)

---

<div class="post-metadata">

**Author:** ![Oscar\_Mijael\_Perez\_G](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oscar_mijael_perez_g/32/30514_2.png) [@Oscar\_Mijael\_Perez\_G](https://community.glideapps.com/u/Oscar_Mijael_Perez_G)\
**Post date:** [August 17, 2021, 6:10am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/777 "2021-08-17T06:10:33Z")

</div>

looks great

---

<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:** [August 17, 2021, 9:09pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/778 "2021-08-17T21:09:02Z")

</div>

love it

---

<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 2, 2021, 5:39am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/779 "2021-09-02T05:39:15Z")

</div>

wow this is very good! I love the people illustrations (that’s good, coming from an illustrator)

---

<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 3, 2021, 10:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/780 "2021-09-03T22:18:45Z")

</div>

Hi Gliders

Please can anyone assist me with CSS to change the colour of the check icon in my app to green as it picks the app colour theme?

Thanks

![Check Icon1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/865fd945246de8fe83f8c6646f003a079a6aacc5.jpeg)

![Check Icon2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/8768a78e8f20b6668e2340def369bce7bc282a99.jpeg)

---

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

</div>

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

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

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/abf04544b02218721d7048b368419c95e4c939c8.png)

I was not able to change the “ring” color though.

---

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

</div>

Beautiful!!! Works just fine. I truly appreciate

---

<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:** [September 4, 2021, 5:44pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/783 "2021-09-04T17:44:14Z")

</div>

🙃don’t work for me

---

<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 4, 2021, 11:44pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/784 "2021-09-04T23:44:25Z")

</div>

These components have had a rework about some weeks ago (so structure of code is changed) and to be honest I would not use a background along those entries now. It looks more beautiful to me.

---

<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 5, 2021, 12:04am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/785 "2021-09-05T00:04:43Z")

</div>

But if you really want this here’s a quick draft.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/57a1a2784038f7aed98de900391087305213929c.jpeg)

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=e4f3844410ec494fa76fef22125d6b1c)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=61388c4c08e64109ab57b48cf72e10dc)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<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:** [September 5, 2021, 6:47pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/786 "2021-09-05T18:47:10Z")

</div>

THANKS BRO 🙂

---

<div class="post-metadata">

**Author:** ![Oscar\_Gonzalez1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oscar_gonzalez1/32/31428_2.png) [@Oscar\_Gonzalez1](https://community.glideapps.com/u/Oscar_Gonzalez1)\
**Post date:** [September 7, 2021, 5:51am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/787 "2021-09-07T05:51:16Z")

</div>

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

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

[data-test="app-button-view"] {
background-color: transparent !important;
border: 1px solid transparent !important;
margin: 10px 90px;
color: #E50914 !important;
border-color: #E50914 !important;
letter-spacing: 4px;
}

[data-test="app-button-view"]:hover {
color: #fff !important;
background-color: #E50914 !important;
border-color: #E50914 !important;
box-shadow: 0 0 10px #E50914, 0 0 40px #E50914, 0 0 80px #E50914;
}

```

---

<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:26pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/788 "2021-09-07T14:26:09Z")

</div>

Oh wow awesome. can you share or point me to @Jeff_Hager 's code please! I want to show a calendar that can visually show if user has completed the task for that day.

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

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