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

It’s probably my color IIF code…test this

type: entities
entities:
  - entity: sensor.ph_sensor
    secondary_info: none
  - entity: sensor.redox_sensor
  - entity: sensor.temperature_no_2_pool
  - entity: sensor.relay_no_1_filterpumpe_state
    name: System armed
    card_mod:
      style:
         hui-generic-entity-row:
              $: |
                state-badge {
                color: red;
                }
  - entity: sensor.relay_no_2_kugelhahn_state
  - entity: sensor.relay_no_5_poolbeleuchtung_state
  - entity: sensor.temperature_no_3_aussentemp

Its working for me in this sense

so we may need double quotes around the state.

      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color:   {{ iif(states('config.entity') == 'on' ,'green', iif(states('config.entity') =='off','yellow',iif(states('config.entity') == 'auto','red')))}};
                 }

Have double quoted

Like this

type: entities
entities:
  - entity: sensor.ph_sensor
    secondary_info: none
  - entity: sensor.redox_sensor
  - entity: sensor.temperature_no_2_pool
  - entity: sensor.relay_no_1_filterpumpe_state
    state_color: false
    name: System armed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color:   {{ iif(states(config.entity) == "Auto (off)" ,'green', iif(states(config.entity) =='off','yellow',iif(states(config.entity) == 'auto','red')))}};
                 }
  - entity: sensor.relay_no_2_kugelhahn_state
  - entity: sensor.relay_no_5_poolbeleuchtung_state
  - entity: sensor.temperature_no_3_aussentemp

Post a pic of the state from Developer Tools

Double quotes are necessary

type: entities
entities:
  - entity: sensor.ph_sensor
    secondary_info: none
  - entity: sensor.redox_sensor
  - entity: sensor.temperature_no_2_pool
  - entity: sensor.relay_no_1_filterpumpe_state
    name: System armed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: {{ iif(states(config.entity) == "On" ,'green', iif(states(config.entity) =="Off",'yellow',iif(states(config.entity) == "Auto (off)",'red')))}};
                 }
  - entity: sensor.relay_no_2_kugelhahn_state
  - entity: sensor.relay_no_5_poolbeleuchtung_state
  - entity: sensor.temperature_no_3_aussentemp

You should see green

1 Like

Yes! Exactly. You are a true HA enthusiast :slight_smile: Thanks a lot mate

And how would you do it if i would have a calue in an integer range? i just juse > and < instead of == ? :slight_smile:

1 Like

Like this…
{{ iif(states(config.entity) |int >= 50,'lime', iif(states(config.entity) |int >= 30,'yellow',iif(states(config.entity) |int >= 0,'red')))}}

2 Likes

Thanks, thats the next nice adventure:

  - entity: sensor.ph_sensor
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info {
             color: {
              iif(states(config.entity) |int >= 7.4 ,'red', 
              iif(states(config.entity) |int <= 7,'yellow',}
                }
  - entity: sensor.redox_sensor

I try to make either the text (PH Sensor) or the whole line red or yellow, not just the icon.

edit @LiQuid_cOOled

            .info {
             color: 
               {{
              iif(states(config.entity) |float >= 7.4 ,'red', 
              iif(states(config.entity) |float <= 7,'yellow'))}};
                }

have it :slight_smile:

that seems very unlikely… the exact state is required though

I dont have a single double inside quote in my entire config (and it’s against guidelines too…) :slight_smile:

any valid jinja template should work, and just test that in the dev tools template. also, those iif’s can have unexpected results, so best not use them in these cases.

instead of

{{ iif(states(config.entity) |int >= 50,'lime', iif(states(config.entity) |int >= 30,'yellow',iif(states(config.entity) |int >= 0,'red')))}}

why not simply do

{% set state = states(config.entity) |int(-1) %}
{% if state >= 50 %} lime
{% elif state >= 30 %} yellow
{% elif state >= 0 %} red
{% else %} black
{% endif %}

you could also leave out the final condition for the red, and do:

{% set state = states(config.entity) |int(-1) %}
{% if state >= 50 %} lime
{% elif state >= 30 %} yellow
{% else %} red
{% endif %}

but, given the default I set in the state, I prefer catching that too

same for

{{ iif(states(config.entity) == "On" ,'green', iif(states(config.entity) =="Off",'yellow',iif(states(config.entity) == "Auto (off)",'red')))}};

use:

{% set state = states(config.entity) %}
{% if state == 'On' %} green
{% elif state == 'Off' %} yellow
{% else %} red
{% endif %}

or, use a mapper for the equality checks:

{% set state = states(config.entity) %}
{% set color = {'On':'green',
                'Off':'yellow',
                'Auto (off)':'red'} %}
{{color.get(state,'black')}}

same as before, either ditch the last check, or add it and use an extra guard for unforseen states

1 Like

Hi,

I wanted to change the font size for the weather card and successfully followed Ildars excellent guidance, many thanks!

During my initial testing I realized I needed to install this card-mod. Once I did this my header bar with the tabs was moved to the bottom instead, see print screen below. I have no idea how to fix this (move header bar back to the top) and would appreciate if anyone would be able to guide me please?

Hi there, is it possible to change the general row-height of a layout? I want it to be smaller than the 66 px :slight_smile:

Please help, cannot hide the map zoom controls, just can control the card height

card_mod:
  class: middle-right
  style: |
    ha-card {
      height: 380px !important;
    }
    ha-map$: |
      .leaflet-control-attribution {
        display:none !important;
       }
      .leaflet-control-zoom {
        display:none !important;
       }
    ha-icon-button$: |
      mwc-icon-button{display:none !important}

Try this…

card_mod:
   style:
    ha-map$: |
      .leaflet-control-attribution {
        display:none !important;
       }
      .leaflet-control-zoom {
        display:none !important;
       }
    ha-icon-button$: |
      mwc-icon-button{display:none !important}
    .: |
      ha-card {
       height: 380px !important;
       }
1 Like

thanks!!! did the trick. WIP:

1 Like

You may be able to get away with

card_mod:
  style:
    ha-map$: |
      .leaflet-control-zoom {
        display:none !important;
       }
    ha-icon-button$: |
      mwc-icon-button{display:none !important}
    .: |
      ha-card {
       height: 380px !important;
       }

…And welcome to the forum. :wave:

1 Like

312 / 5 000

Fordítási találatok

Fordítási találat

Hello, I would like to ask for help. (Maybe I’m writing in the wrong place.) There is a custom: button-card configuration, in which I use “lock” mode. Until now it worked on PC and mobile view. Recently, it still works in PC view, but in mobile view, the “lock” does not appear and it does not work. What could be the problem?

square: false
type: grid
cards:
  - type: custom:button-card
    entity: binary_sensor.door_sensor_gate_opener_nagy_contact
    lock:
      enabled: '[[[ return entity.state === "off"; ]]]'
      duration: 10
    name: Kapu nagy
    show_state: false
    show_label: true
    styles:
      lock:
        - justify-content: flex-end
        - align-items: null
        - color: red
      card:
        - width: null
        - height: 100px
        - border: solid 1.5px rgba(129,216,208)
        - transform: scale(1)
    state:
      - value: 'on'
        label: nyitva
        color: red
        icon: mdi:gate-arrow-left
      - value: 'off'
        label: zárva
        color: grey
        icon: mdi:gate
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.gate_opener_nagy_trigger
  - type: custom:button-card
    entity: switch.kiskapu_switch_0
    icon: mdi:door
    color: auto
    color_type: card
    lock:
      enabled: true
    name: Kiskapu
    show_label: true
    styles:
      lock:
        - justify-content: flex-end
        - align-items: null
        - color: red
      card:
        - width: null
        - height: 100px
        - border: solid 1.5px rgba(129,216,208)
        - transform: scale(1)
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.kiskapu_switch_0
  - type: custom:button-card
    entity: binary_sensor.door_sensor_gate_opener_kicsi_contact
    lock:
      enabled: '[[[ return entity.state === "off"; ]]]'
      duration: 10
    name: Kapu kicsi
    show_state: false
    show_label: true
    styles:
      lock:
        - justify-content: flex-end
        - align-items: null
        - color: red
      card:
        - width: null
        - height: 100px
        - border: solid 1.5px rgba(129,216,208)
        - transform: scale(1)
    state:
      - value: 'on'
        label: nyitva
        color: red
        icon: mdi:gate-arrow-right
      - value: 'off'
        label: zárva
        color: grey
        icon: mdi:gate
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.gate_opener_kicsi_trigger

PC view:
Képernyőkép_30-4-2024

mobil view long time ago:

mobil view now:

I’d suggest

Your nulls are an issue

Thanks for the suggestion and sorry for asking in the wrong place.
Can “lock” mode be implemented with card mode?