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

<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:** [July 17, 2021, 4:36am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/749 "2021-07-17T04:36:52Z")

</div>

It is this one right here. @Manu.n

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/6):
>
> Oh man… this would be awesome if we could use CSS the right way. Super exciting to hear that its being looked at! I use CSS mainly to style buttons, implement full background images, change the color of fonts, change padding/margins. In addition, I give users the ability to modify their color choices for their buttons and background opacity. Before: After: \<div class="background"\>\</div\> \<pre\>\<span\>\<s…

```auto
<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
height: 100%;
width: 100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
opacity: .3;
background-image: url("URL"); 
background-size: cover;
background-position: center center; 
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div > div {
color: #FFF; }

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left; 
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div {
color: #FFF; 
}

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 1px;
margin: 0px 16px 0px 20px;
justify-content: left;
}

<pre><span><style>

.hUuORH.hUuORH {
color: #TEXT !important;
background-color: #BACKGROUND !important;
border-color: #BORDER !important;
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left;
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}
[data-test="app-tag-overlay"] {
background-color: #BACKGROUND;
color: #TEXT;
}

```

---

<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:** [July 17, 2021, 4:40am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/750 "2021-07-17T04:40:51Z")

</div>

yeah !!!  
But it is easier to use a list-tiles with images !!!

---

<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:** [July 17, 2021, 4:45am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/751 "2021-07-17T04:45:41Z")

</div>

@Manu.n

That’s what I am using but I want them to be centered and closer together.

---

<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:** [July 17, 2021, 5:07am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/752 "2021-07-17T05:07:11Z")

</div>

function with tile horizontal mode

```auto

<pre><span><style>

[data-test="app-horizontal-list"] .inner {
    column-gap: 2px !important;
margin:0px auto;
}

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

```

---

<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:** [July 17, 2021, 5:14am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/753 "2021-07-17T05:14:58Z")

</div>

Thanks @Manu.n

It works great!!!

> [@Manu.n](#):
>
> ```auto
> <pre><span><style>
> 
> [data-test="app-horizontal-list"] .inner {
> column-gap: 2px !important;
> margin:0px auto;
> }
> 
> </style></span></pre>
> 
> ```

---

<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:** [July 17, 2021, 5:17am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/754 "2021-07-17T05:17:03Z")

</div>

with smaller images

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/5/25de5d7bae16b2f833ba020a91d1ef09a51b6b75.png)

```auto

<pre><span><style>

[data-test=app-horizontal-list] .scroller {
overflow-x:visible;
}

[data-test=app-horizontal-list] .inner {
grid-template-columns: repeat(4,50%)
!important;
width:35%;
 column-gap: 2px !important;
margin:0px auto;
transform:translatex(-35%);
}

[data-test=app-horizontal-list] .tile-image-area:nth-child(1) img {
height:60%;
border-radius: 50%;
}

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

```

---

<div class="post-metadata">

**Author:** ![Frankchavezbernal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/frankchavezbernal/32/41891_2.png) [@Frankchavezbernal](https://community.glideapps.com/u/Frankchavezbernal)\
**Post date:** [July 17, 2021, 6:59am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/755 "2021-07-17T06:59:40Z")

</div>



---

<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:** [July 17, 2021, 12:17pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/756 "2021-07-17T12:17:14Z")

</div>

Mine was a little unique in that I set it up using both css and html. The social icons are dynamically displayed for each unique user, so a horizontal list didnt work for me

---

<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:** [July 17, 2021, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/757 "2021-07-17T12:23:09Z")

</div>

Thanks!!!’

I got it with @Manu.n’s help.

---

<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:** [July 17, 2021, 1:50pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/758 "2021-07-17T13:50:41Z")

</div>

Hola @ThinhDinh

Is this still working on your app??? I have in 3 apps and seems to have stopped working.

---

<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:** [July 17, 2021, 3:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/759 "2021-07-17T15:11:36Z")

</div>

I handed that app over already so haven’t checked. What exactly does not work?

---

<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:** [July 17, 2021, 3:48pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/760 "2021-07-17T15:48:47Z")

</div>

The icon doesn’t change at all, it only takes the Glide default one.

---

<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:** [July 18, 2021, 12:22pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/761 "2021-07-18T12:22:34Z")

</div>

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

Stil working normally for me.

---

<div class="post-metadata">

**Author:** ![Ludka](https://avatars.discourse-cdn.com/v4/letter/l/e56c9b/32.png) [@Ludka](https://community.glideapps.com/u/Ludka)\
**Post date:** [July 23, 2021, 1:38am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/762 "2021-07-23T01:38:38Z")

</div>

Hi @Lucas_Pires . I was discovering your Succinte app and would like to ask about it, but can’t find the thread, sorry.  
I want to know how you created those first pages that educate the user about the app, before going to the dashboard.

Thank you

---

<div class="post-metadata">

**Author:** ![Falcor](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/falcor/32/3166_2.png) [@Falcor](https://community.glideapps.com/u/Falcor)\
**Post date:** [July 23, 2021, 11:31am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/763 "2021-07-23T11:31:32Z")

</div>

To change the look of the Choice component I put your code in the Rich text before Choice component but nothing happens. What I did wrong?

---

<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:** [July 30, 2021, 2:48am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/764 "2021-07-30T02:48:00Z")

</div>

Many people including me use the choice component to show different inline lists based on user’s choice.

The new update for the segmented choice component makes it look not that great, so here’s my fix.

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/8392accc936bf6b0316c1dcaaef4df17f63bb0ae.gif)

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

[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: #D2202F;
}

```

Please change your background color accordingly.

Also, this makes me realize the choice component now supports a “current” class so it might make life easier for us to customize it @Robert_Petitto @Lucas_Pires @Manu.n.

---

<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:** [July 30, 2021, 2:55am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/765 "2021-07-30T02:55:03Z")

</div>

I noticed that! Time to customize!

---

<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:** [July 30, 2021, 3:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/766 "2021-07-30T03:06:43Z")

</div>

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

```

No need for complex specific component target @Lucas_Pires.

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

Updated here.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=f844917bac364480a6d7329c07207ac5)**
>
> 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:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [July 30, 2021, 4:30am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/767 "2021-07-30T04:30:17Z")

</div>

Perfect - even got my colour right!  
I’m already using this 😂

 ![Screen Shot 2021-07-30 at 12.29.11 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d5c1855b644b154cc6cc07c33d50db6eb71d8942.png)

---

<div class="post-metadata">

**Author:** ![Aymeric\_de\_Maussion](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymeric_de_maussion/32/29505_2.png) [@Aymeric\_de\_Maussion](https://community.glideapps.com/u/Aymeric_de_Maussion)\
**Post date:** [July 30, 2021, 7:47am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/768 "2021-07-30T07:47:55Z")

</div>

I really like this new design +1

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

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