I donāt even see a part in your theme where you set the background. Can you point it out?
Thatās the thing Iāve never had a background set for the header always just had it transparent, Unfortunately something has changed in the last update but I have gone with DavidFW1960,s suggestion although not a transparent header it looks like it so will have to suffice .
Thanks for the help though guys. Cheers
What has changed in the last update of HA 2020.12.0?
The header bar was transparent, but changed color after the update.
I donāt know how to return a transparent color. Everything else works well.
card-mod-theme: "yourname"
# Header
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 48px !important;
}
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: #D2691E !important;
color: #696969 !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: #FF8C00 !important;
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
app-header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
/* This adds the time */
ha-button-menu::before {
font-size: 18px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.aktualni_den') }}";
position: absolute;
top: 16px;
right: 48px;
}
Okay, okay, everything changed. Iāll try to do some troubleshooting once I have some time.
I really appreciate it and thank you.
I think your actual problem is that the header isnāt on top of the view.
Yes it is correct. My header is down as I wanted.
My only problem is that it was set as transparent and now it is not.
Everything else works properly. The color of the icons, the header below, the icons from the center, the day of the week itās all good.
Something must have changed here, but I donāt know what.
Here I set the transparent header background and the color of the inactive icon.
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
Could you provide a mockup of desired behavior?
Required behavior:
header below - works
Color of active icons - works
Color of inactive icons - works
Icons from the center - works
3 set points - works
Side menu with 3 bars - works
days of the week - works
transparent header color - does not work
I found that the header background doesnāt respect the transparent color, but the others do. I set it to black and it works. Before the update, I had a transparent and it worked. I do not understand why.
Same problem for me! Before was transparent. Need it back!
this is after the update. Not have screenshot beforeā¦
Can you point me to a screenshot before the update?
This is a snapshot after the update. I donāt want to go back to take a picture, but whatās black was transparent.
I can probably live with black.
Iām just wondering why it doesnāt work and somehow I canāt accept that I canāt set the header as I need it.
The background used to go behind the whole thing, including the header, in previous versions. Now it just goes in the actual lovelace content part. Try setting the background instead of transparent to the image you use.
Iāll try well and let you know tomorrow. Thank you
What did you set to have an image appear in the background of the header?
Going through the release notes for all the Frontend versions since the last major release, I see no direct mention of a change that should have caused backgrounds to no longer extend into the header. Of course, it could be buried in a commit that I didnāt catch, but I opened an issue just in case it is a bug. This applies with or without card-mod in the theme as well so not a card-mod issue.