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

<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:** [February 24, 2021, 9:43pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/427 "2021-02-24T21:43:33Z")

</div>

Pretty much any number that you see in that code you can play with, the best way is to click the link I posted above, and go to test CSS tab

---

<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:** [February 25, 2021, 4:36am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/428 "2021-02-25T04:36:50Z")

</div>

i updated Code BOOK with new look… and codes

---

<div class="post-metadata">

**Author:** ![Pablo\_Sanz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_sanz/32/16415_2.png) [@Pablo\_Sanz](https://community.glideapps.com/u/Pablo_Sanz)\
**Post date:** [February 28, 2021, 2:08am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/429 "2021-02-28T02:08:41Z")

</div>

cool

---

<div class="post-metadata">

**Author:** ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)\
**Post date:** [March 2, 2021, 12:06pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/430 "2021-03-02T12:06:15Z")

</div>

Hello boys. Will anyone have a CSS code to change the color of several buttons that are one below the other, but that each color is different?

With the code that CSS I have, I put all of the same color.

@Lucas_Pires @Uzo @Darren_Murphy @Pedroydzito

---

<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:** [March 2, 2021, 12:08pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/431 "2021-03-02T12:08:54Z")

</div>

This?

> [@ThinhDinh](#):
>
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c770482f7ac22a81f7f3168e8a54156e81cc7549.png)
> 
> This should be it. Credits to @Lucas_Pires with the original idea.
> 
> ```auto
> <pre><span><style>
> div[id*='screenScrollView'] > div > :nth-of-type(1) .floating-btn-style {
> background-color: green;
> }
> div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style {
> background-color: red;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)\
**Post date:** [March 2, 2021, 12:13pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/432 "2021-03-02T12:13:08Z")

</div>

No, I have used that one for the floating buttons.

In this case I need to be able to change the colors that way, but in normal buttons (the first ones of glide) but I tried this code and it did not work for me.

@Darren_Murphy

---

<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:** [March 2, 2021, 12:15pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/433 "2021-03-02T12:15:30Z")

</div>

A code is not specific for one thing when you start to manage for what you want

> [@Is it possible to change button color](https://community.glideapps.com/t/is-it-possible-to-change-button-color/23236/8):
>
> Actually, we can using this workaround: Replacing the “See All” class to button’s class and the order of the component: \<pre\>\<span\>\<style\> div[id\*='screenScrollView'] \> div \> :nth-of-type(4) button { background-color: red; color: yellow; }

---

<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:** [March 2, 2021, 12:22pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/434 "2021-03-02T12:22:30Z")

</div>

Just go to a Code BOOK App, you will find it.

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)\
**Post date:** [March 2, 2021, 12:24pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/435 "2021-03-02T12:24:25Z")

</div>

Yes, I know. I had tried changing the classes but didn’t know the exact name.

Just what I was looking for. Thanks a lot @Lucas_Pires

---

<div class="post-metadata">

**Author:** ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)\
**Post date:** [March 2, 2021, 12:25pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/436 "2021-03-02T12:25:05Z")

</div>

Yes, your input is great, I have used your CSS code app on many occasions.

---

<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:** [March 2, 2021, 12:26pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/437 "2021-03-02T12:26:30Z")

</div>

Get the code you need and change child() numbers for specific buttons, and add more children if you wanna target more buttons, just fallow the pattern in the code, in this app, there is a test CSS tab, you can try to modify code and see results

---

<div class="post-metadata">

**Author:** ![MonsterGo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/monstergo/32/18780_2.png) [@MonsterGo](https://community.glideapps.com/u/MonsterGo)\
**Post date:** [March 2, 2021, 12:47pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/438 "2021-03-02T12:47:08Z")

</div>

Anyone know how to change this card style color? from white to maybe other color ?

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

---

<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:** [March 2, 2021, 1:35pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/439 "2021-03-02T13:35:46Z")

</div>

just in type() enter component number as it is in your editor

> ```
> div[id\*='screenScrollView'] \> div \> :nth-of-type(2) button { background-color: red; color: green; } div[id\*='screenScrollView'] \> div \> :nth-of-type(3) button { background-color: green; color: red; } div[id\*='screenScrollView'] \> div \> :nth-of-type(12) button { background-color: black; color: white; } div[id\*='screenScrollView'] \> div \> :nth-of-type(13) button { background-color: purple; color: yellow; } div[id\*='screenScrollView'] \> div \> :nth-of-type(14) button { background-color:yellow; color: black; }
> ```

---

<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:** [March 2, 2021, 2:08pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/440 "2021-03-02T14:08:11Z")

</div>

You’re welcome!

---

<div class="post-metadata">

**Author:** ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)\
**Post date:** [March 2, 2021, 3:31pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/441 "2021-03-02T15:31:40Z")

</div>

What a pity. Will you have a CSS code to change the color of a choice?

---

<div class="post-metadata">

**Author:** ![Gdclavijo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gdclavijo/32/13069_2.png) [@Gdclavijo](https://community.glideapps.com/u/Gdclavijo)\
**Post date:** [March 3, 2021, 2:07am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/442 "2021-03-03T02:07:23Z")

</div>

Pedro… it’s amazing progress bar 🎉… congrants… Could you share us the CSS code? … thanks 😉

---

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

</div>

Do you have any current CSS settings for that card type? I’ll add to that.

---

<div class="post-metadata">

**Author:** ![MonsterGo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/monstergo/32/18780_2.png) [@MonsterGo](https://community.glideapps.com/u/MonsterGo)\
**Post date:** [March 3, 2021, 9:32am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/444 "2021-03-03T09:32:10Z")

</div>

hi, i dont have any CSS on the card style… im asking if anyone know how to change the card style too 😅

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [March 3, 2021, 9:56pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/445 "2021-03-03T21:56:44Z")

</div>

```auto
<!--Image-->
<p style="position: Absolute;
width: 43px;
left: 50%;
margin-top: 0px;
margin-left: -140px;
transform: translate(-50%, 0%)">
<img src="https://i.imgur.com/FvPtAkr.png" /></p>

<!--Progress Bar-->
<pre><span><style>
.fckzPp {position: absolute;
background: #13161d;
height: 9px;
width: 261px;
left: 50%;
border-radius: 100px;
margin-right: -50%;
margin-left: 26px;
transform: translate(-50%, 0%)}
</pre></style></span>

```

And the text I created a template column, to be updated as the tasks are done.

```auto
<!--Text-->
<center><h5><font color="#efbc00">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FINISHED% Concluído<font color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; CONCLUDED/REMAINING Tarefas

```

Certainly, there is a better way to make the spacing better, but it worked, except for the fact that the size is tiny when it is on its side, but I still have to fix it …

---

<div class="post-metadata">

**Author:** ![scottj52101](https://avatars.discourse-cdn.com/v4/letter/s/ee59a6/32.png) [@scottj52101](https://community.glideapps.com/u/scottj52101)\
**Post date:** [March 4, 2021, 8:53pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/446 "2021-03-04T20:53:02Z")

</div>

I’m using Chrome, and the Code BOOK app doesn’t open.

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

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