Beautiful Design App

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


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

1 Like

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.

The background of it?


This is the best I could do.

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

[data-test="app-audio-wrapper"] {
background-color: red;

Thanks! I will try that.

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

1 Like

@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:

Here’s a sample.

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;

I even tried out a crazy code on Stackoverflow:

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


Thanks man!!! Giving it a try now.

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

1 Like

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


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


Awesome! It works perfectly.

Thanks man!

1 Like

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.

1 Like

@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

Thanks guys!

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


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

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


Awesome!!! It works perfectly.

Screen Shot 2021-01-07 at 12.30.47 PM

Screen Shot 2021-01-07 at 12.31.00 PM

1 Like

Hello, do you know how to do this in an Inline List, thank you very much for your contributions, the community is fascinating, there is a lot of knowledge and support here I like itPreguntar a comunidad glide

1 Like

Can you specify on what layout of the inline list do you want to do this?

Hello, of course look, I have this app and an Inline list where I present the social networks and I would like to have the background in red

1 Like