🔹 Card-mod - Super-charge your themes!

davemenkehorst · October 17, 2020, 7:43pm

OMG. There was a windows in front of it. I used hacs for a while but totally missed the +. Sorry for bothering.

mkanet · October 18, 2020, 2:22am

I read that Card-mod could be used to create the same effect as Custom Header “Compact mode”… so, I can have a compact header at all times.

I am not sure how to do that using my existing theme called, “techleech”. My understanding is I can use the Compact header code from the link below:

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.

\config\themes\techleech\techleech.yaml

Could someone please tell me the easiest way to get Home Assistant’s header more compact using card mod? Considering that I’m already using a theme.

KevinCathcart · October 18, 2020, 2:46am

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 · October 18, 2020, 4:16am

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

skank · October 18, 2020, 10:15am

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 · October 18, 2020, 1:37pm

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 · October 18, 2020, 7:06pm

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 · October 19, 2020, 12:53am

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 · October 19, 2020, 1:11am

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

benm7 · October 19, 2020, 1:34am

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 · October 19, 2020, 1:43am

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

github.com

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


ha-header-bar $: |
  .mdc-top-app-bar {
    background: none !important;
  }

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

benm7 · October 19, 2020, 4:03am

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 · October 19, 2020, 4:18am

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 · October 19, 2020, 7:03am

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 · October 19, 2020, 8:23am

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 · October 19, 2020, 9:12am

Ok no problem, glad its not just me then

KTibow · October 19, 2020, 1:35pm

It removes background:

github.com

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


  background: var(--background-1);
  box-shadow:  var(--theme-box-shadow);
  border-radius: var(--theme-border-radius);
  backdrop-filter: var(--bg-filter);
  padding: 4px !important;
  margin: 0 4px 12px;
  width: calc(var(--glance-column-width, 20%) - 8px) !important;
  /* Make icons red/green for on/off values and blue otherwise */
  --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
    {% elif is_state(config.entity, 'on') %} var(--theme-green);
    {% elif is_state(config.entity, 'open') %} var(--theme-green);
    {% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
    {% elif is_state(config.entity, 'off') %} var(--theme-red);
    {% elif is_state(config.entity, 'closed') %} var(--theme-red);
    {% elif is_state(config.entity, 'locked') %} var(--theme-red);
    {% else %} var(--theme-blue); {% endif %}
}
:host(:hover) {
  background: var(--background-2);

Pirol62 · October 19, 2020, 2:45pm

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 · October 19, 2020, 3:11pm

What happens if you remove the !important?

Pirol62 · October 19, 2020, 3:16pm

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