šŸ”¹ Card-mod - Super-charge your themes!

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 :grin:.
Thanks for the help though guys. Cheers

1 Like

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!

head

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.

This is when I change to 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. :sleepy:

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

The background image works, but the transition is visible.Iā€™ll probably leave the black

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.