🔹 Card-mod - Add css styles to any lovelace card

DominikW · October 5, 2024, 5:03pm

I have this card for controling my TVR

Przechwytywanie

features:
  - type: climate-hvac-modes
    hvac_modes:
      - auto
      - heat
      - 'off'
type: tile
entity: climate.zigbee_grzejnik_salon
name: Grzejnik salon
icon: mdi:radiator
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      position: relative;
    }
    ha-card::before {
      content: '{{ states("sensor.zigbee_grzejnik_salon_position") }}%';
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 1;
      font-weight: bold;
    }

I’ve managed to get the position state to show on the card, but now how can I get more info of the position sensor when clicking it? Also can I add a valve icon in front of the position %?

ParksideParade · October 5, 2024, 6:07pm

Thanks, very helpful! I replicated your headings card-mod code but I can’t figure out how to vertically center the text. Any thoughts?

Ildar_Gabdullin · October 5, 2024, 9:19pm

You seem to have changed a height of the heading, right? Probably you need to align a container (which includes all elements) vertically. Check in Code Inspector, find this container and play with corr attributes, cannot tell more, no access to pc

aredon · October 7, 2024, 3:36pm

Nope. The heading card has this extra space on top if it’s not contained in a vertical stack card. It’s truly infuriating.

Ildar_Gabdullin · October 7, 2024, 7:22pm

This is called a margin-top. Try to reduce it then.

kentoe · October 7, 2024, 8:11pm

Trying to implement the following as a template:

card_mod:
  style: |
    /* Styles for mobile devices */
    @media (max-width: 767px) {
      ha-card {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 80px;
        box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);  
      }
    }
    /* Styles for desktop devices */
    @media (min-width: 766px) {
      ha-card {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 20%;
        height: 75px;
        padding: 5px;
      }
    }

However when putting the following in the theme file:

.nav-bar {
  /* Styles for mobile devices */
    @media (max-width: 767px) {
      ha-card {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 80px;
        box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);  
      }
    }
    /* Styles for desktop devices */
    @media (min-width: 766px) {
      ha-card {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 20%;
        height: 75px;
        padding: 5px;
      }
    }
}

card_mod:
  class: nav-bar

and assigning the card mod as a template, it doesn’t seem to take. Not sure how to utilize the @media functions within a template.

mynolix1986 · October 7, 2024, 8:12pm

I have this weird issue that my column id (in hui view) has a certain width but the class for some reason has a max-width (purple is the “padding”)

It is basically nor dynamically adjusting to the screen width (e.g. when I flip the phone)

My theme file does not command any sizes or widths and each view starts with a simple vertical-stack. I tried to apply widths directly to the cards to no avail.

The only thing I could think of was my use of kiosk mode but even without it, the column width is not dynamic.

Any help is appreciated. I’m running out of ideas here.

Ildar_Gabdullin · October 7, 2024, 8:30pm

This is wrong syntax. You placed a media query between 2 selectors. It must be topmost. Imagine that simple removing media query should not break the syntax - but it breaks in your case.

kentoe · October 7, 2024, 8:44pm

Not quite sure what you’re suggesting to write out. I tried this as well:

card-mod-theme: theme
card-mod-card: | 
  /* Styles for mobile devices */
  @media (max-width: 767px) {
    ha-card(.nav-bar)  {
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 80px;
      box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);  
    }
  }
  /* Styles for desktop devices */
  @media (min-width: 766px) {
    ha-card(.nav-bar) {
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 20%;
      height: 75px;
      padding: 5px;
    }
  }

card_mod:
  class: nav-bar

No success

Ildar_Gabdullin · October 7, 2024, 9:09pm

This is also wrong.
Do you want to say that “nav-bar” class contains ha-card element?
Anyway, suggest you first to achieve your goal in a theme without using media query - to find out a proper DOM path.

If “hav-bar” is a class of a card - then probably a proper path should be “ha-card.nav-bar”.
So try this (untested):


card-mod-card: | 
  /* Styles for mobile devices */
  @media (max-width: 767px) {
    ha-card.nav-bar  {
      ….
    }
  }

Also, discussing themes is not supposed to be done here, find a dedicated card-mod-themes thread.

elchininet · October 7, 2024, 9:19pm

I knew that there was a proposal for that, but I learned that it became baseline just some months ago. If he is using one of the major browsers, that sintax should not be the issue, the issue should be somehere else.

This is the link to the documentation in MDN. Now it is possible to make all those cool stuff directly in CSS

kentoe · October 7, 2024, 9:21pm

Yup, tried that too and doesn’t work. I’m not having much luck with templating and this card mod.

I even do something simple like the following:

card-mod-theme: blue
card-mod-card: |
  ha-card.test_nav {
        border-radius: 10px;
  }

Then try to use it like so:

type: custom:mod-card
card_mod: 
  class: test_nav

and I’m not getting it to recognize. Even though if I do the same thing:

type: custom:mod-card
card_mod: 
  style: |
    ha-card {
      border-radius: 10px;
    }

It works

Ildar_Gabdullin · October 7, 2024, 9:22pm

…. without using a selector like “ha-card” or whatever.
So, this variant theoretically shoul work:


card-mod-card: | 
  ha-card.some-class {
    @media (max-width: …) {
      color: red;
    }
    @media (max-width: …) {
      color: green;
    }
  }

elchininet · October 7, 2024, 9:26pm

It will work too. One thing that doesn’t work is class concatenation, but nowadays you can write almost a SASS code and it will be interpreted by the browser.

Ildar_Gabdullin · October 7, 2024, 9:27pm

What card are you trying to style?
Mod-card is supposed to be used only when a card does not have ha-card.

Ildar_Gabdullin · October 7, 2024, 9:30pm

This is new world)
The only thing I can use as an excuse that I only started dealing with css when started using card-mod)))

elchininet · October 7, 2024, 9:36pm

Well I have been using CSS for a long time and this is a new world also for me
I would not use it in production code yet though, I would wait for 90+ compatibility.

psyspy · October 7, 2024, 11:04pm

Hello! I am trying to increase the icon size of the built-in weather card (forecast) using card mod. I am a newbie with CSS. I went to the design inspector in Firefox and inspected the first icon on the card. Here’s the screenshot:

If I change the width and height of .forecast-image-icon to 64px in the design inspector, it works as intended. All the forecast icons get bigger. I have another card for weekly forecast. It’s icons get bigger too, which is fine. I think I updated the .forecast-image-icon class attributes globally.

Anyways, I tried this with the card mod:

show_current: false
show_forecast: true
type: weather-forecast
entity: weather.blah
forecast_type: hourly
theme: Animated Weather Icons Filled
card_mod:
  style: |
    ha-card div.forecast-image-icon 
    {
      width: 64px;
      height: 64px;
    }

It didn’t work. I can’t post more pictures since I am a new user. Let me post them in a new post. I appreciate any help.

Ildar_Gabdullin · October 7, 2024, 11:08pm

Well, if your styles work in Code inspector - try adding “!important” in your code.
Cannot say more, answering from mobile.

psyspy · October 7, 2024, 11:11pm

Here’s the image after my card mod changes:

Not what I expected. It pushed down the temperature values at the bottom.