🔹 Card-mod - Super-charge your themes!

[anon12659957]

Does Compact-Header still work on HA 2023.4.0?

This following code in my theme.yaml doesn’t do jackshit

ios-dark-mode:
  # Global
  card-mod-theme: ios-dark-mode
  card-mod-root-yaml: |
    .: |
      ha-menu-button {
        display: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;
        }
      }

[Mariusthvdb (Marius)]

Card-mod - Add css styles to any lovelace card

I was able to fix that, using above suggestion for replacing “app-header” with “.header”, “app-toolbar” with “.toolbar”, and some more adjustments. Here is my full theme configuration, in case anyone want to compare.

thanks for noticing that, I hadn’t, because my existing theme mods on those app-header and app-toolbar still work. which is remarkable?

      /* Set the toolbar background. */
      app-header, app-toolbar {
        background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
                       if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        color: var(--text-primary-color);
      }

ive check and moved to:

      /* Set the toolbar background. */
      .header, .toolbar {
        background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
                       if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        color: var(--text-primary-color);
      }

and yes, that works also
huh?

need to check if the main settings also have changed:

  app-header-background-color:
  app-header-text-color:
  app-header-edit-background-color:

for that matter… no, they havent: frontend/src/resources/styles.ts at 81ebdf1448ab25689736ad59e5c9012e971280d1 · home-assistant/frontend · GitHub

but, also see this:

app-header and app-toolbar are still very much alive

[Daniel_Reimer]

If someone stumbles upon these for 2023.4.0 let me know:

  card-mod-sidebar: |
    :host {
      background: var(--ha-card-background) !important;
    }
    div.menu {
      background: transparent !important;
    }
    paper-icon-item[role=option], paper-icon-item[aria-role=option] {
      background: var(--ha-card-background) !important;
    }
    .iron-selected paper-icon-item {
      background: var(--ha-card-background) !important;
    }

[GoodyGizmos]

How do I change the color of the entire header?

I’ve tried a handful of variations on this:

  card-mod-root-yaml: |
      .: |
        app-header {
          color: black !important;
        }

[mase]

anyone knows how to move the back-arrow of a subview up?

.mdc-icon-button {
  padding-bottom: 10px;
}

doesn´t work for me

moving the title up worked with

.main-title {
  padding-bottom: 10px;
}

[danm89]

Try this.

  card-mod-root-yaml: |
      .: |
        .header {
          color: black;
        }

[GoodyGizmos]

Thanks, but I couldn’t get that to work.

I did find the HA built-in variable app-header-background-color: that seems to do what I need except that I currently have that variable set to different colors for light and dark mode. For most of my devices, I want to keep the header background color intact for light and dark modes, but I need to turn it black based on a specific @media query selector on a specific device regardless of light/dark mode. I think the right way to do this is to place the media query in both light/dark mode sections, but cannot seem to figure out the right syntax for media queries in those sections.

  modes:
    light:
      @media (orientation: landscape) and (min-width: 950px) {
          .header {
            --app-header-background-color: black;
          }

So, here’s a new question:
What’s the right way to wrap a built-in HA variable with a media query in the modes section of a theme?

[Olivier1974 (Olivier Toussaint)]

Since 2023.4, my theme using card-mod is broken, but only in the companion app (iOS).
The culprit part is this:

card-mod-view-yaml: |
    hui-masonry-view $: |
      .badges {
        margin-top: auto !important;
      }
    .: |
      hui-masonry-view {
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
      }

It is to put the badges at the bottom of the pages.
It is working perfectly fine in a browser but in the companion app, the pages are opening at the bottom and it is not possible to scroll up.

At startup:

Trying to scroll (generating a refresh):

When I put the default theme (not using card-mod), everything is working as expected.

[pepe59]

I have this code where the top bar has been moved down.
The color was black.
After the HA 2023.4 update the bar is back up and gray and I have no idea how to get it back down, black.
Everything else works fine.
Do you have any idea?

    card-mod-theme: hapanel
    # 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: black !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: 150px;
          margin-right: 150px;
          content: "{{ states('sensor.aktualni_den') }}";
          position: absolute;
          top: 16px;
          right: 48px;
        }

[mase]

try changing app-header to .header and app-toolbar to .toolbar, don´t forget to reload your themes after changing it.

card-mod-theme: hapanel
    # 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. */
        .header, .toolbar {
          background: black !important;
          color: #A9A9A9 !important;
        }
        .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: 150px;
          margin-right: 150px;
          content: "{{ states('sensor.aktualni_den') }}";
          position: absolute;
          top: 16px;
          right: 48px;
        }

[Mar1us]

Hi,

since 2023.4 my very simple theme to remove the top header is not working anymore. Anyone how to fix?

Theme

#Mushrooms Shadow Theme for Mobile Interface
Mushroom Shadow Mobile:
  card-mod-theme: Mushroom Shadow Mobile
  card-mod-root: |
    app-toolbar {
      display: none;
    }
  # Home Assistant override
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-width: 0
  modes:
    light:
      primary-text-color: "#212121"
      primary-background-color: "#EFEFEF"
      # header
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"
    dark:
      primary-text-color: "#DDDDDD"
      primary-background-color: "#121212"
      # header
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"

[mase]

@Mar1us

  card-mod-root: |
    app-toolbar {
      display: none;
    }

try this:

  card-mod-root: |
    .toolbar {
      display: none;
    }

[pepe59]

That worked, the top bar is down and all, but there’s one more problem.
After moving the bar down, it remains gray, empty at the top, taking up space on the tablet.
Thank you for your kind help.

[Mar1us]

that didn´t worked - still icons from the header are there

[mase]

yes just tested, doesn´t work.

you might want to try this: GitHub - NemesisRE/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar

[mase]

you need to edit some settings then. you might want to take a look at the theme that i use and start from there…

Theme

---
Navbar_New:
  card-mod-theme: "Navbar_New"
  header-height: "60px"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  # Move navbar
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
      }
      paper-icon-button {
        display: none;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
      div#view{
        transform: initial;
        padding: 0 !important;
        position: fixed !important;
        margin: 0 !important;
        width: 100%;
        height: 100% !important;
      }
      .header {
        top: auto !important;
        bottom: 0px !important;
        box-shadow: var(--footer-shadow);
        height: var(--header-height) !important;
      }
      .toolbar {
        height: var(--header-height) !important;
        padding: 10px 0px !important;
        background: var( --ha-card-background, var(--card-background-color) );
      }
      #view {
        margin-top: calc(-1 * var(--header-height)) !important;
        padding-bottom: var(--header-height) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
        --mdc-icon-size: 26px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        margin-top: 15px;
        height: var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--header-active-tab-color);
        background-color: var(--header-active-tab-bg-color);
      }
      paper-tab {
        color: rgb(var(--mush-rgb-disabled));
        --paper-tab-ink: var(--card-background-color);
        border-radius: 25px;
        height: 30px;
        padding: 0 20px;
      }
      .main-title {
        padding-bottom: 10px;
      }
      .mdc-icon-button {
        padding-bottom: 10px;
      }
  # Header / Footer
  header-active-tab-color: "rgb(var(--paper-tab-selected))"
  header-active-tab-bg-color: "var(--card-background-color)"
  header-all-tabs-color: "rgb(var(--mush-rgb-disabled))"
  header-tab-indicator-color: "var(--card-background-color)"
  app-header-text-color: "var(--primary-text-color)"
  app-header-background-color: "var(--primary-background-color)"
  paper-tabs-selection-bar-color: "var(--card-background-color)"
  footer-shadow: "var(--card-background-color)"

[Mariusthvdb (Marius)]

see 2 posts up your post.
use background: instead of color:

[pepe59]

Thanks, I’ll look into it.

[S1M8N]

Hello everyone,

I search how can I use this code in my theme.yaml :

  card-mod-more-info-yaml: &card-mod-more-info-yaml |
    $: |
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog__surface {
        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
      }

Result :

with the browser_mod.popup

I don’t no if it’s clear but if you have any question don’t hesitate

Thank you in advance for you help

[Mar1us]

Only if there is no other solution