Lovelace-card-mod vs if, elseif and else

Configuration Frontend
21

I don’t see it documented anywhere, the source code doesn’t look like it would use that field either. Is this new functionality?

22

I also failed to find the “class” word in sources. Could be not so explicit.
The “class” option was added maybe 2 years ago.
Can be used along with card-mod-themes only.

1 Like
23

You can set the class in custom themes,

Example:

home_schmitz:
  modes:
    #--------------------------light--------------------------#
    light:
      background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-light.jpg") fixed'
      primary-text-color: "#2c3b4b"
      ha-card-border-color: "#d9d9d9"

      ## Custom values ##
      my-custom-button-card-hover-on: "rgba(241, 233, 233, 1.0) 0px 0px 0px 2px"
      my-custom-button-card-hover-off: "rgba(65, 65, 63, 0.5) 0px 0px 0px 2px"
      
      my-barcard-font-color: "black"
      my-customfield-info-border-color: "#d9d9d9"

    #--------------------------dark--------------------------#
    dark:
      background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-night.png") fixed'
      ha-card-border-color: "#454545"

      ## Custom values ##
      my-custom-button-card-hover-on: "rgba(241, 233, 233, 0.4) 0px 0px 0px 2px"
      my-custom-button-card-hover-off: "rgba(8, 8, 8, 0.8) 0px 0px 0px 3px"
      
      my-barcard-font-color: "white"
      my-customfield-info-border-color: "#d9d9d9"


  ##--------------------------Card Mod--------------------------##
  card-mod-theme: home_schmitz

  ## Card
  card-mod-card: |

    ha-card.popup-head {
      --name-font-size: 18px !important;
      background-color: transparant !important;
      box-shadow: none !important;
      border: 0px !important;
      --ha-card-border-width: 0px !important;
    }    

    ....

usage:

....
    card_mod:
      class: popup-head

for the template I used this:

themes:
my-custom-button-card-hover-on: "rgba(241, 233, 233, 0.4) 0px 0px 0px 2px"

lovelace:

...

card_mod:
  style: |
    ha-card:hover {
      {% if ( is_state('light.woonkamer', 'on') ) %}
        box-shadow: var(--my-custom-button-card-hover-on) !important;
      {% else %}
        box-shadow: var(--my-custom-button-card-hover-off) !important;
      {% endif %};
    }