🔹 Card-mod - Super-charge your themes!

[KevinCathcart]

@mkanet

I tried appending this code in the file below (after all color definitions); then, select the “Techleech” theme in Home Assistant. However, my header still looks the same.

One possibility is that you still need to reload your theme.

Another possibility is that you literally just pasted all the code from compact header at the bottom of your theme without any changes at all. If so then that is the problem.

Remove the very first compact-header: line from what is shown on the wiki, so as to make that code part of the theme defined before it, and change the card-mod-theme value to match the the theme key name inside the yaml, probably techleech. If there is more than one theme inside techleech.yaml, such as if it defines a dark and light pair, then you need to append code to each, with the only difference being the card-mod-theme line.

Hope this helps. If not, we would probably need to see the exact contents of your theme file.

[mkanet]

Thanks @KevinCathcart. I was able to get it to work finally. I appreciate your help.

[skank]

Ok im almost there…
I managed to get the chevrons away + hiding some tabs, and let it stay at the bottom

However Theres some space above the header, i marked it red.
It hides the bottoms after it, and the text from the header jumps up and down when i scroll
How do i get rid of that space?

• how do i get the space back up on top to show me messages? (its the app- toolbar right?)

[KTibow (Kendell R)]

Vote “Yes, having the header at the bottom without it being compact is a good idea” here:🔹 Card-mod - Super-charge your themes!
I’m sorry that I don’t have more time, and I know that it’s terrible not to be listened to (like the one time I made a feature request for a toilet domain), but if this gets enough votes that keeping the message space is important I’ll see what I can do.

[D34DC3N73R]

I’ve been working on transitioning from custom-header to card-mod theming and have it pretty much identical. But I’m struggling with header background color opacity. For reference, I’ve applied this to my theme.

I’ve been using chrome dev tools and see app-header, app-toolbar background-color css, but there’s also the issue of expanding the background image.
I’ve scrolled down slightly to show what I’m talking about.

[benm7 (Ben M)]

I have tried copying your code and the blurred effect, looks great. Only issue is the popup header doesn’t seem to adopt the style. Here is what it looks like:

My code is the same as yours with the-webkit- prefix added. Any idea what I might be missing?

[KTibow (Kendell R)]

It’s a whole different thing. Use card-mod-more-info for that.

[benm7 (Ben M)]

Thanks for the response. Tried adding the same style to card-mod-info and it still shows the solid background for the border.

I’ll keep plugging away

[KTibow (Kendell R)]

It doesn’t use app-toolbar, it’s a different thing. Check out the example theme:

thomasloven/lovelace-card-mod/blob/74d19f49b74a077dd5aa8a2299b49ee5d841fdbb/test/themes/airy.yaml#L217-L220

Change the background to anything you want. Don’t forget to add -yaml.

[benm7 (Ben M)]

Appreciate the response! Have tried both with yaml and without Still doesn’t seem to be changing the header of the popup/more info card.

Here is my theme code:

  homekit-dark:
    card-mod-theme: homekit-dark
    card-mod-card: |
      ha-card.inline-card {
        border: none;
        box-shadow: none;
        --ha-card-background: rgba(0, 0, 0, 0);
      }
      card-mod-markdown {
        border: none;
        box-shadow: none;
        --ha-card-background: rgba(0, 0, 0, 0);
      }
      card-mod-entities: |
        :host {
        box-shadow: none;
        --ha-card-background: rgba(0, 0, 0, 0);
      }
    card-mod-more-info-yaml: |
      $: |
        .mdc-dialog {
          -webkit-backdrop-filter: blur(17px);
          background: var(--homekit-transparent);
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: none !important;
          box-shadow: none;
          border-radius: 12px;
        }
      ha-header-bar:
        $: |
          .mdc-top-app-bar {
            background: none !important;
          }

[ASNNetworks]

Hi in my post I stated that I didn’t get it to work. So the headers in my more info popups are the same as the header color, just like on yours. I suspect because the code is different on mobile, because of media query. So when the display size is narrower it gets the header color. Look at my posts there. Though I’m not sure that’s cause.

I decided to just keep it that way and have since gotten used to it on mobile.

[deluxestyle]

I guess I’m stupid
I created a new theme called compact-header.yaml, copied the code, did the reload of the themes and used this new theme in my settings.
but the header is not changing.

[Pirol62 (Jörg Nauen)]

Hi, I tested the art-nouveau theme and it looks great!
One minor problem is, that the pictures displayed by the badges are not centered anymore.
Example:

Original display:

Is there a css element which corrects that?

[benm7 (Ben M)]

Ok no problem, glad its not just me then

[KTibow (Kendell R)]

It removes background:

thomasloven/lovelace-card-mod/blob/74d19f49b74a077dd5aa8a2299b49ee5d841fdbb/test/themes/airy.yaml#L93-L111

[Pirol62 (Jörg Nauen)]

with the result that there is no picture

I just want to align the picture centric.

I understood, that we’re talking about this element:

# Make badges have transparent background
    ha-state-label-badge $ ha-label-badge $: |
      .label-badge {
        background: none !important;
      }

If this hides the picture, maybe there is a possibility to align the picture instead.

PS:
I tried it with this:

card-mod-badge-yaml: |
    .: |
      :host {
        display: inline-block;
        background: var(--theme-card-background);
        border-radius: var(--theme-card-border-radius);
        border: var(--theme-thick-border);
        padding: 8px;
        box-shadow: var(--ha-card-box-shadow);
        box-shadow: var(--shadow-1);
        transition: var(--shadow-transition);
      }
      :host(:hover) {
        box-shadow: var(--shadow-2);
      }
    **ha-state-label-badge $ ha-label-badge $: |**
**      .label-badge {**
**         justify-self: center !important;**
**      }**
      .badge-container .label-badge {
        color: var(--primary-text-color);
        border-radius: 8px 20px 8px 8px;
        --ha-label-badge-color: var(--bg-color3);
        background: {% if not states(config.entity) %} var(--warning-color);
          {% elif is_state(config.entity, 'undefined') %} var(--warning-color);
          {% elif is_state(config.entity, 'on') %} var(--ok-color);
          {% elif is_state(config.entity, 'open') %} var(--ok-color);
          {% elif is_state(config.entity, 'unlocked') %} var(--ok-color);
          {% elif is_state(config.entity, 'off') %} var(--error-color);
          {% elif is_state(config.entity, 'closed') %} var(--error-color);
          {% elif is_state(config.entity, 'locked') %} var(--error-color);
          {% else %} var(--info-color);
          {% endif %}
      }

without success.

[KTibow (Kendell R)]

What happens if you remove the !important?

[Pirol62 (Jörg Nauen)]

For the airy-theme, the pictures are back! learned.
And now, I have to center the pics in the art_nouveau theme.
That was my origin question

[KTibow (Kendell R)]

Can you show a photo of an uncentered pic?

[Pirol62 (Jörg Nauen)]

see 6 posts above