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 %};
    }
24

So this was all useful information… kind of the same but slightly different as I am trying to change the background using an image on a Better Movement Card depending on the current weather. my yaml is as follows

type: custom:better-moment-card
parentStyle: |
  line-height:normal;
  padding-bottom:0em;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0px; 
  grid-template-areas: 
    'time time maui'
    'date date  London'; 
moment:
  - format: HH:mm:ss
    parentStyle: |
      font-size:4.4em; 
      text-align:center; 
      font-weight:400; 
      grid-area: time;
      font-weight:500
  - format: cccc, dd MMMM
    parentStyle: |
      font-size:1.6em;
      line-height:1em; text-align:center;
      padding-top:0.5em;
      grid-area: date; 
  - format: HH:mm:ss
    timezone: Pacific/Honolulu
    parentStyle: |
      text-align:center; 
      line-height:2em; 
      padding-top:0.2em; 
      grid-area: maui;
    template: |
      <strong>Maui</strong>
      <div style="font-size:1.2em;">{{moment}}</div>
  - format: HH:mm:ss
    timezone: Europe/London
    parentStyle: |
      text-align:center; 
      line-height:2em; 
      grid-area: London;
    template: |
      <strong>🇧🇪 London</strong>
      <div style="font-size:1.2em;">{{moment}}</div>
grid_options:
  columns: 14
  rows: 4
card_mod:
  style: |
    ha-card {
      background-image:
        {%- set sensor = states('weather.forecast_hayes_weather_1') %}
        {%- if sensor == 'partlycloudy'%} 
        url("/local/media/partlycloudysky.jpg")
        {%- if sensor == 'clear'%} 
        url("/local/media/clearskies.jpg")
        {% endif %}
              background-size: cover;
              border: none;
            }

If I just use

card_mod
  style: |
    ha-card: { background-image: url("/local/media/xzx.jpg")}

it works no problem… something with the conditional formatting?

Thanks
SH

25

Yes, you have an issue with your jinja2 template code.

Try putting it into Developer Tools > Template > Template editor - the error message should point you in the correct direction, but feel free to ask again if this is not helping.

26

So yes thank you! I did have two errors in syntax. Good idea to use the developers tool, and it does look like it response properly, however no background image happens: the code

card_mod:
  style: |
    ha-card {
      background-image:
        {%- set sensor = states('weather.forecast_hayes_weather_1') %}
        {%- if sensor == 'partlycloudy'%} 
        url("/local/media/partlycloudysky.jpg")
        {%- elif sensor == 'clear'%} 
        url("/local/media/clearskies.jpg")
        {%- endif %}
              background-size: cover;
              border: none;
            }

the code results in:

card_mod:
  style: |
    ha-card {
      background-image: 
        url("/local/media/partlycloudysky.jpg")
              background-size: cover;
              border: none;
            }

which should yield the image as before… wonder what is going on here??
Thanks for the help!!

SH

27

All good now needed a ‘;’ at the end of the URL

card_mod:
  style: |
    ha-card {
      background-image:
        {%- set sensor = states('weather.forecast_hayes_weather_1') %}
        {%- if sensor == 'partlycloudy'%} url("/local/media/partlycloudysky.jpg");
        {%- elif sensor == 'clear'%} 
        url("/local/media/clearskies.jpg");
        {%- endif %}
              background-size: cover;
              border: none;
            }

This works fine

Thank you!!!

1 Like