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

<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:** [January 3, 2021, 9:30am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/205 "2021-01-03T09:30:27Z")

</div>

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

Thanks to @Robert_Petitto’s child trick, I made a comments component work this way: the add comment is pushed up top, a little bit of padding for better spacing, and no “X comments” text.

```
<pre><span><style>
[data-test="app-comments-preview"] {
  display:flex;
  flex-direction: column-reverse;
}
[data-test="app-comments-preview"] >:last-child {
 padding: 0px 16px 16px 16px;
}
[data-test="app-comments-preview"] >:first-child{
display: none;
}
```

---

<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:** [January 3, 2021, 1:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/206 "2021-01-03T13:55:45Z")

</div>

This is exactly what I do in my group chat template!

---

<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:** [January 3, 2021, 6:53pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/207 "2021-01-03T18:53:18Z")

</div>

@ThinhDinh You solved it! Was wondering why my :first-child etc. weren’t working…needed the \> in front apparently.

---

<div class="post-metadata">

**Author:** ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)\
**Post date:** [January 3, 2021, 7:20pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/208 "2021-01-03T19:20:33Z")

</div>

lol i see this promo of your app in quite a few post. 😃

---

<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:** [January 3, 2021, 9:57pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/209 "2021-01-03T21:57:12Z")

</div>

Haha yeah it took me a while yesterday to figure this out. Gotta learn more about CSS Selectors.

---

<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:** [January 6, 2021, 9:08pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/210 "2021-01-06T21:08:50Z")

</div>

Hey @ThinhDinh, @Robert_Petitto, @Lucas_Pires and everyone else.

Do you have a trick to change the the color of the audio component?

Thanks guys.

---

<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:** [January 6, 2021, 9:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/211 "2021-01-06T21:10:00Z")

</div>

The background of it?

---

<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:** [January 6, 2021, 9:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/212 "2021-01-06T21:11:00Z")

</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:** [January 6, 2021, 9:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/213 "2021-01-06T21:18:01Z")

</div>

This is the best I could do.

Since the audio player is rendered from the browser, I don’t thing you can control it.

 ![Screen Shot 2021-01-06 at 4.17.15 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/2779b0848a7f92c140653e5b62b15116097c1c9f.png)

```auto
<pre><span><style>
[data-test="app-audio-wrapper"] {
background-color: red;
}

```

---

<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:** [January 6, 2021, 9:22pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/214 "2021-01-06T21:22:35Z")

</div>

Thanks! I will try that.

Edit: It works for what I want. Thanks a lot!

---

<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:** [January 7, 2021, 12:20am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/215 "2021-01-07T00:20:03Z")

</div>

@SantiagoPerez @Robert_Petitto This is an interesting discussion. I read about this a while ago and you can use the audio tag in CSS to style the audio, but beware of how it looks in different browsers, should test first to be sure.

Here’s the source code for all elements involved:

[https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F](https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F)

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

Here’s a sample.

```
<pre><span><style>
audio::-webkit-media-controls-enclosure {
width: 100%;
max-width: 800px;
height: 30px;
flex-shrink: 0;
bottom: 0;
text-indent: 0;
padding: 10px 5px 5px 0px;
box-sizing: border-box;
background-color: #90EE90;
}
```

---

<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:** [January 7, 2021, 12:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/216 "2021-01-07T00:21:07Z")

</div>

I even tried out a crazy code on Stackoverflow:

> <https://stackoverflow.com/questions/38011957/how-can-i-style-html-audio-player-play-button-color>

And it shows something like this, there’s various ways to style this component.

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

---

<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:** [January 7, 2021, 12:42am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/217 "2021-01-07T00:42:27Z")

</div>

Thanks man!!! Giving it a try now.

The goal is to make “transparent”. Let’s see what happens.

---

<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:** [January 7, 2021, 12:46am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/218 "2021-01-07T00:46:48Z")

</div>

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

Here you are. Just change the background-color to transparent.

---

<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:** [January 7, 2021, 12:54am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/219 "2021-01-07T00:54:11Z")

</div>

Nicely done. I was trying to target the `.audio` and I couldn’t figure it out…needed the `::webkit...` element. Nice.

---

<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:** [January 7, 2021, 1:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/220 "2021-01-07T01:21:17Z")

</div>

Awesome! It works perfectly.

Thanks man!

---

<div class="post-metadata">

**Author:** ![Mauricio\_Paz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mauricio_paz/32/17751_2.png) [@Mauricio\_Paz](https://community.glideapps.com/u/Mauricio_Paz)\
**Post date:** [January 7, 2021, 3:57am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/221 "2021-01-07T03:57:25Z")

</div>

Amazing! @ThinhDinh! Does anyone know how to remove the download icon? I would like to create an audio resources app that can be downloaded with a glide button only if you have paid, so I want to hide the download button in the player.

---

<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:** [January 7, 2021, 4:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/222 "2021-01-07T16:18:49Z")

</div>

@Robert_Petitto, @ThinhDinh, Do you have any tricks to change the color of the icon on the native floating button? In this theme the color of it is white and I need to change it black.

![Screen Shot 2021-01-07 at 10.17.37 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/94dffc84ccf02656e8c556dc252a29a3c458ec9f.png)

Thanks guys!

---

<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:** [January 7, 2021, 5:46pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/223 "2021-01-07T17:46:12Z")

</div>

Here you go! By the way, this might be a solution for you too, @Jeff_Hager, to target different FABs

 ![Screen Shot 2021-01-07 at 12.45.05 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/2/b2ddb298458a4c35fc7e90a70641731bbf3d1f68.png)

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

.fab-target :nth-child(1) > * {
background-color: red !important;
}

.fab-target :nth-child(2) > * {
background-color: green !important;
}

```

---

<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:** [January 7, 2021, 6:09pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/224 "2021-01-07T18:09:19Z")

</div>

Awesome!!! It works perfectly.

![Screen Shot 2021-01-07 at 12.30.47 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/0/801145e3901b69ec1318a1376a9e0489e266c787.png)

![Screen Shot 2021-01-07 at 12.31.00 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/e/9ec743a1433ec73e650e476e9fba3312d2886c07.png)

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

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