CSS for the top banner

Hi,

I am trying to change create the CSS in order to change the top banner with name of tab.
Thanks for help.

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

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

1 Like

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>
5 Likes

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

4 Likes

thanks

1 Like

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

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

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.

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…

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

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

2 Likes

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.

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

TEST AUDIO LINK

<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

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

You are great !
Thanksssssssss

1 Like

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.

1 Like

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

1 Like

I love it !