# CSS for the top banner

**URL:** <https://community.glideapps.com/t/css-for-the-top-banner/22399>\
**Category:** Ask for Help\
**Created:** [February 8, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399 "2021-02-08T13:10:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexh](https://avatars.discourse-cdn.com/v4/letter/a/6f9a4e/32.png) [@alexh](https://community.glideapps.com/u/alexh)\
**Post date:** [February 8, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/1 "2021-02-08T13:10:50Z")

</div>

Hi,

I am trying to change create the CSS in order to change the top banner with name of tab.  
Thanks for 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:** [February 8, 2021, 1:32pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/2 "2021-02-08T13:32:07Z")

</div>

Check this thread, You will find plenty of CSS for different cases.

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/215):
>
> @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) Here’s a sample. \<pre\>\<span\>\<style\> audio::-webkit-media-…

I will post the CSS that you asked for. Give me a minute.

---

<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:** [February 8, 2021, 1:33pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/3 "2021-02-08T13:33:20Z")

</div>

Here it is. Change URL for your picture URL.

```
<span/>
<style>
#app-root div[opacity='1'] {
  color: transparent; 
}
.nav-bar-root {
  content: "";
  display: block;
  background-image: url(URL);
  background-size: 600px 50px;
  background-repeat: no-repeat; 
background-position: center, center;
;}
</style>
```

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 8, 2021, 1:57pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/4 "2021-02-08T13:57:55Z")

</div>

Figured this out for changing the text, but it’s not great. An image with the example above would be better.

> [@The Name of a Tab is used in two incompatible places](https://community.glideapps.com/t/the-name-of-a-tab-is-used-in-two-incompatible-places/22149/8):
>
> This is the best I could do so far, but I couldn’t find a stable class name that would work across different devices/browsers/layouts \<pre\>\<span\>\<style\> .efWssb { visibility: hidden; } .efWssb:after { visibility: visible ; content: "New Text"; } \</style\>\</span\>\</pre\> This works on the devices/browsers/layout I was testing with, but the class name could be different for different people…unless someone else can find a better solution.

---

<div class="post-metadata">

**Author:** ![alexh](https://avatars.discourse-cdn.com/v4/letter/a/6f9a4e/32.png) [@alexh](https://community.glideapps.com/u/alexh)\
**Post date:** [February 8, 2021, 2:20pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/5 "2021-02-08T14:20:10Z")

</div>

thanks

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 6, 2021, 2:36am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/6 "2021-06-06T02:36:16Z")

</div>

Seems

```
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; } Even in the Code book is gray. Is it not working anymore or its just me ?
```

---

<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:** [June 6, 2021, 3:06am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/7 "2021-06-06T03:06:43Z")

</div>

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

```auto
<pre><span><style>
[data-test="app-audio-wrapper"] {
position: fixed;
background-color: red;
color:yellow;
width: 100%;
max-width: 700px;

flex-shrink: 0;
bottom:80px;
text-indent: 0;
padding: 5px 5px 5px 5px;
box-sizing: border-box;
z-index:1;
}

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

<pre><span><style>
audio::-webkit-media-controls-enclosure {

background-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:** [June 6, 2021, 3:12am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/8 "2021-06-06T03:12:36Z")

</div>

use this one for iOS… the other one works on any other system

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 6, 2021, 7:42am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/9 "2021-06-06T07:42:30Z")

</div>

Thanks ,i’ll try , have a good sunday.  
Ps.seems we can only use one player at time with this one , isn’it ?In the code book (huge app) the green one stays gray.  
Ps.2 i’m off topic here , my bad i do apologize.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13b6b00772d1952a1c1937a4b8efb3288c13d104.jpeg)

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 6, 2021, 8:57am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/10 "2021-06-06T08:57:35Z")

</div>

Yes it does work on my Android.  
I was planning to use an array of audio player with that beautiful green you use in the Code book ,  
but one it seems we can use just one rich text component at time and two as you can see above just one ( in my case audio ) component at time…

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 6, 2021, 9:23am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/11 "2021-06-06T09:23:09Z")

</div>

> [@Uzo](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-audio-wrapper"] {
> position: fixed;
> background-color: red;
> color:yellow;
> width: 100%;
> max-width: 700px;
> 
> flex-shrink: 0;
> bottom:80px;
> text-indent: 0;
> padding: 5px 5px 5px 5px;
> box-sizing: border-box;
> z-index:1;
> }
> 
> </style></span></pre>
> 
> <pre><span><style>
> audio::-webkit-media-controls-enclosure {
> 
> background-color:yellow;
> }
> 
> ```

This way I can have an array of audio players

```
[data-test="app-audio-wrapper"] { position: ; background-color: #8FE147 ; color:yellow; width: 100%; max-width: 700px; flex-shrink: 0; bottom:80px; text-indent: 0; padding: 15px 5px 5px 5px; box-sizing: border-box; z-index:1; } ps.sunday's experiments!!!! ;) this way you can have only the play and pause button ( no download ? I hope so....seems so ,uiiii :slight\_smile: )
```
[data-test="app-audio-wrapper"] { position: ; background-color: rgba(255, 255, 255, 0) ; color: #8FE147 ; width: 0%; max-width: 700px; flex-shrink: 0; bottom:80px; text-indent: 0; padding: 15px 5px 5px 165px; box-sizing: border-box; z-index:1; } changing the padding and the hex color you can have something different and you can also put another rich text editor together and put a make background.io beautiful svg there !!!!1
```
```

---

<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:** [June 6, 2021, 10:06am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/12 "2021-06-06T10:06:24Z")

</div>

For use in arrays remove position:fixed; and bottom: 80px;

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 6, 2021, 10:34am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/13 "2021-06-06T10:34:02Z")

</div>

I can’t see any audio player at all on my devices, while on my app they do, i will start back from scratch , thanks Uzo.

---

<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:** [June 6, 2021, 10:44am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/14 "2021-06-06T10:44:08Z")

</div>

i tested and it work good on all devices. @Manu_Marea

[TEST AUDIO LINK](https://sa-test.glideapp.io/dl/ewAiAHQAIgA6ADcALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBBAEsAagBWAHYAbgBwAG8AbgBHAG8AdABRAGUARQBZAGwAdAA5AHIAIgAsACIAcgAiADoAIgBmAC0AUAB2AG8AYwBvADIAUQBiAHkANQBBAG4AZgBYAG0AZwBpAHgATQBnACIALAAiAG4AIgA6ACIAYQB1AGQAaQBvACAAcABsAGEAeQBlAHIAIgB9AA%3D%3D)

```auto
<pre><span><style>
[data-test="app-audio-wrapper"] {

background-color: red;

}

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

<pre><span><style>
audio::-webkit-media-controls-enclosure {

background-color:yellow;
}

```

[![Screen Shot 2021-06-06 at 6.45.33 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/4/04d02e19fb5f20fbf4c4810873bae79901d4c5ab.png)](https://sa-test.glideapp.io/dl/ewAiAHQAIgA6ADcALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQBBAEsAagBWAHYAbgBwAG8AbgBHAG8AdABRAGUARQBZAGwAdAA5AHIAIgAsACIAcgAiADoAIgBmAC0AUAB2AG8AYwBvADIAUQBiAHkANQBBAG4AZgBYAG0AZwBpAHgATQBnACIALAAiAG4AIgA6ACIAYQB1AGQAaQBvACAAcABsAGEAeQBlAHIAIgB9AA%3D%3D)

---

<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:** [June 6, 2021, 11:03am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/15 "2021-06-06T11:03:42Z")

</div>

![Screen Shot 2021-06-06 at 7.02.24 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/d/9deef124babcc16df33bccb9015c8b960856a965.png)

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

<pre><span><style>
audio::-webkit-media-controls-enclosure {

background-color:yellow;
}

div[id*='screenScrollView'] > div > :nth-child(1) {
display:fixed;
margin-left:-5px;
width:350px;
background-color:red;
}

div[id*='screenScrollView'] > div > :nth-child(2) {
display:fixed;
margin-left:-5px;
width:250px;
background-color:blue;
}

div[id*='screenScrollView'] > div > :nth-child(3) {
display:fixed;
margin-left:-5px;
width:150px;
background-color:green;
}

```

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 6, 2021, 12:15pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/16 "2021-06-06T12:15:32Z")

</div>

> [@Uzo](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-audio-wrapper"] {
> position: fixed;
> background-color: red;
> color:yellow;
> width: 100%;
> max-width: 700px;
> 
> flex-shrink: 0;
> bottom:80px;
> text-indent: 0;
> padding: 5px 5px 5px 5px;
> box-sizing: border-box;
> z-index:1;
> }
> 
> </style></span></pre>
> 
> <pre><span><style>
> audio::-webkit-media-controls-enclosure {
> 
> background-color:yellow;
> }
> 
> ```

You are great !  
Thanksssssssss

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 7, 2021, 7:46am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/17 "2021-06-07T07:46:55Z")

</div>

Wanna thank you Uzo again,sadly i can’ use yet , first i have to disable the direct access on server ,pda because that right three dots even minimized at 1px are the first to come back,letting user able to download songs ( this just on Androids),i hope to see a new audio player component in Glide with download disabling option or at least a button placeable freely able to play mp3 and not just those sounds.  
Thanks for helping.

---

<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:** [June 7, 2021, 9:55am UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/18 "2021-06-07T09:55:59Z")

</div>

so to reply… i will have to play this song… enjoy… Action!!!

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/9/f9ee55f96c30f43d0abf741b094488f1aae2e3e6.jpeg "Zaz à Montmartre Les passants") ](https://www.youtube.com/watch?v=lWIhYWJsdB0)

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [June 7, 2021, 4:07pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/19 "2021-06-07T16:07:01Z")

</div>

I love it !

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:51pm UTC](https://community.glideapps.com/t/css-for-the-top-banner/22399/20 "2024-01-17T16:51:52Z")

</div>