top bar - CSS code customization

[CarlosLima 148]

Hi
again here to ask for help on the top bar, which again broke in the EmbyServer 4.2.0.40 update.

I use the CSS code below and it is not doing the effects I want.

1. the top bar on the login screen:
I would like to have her transparent

2. the top bar in the homescreen:
I would like to have her transparent

3. the top bar on the dashboard:
I would like to have it in the default color (only it is transparent)

Thank you for any help.

div.skinHeader {background-color: transparent; }
div.skinHeader-withBackground {background: transparent; }

Edited August 13, 2019 by CarlosLima

[Happy2Play 8282]

Something like this.

div.skinHeader.skinHeader-withBackground {
    background: transparent;
    backdrop-filter: none;
}

[CarlosLima 148]

Tks so much

[CarlosLima 148]

Hi, thank you very much, the login screen and homepage are now working perfectly; both transparent.

The dashboard screen is also transparent and for her I would like to use the default Emby color.

Can you help with that too?

[Happy2Play 8282]

Hi, thank you very much, the login screen and homepage are now working perfectly; both transparent.

 

The dashboard screen is also transparent and for her I would like to use the default Emby color.

 

Can you help with that too?

 

I guess something like this, but it looks like this will break in 4.3 again.

div.skinHeader.skinHeader-withBackground {
    background: transparent;
    backdrop-filter: none;
}

.dashboardDocument div.skinHeader.skinHeader-withBackground  {
       background: rgba(49,50,53,.8);
       backdrop-filter: saturate(1.8) blur(1.5em);
}

[CarlosLima 148]

 

I guess something like this, but it looks like this will break in 4.3 again.

div.skinHeader.skinHeader-withBackground {
    background: transparent;
    backdrop-filter: none;
}

.dashboardDocument div.skinHeader.skinHeader-withBackground  {
       background: rgba(49,50,53,.8);
       backdrop-filter: saturate(1.8) blur(1.5em);
}

 

Perfect. Thank you very much.

[cochize1 41]

On 8/13/2019 at 6:34 PM, Happy2Play said:

Something like this.

div.skinHeader.skinHeader-withBackground {
    background: transparent;
    backdrop-filter: none;
}

So, I am using the same code for a long now but just today I have noticed that there is very slim, maybe 1px white (?) line left that is scrolling down with the transparent skinheader.

How can I remove that?

[Happy2Play 8282]

Here you go

div.skinHeader-withBackground.skinHeader-withfulldrawer {
    border-bottom: none;
}

[cochize1 41]

Thanks for the answer but most importantly thanks for the screenshot. I have been using the Console all wrong. Just now I realised that there are 'Styles' section, not just 'Elements' and that makes addressing things more easy I guess. Have to try it. Thank you CSS Yoda!