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

[arganto]

@78andyp

Thanks. Doesn’t work - no change.

You should show, what is “above” weather-bar in your screenshot.

And I would propose to simplify your selectors to avoid problems here, so e.g.

temperature instead of .main axes bar-block bar-block-bottom

If there is only one temperature class, why having all the way down to that?

Which leads me to most probably the main problem: temperature is a class so .temperature and not temperature

Same for the elements above, but as said leave them all away in this case in general.

[78andyp (Andy Powell)]

Hi

Here is what’s above.

I’ve tried to simplify to:

              card_mod:
                style: |
                  .temperature {
                    color: red !important;
                  }

but it doesn’t work.

Thanks
Andy

[arganto]

@78andyp

but it doesn’t work.

I didn’t suggest to simply that way. Take the old version from Krivatri and just replace what I said. “.main axes bar-block bar-block-bottom temperature” with “.temperature”

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .temperature {
         color: red !important;
      }

[joethornriver (Johann Dornbach)]

Thanks for the quick answer - it is working on a Safari with Ipad OS 17. Had not checked this before.

[78andyp (Andy Powell)]

@arganto

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .temperature {
         color: red !important;
      }

Thank you. That works.

What does the .: do/mean??

Can any class after a shadow root be referred to as .class??

Thanks
Andy

[Ildar_Gabdullin]

@78andyp

What does the .: do/mean??

Suggest to:

1. Read Docs - this chapter.
2. Read these posts: 1st post in this thread → link at the bottom → other stuff → a few links about navigation

[Fraggz]

Hi,

I’m wondering if it’s possible to reduce the size of a card, including all its parameters?

I know font sizes can be reduced but you can also just reduce the complete card?

[baustin104]

I’m banging my head against a wall on this…I’ve studied the links Ildar_Gabdullin posted and gone through several examples. I’m admittedly a CSS newbie, so any assistance is appreciated.

I’m using card-mod to style secondary entity icons in a multiple-entity-row to create a street-light-style alert panel. I’m able to style based on previous code examples posted on here, with one exception:

I’d like to conditionally show some of the rows based on the state of other binary sensors (e.g. only include the “door entry sensor status” row if my status is set as “away”.) To do this, I’m nesting the multiple-entity-row within a conditional entity, which is disrupting the card-mod styling.

I’m nearly positive it’s because I’m not selecting the correct element to style; but I’ve also read some posts about card-mod styling having inconsistent results when nested within a conditional entity (it works fine in a conditional card). I’ve opened Element inspector and attempted to follow the steps the OP posted to no avail.

Any advice on what I can do to style (color) the icon of a secondary entity in a multiple-entity-row within a conditional entity? Hopefully I put that correctly, but you get the idea. Any advice is appreciated.

type: entities
entities:
  - entity: binary_sensor.alert_inside_temperature_threshold_exceeded
    type: custom:multiple-entity-row
    name: Always Show this Row
    icon: mdi:thermometer
    secondary_info: false
    show_state: false
    entities:
      - icon: mdi:alert
      - icon: mdi:check-circle
    tap_action:
      action: navigate
      navigation_path: air
    card_mod:
      style:
        hui-generic-entity-row $: ''
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'on' %} orange {% else %} grey {% endif %}
          }
          div.entity:nth-child(2) state-badge {
            color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'off' %} green {% else %} grey {% endif %}
          }
  - type: conditional
    conditions:
      - entity: sensor.okay_to_open_windows
        state_not: '1'
    row:
      entity: binary_sensor.alert_inside_temperature_threshold_exceeded
      type: custom:multiple-entity-row
      name: Conditional Row
      icon: mdi:thermometer
      secondary_info: false
      show_state: false
      entities:
        - icon: mdi:alert
        - icon: mdi:check-circle
      tap_action:
        action: navigate
        navigation_path: air
      card_mod:
        style:
          hui-generic-entity-row $: ''
          .: |
            div.entity:nth-child(1) state-badge {
              color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'on' %} orange {% else %} grey {% endif %}
            }
            div.entity:nth-child(2) state-badge {
              color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'off' %} green {% else %} grey {% endif %}
            }
title: Alert Panel

[Ildar_Gabdullin]

  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      type: custom:multiple-entity-row
      entity: sun.sun
      show_state: false
      entities:
        - icon: mdi:alert
        - icon: mdi:check-circle
    card_mod:
      style:
        multiple-entity-row:
          $: |
            div.entity:nth-child(1) state-badge {
              color: lightgreen;
            }
            div.entity:nth-child(2) state-badge {
              color: red;
            }

[joaopedros2 (João Silva)]

type: entities
card_mod:
  style: |-
    ha-card {
      --ha-card-border-width: 0;
    }
entities:
  - entity: input_number.shopping_item_number
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            display: none;
          }
          .info {
            display: none;
          }
        ha-textfield $: |
          .mdc-text-field {
            #width: 200px !important;
            height: 40px !important;
            #border: 1px solid rgba(127,127,127,0.5);
            border-radius: 10px !important;
          }
        .: |
          :host {
            --mdc-text-field-idle-line-color: transparent !important;
            --mdc-text-field-hover-line-color: transparent !important;
            --mdc-theme-error: transparent !important;
            --mdc-theme-primary: transparent !important;
            --text-field-padding: 0px 0px 0px 16px;
            --mdc-text-field-fill-color: #272727;
          }   

How can I make the box take up the entire card and center it?

[iamrufus]

Good evening,

Be really grateful if someone might be able to help me out with styling the root element of the card-layout mod (if its possible) highlighted below. I cant seem to work it out, tried lots of different things.

Thank you

[Vidar]

I’ve read around and tinkered for many evenings, but being new to styling HA, is hard. I really appreciate all the work Ildar_Gabdullin has put in. All the examples are really helpful, but I’m clearly missing something, because I can’t get the font size to change. The color changes, but not the size. What am I missing?

Ideally I would like the temperature to have a bigger font size and I tried to achieve that with the ha-card, but to no avail. Is it the card type which don’t like this? Because I’ve manage to get the font size bigger in the entity card, but in that card I’m not able to get the font color to change depending on the temperature. Confusing.

type: custom:button-card
entity: sensor.average_outdoor_temperature
show_state: true
show_icon: false
name: Outside
styles:
  state:
    - color: |
        [[[
        if (entity.state <= 0) return 'cyan'
        if (entity.state < 15) return 'red'
        else return 'white';
        ]]]
card_mod:
  style: |
    ha-card {
      font-size: 50px;
    }

[Krivatri]

In custom:button-card you can change everything under styles:
you cannot use card_mod in custom:button-card.

type: custom:button-card
entity: sensor.average_outdoor_temperature
show_state: true
show_icon: false
name: Outside
styles:
  state:
    - color: |
        [[[
        if (entity.state <= 0) return 'cyan'
        if (entity.state < 15) return 'red'
        else return 'white';
        ]]]
    - font-size: 50px

[Ildar_Gabdullin]

@Krivatri

you cannot use card_mod in custom:button-card.

You MAY NOT use card-mod in most cases.
But in some cases card-mod is a right tool.

[Vidar]

Thank you so much! I never tried without card mod. I’m glad you could confirm my suspicions about my choice of card.

[Vidar]

There’s the man!

I simply did too much thinking. I’ll keep that last sentence in mind for those simple changes, which really don’t need card mod.

[Ildar_Gabdullin]

See, some custom cards have SOME own css styling features - picture-elements, flex-table-card, … But they have limits))

[Krivatri]

Custom button card is the way to go, much easier to customise

[Ildar_Gabdullin]

Probably the person is mainly suspicious about a possibility to use card-mod in the button-card - not about the choice of the button-card )))

[DanishDude (Thomas Thomsen)]

I have this card that works fine with card_mod on the PC, but when I cast it to my Google Nest Hub Max, the card_mod part doesn’t come through. Is there any way I can change this?

type: entities
entities:
  - entity: sensor.fars_dyt_electric_range
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 20 %}
            --card-mod-icon-color: purple;
          {% elif states(config.entity) | int <= 50 %}
            --card-mod-icon-color: red;
          {% elif states(config.entity) | int <= 100 %}
            --card-mod-icon-color: yellow;
          {% elif states(config.entity) | int <= 200 %}
            --card-mod-icon-color: orange;
          {% else %}
            --card-mod-icon-color: green;
          {% endif %}
          --card-mod-icon: mdi:car-electric;
        }
  - entity: sensor.fars_dyt_battery_level
    name: Batteri status
    icon: mdi:battery-medium
    state_color: true
  - entity: binary_sensor.fars_dyt_charging_cable_connected
    name: Kabel status
    card_mod:
      style: |
        :host {
           {% if is_state(config.entity, 'on') %}
             --card-mod-icon-color: green;
             --card-mod-icon: mdi:power-plug-outline;
             {% else %}
             --card-mod-icon-color: red;
             --card-mod-icon: mdi:power-plug-off-outline
            {% endif %}
          }
  - entity: sensor.fars_dyt_charging_time_left
    card_mod:
      style: |
        :host {
           {% if is_state(config.entity, 'on') %}        
             --card-mod-icon-color: purple;
             --card-mod-icon: mdi:battery-clock-outline;
             {% else %}
             --card-mod-icon-color: purple;
             --card-mod-icon: mdi:battery-clock-outline
            {% endif %}
          }
  - entity: sensor.fars_dyt_odometer
    name: Totale Km.
    card_mod:
      style: |
        :host {
           {% if is_state(config.entity, 'on') %}
             --card-mod-icon-color: green;
             --card-mod-icon: mdi:speedometer;
             {% else %}
             --card-mod-icon-color: green;
             --card-mod-icon: mdi:speedometer
            {% endif %}
          }
  - entity: switch.fars_dyt_electric_climatisation
    name: Klimatisering
    card_mod:
      style: |
        :host {
           {% if is_state(config.entity, 'on') %}
             --card-mod-icon-color: blue;
             --card-mod-icon: mdi:air-conditioner;
             {% else %}
             --card-mod-icon-color: grey;
             --card-mod-icon: mdi:air-conditioner
            {% endif %}
          }
  - entity: binary_sensor.fars_dyt_doors_locked
    name: Låst status
    card_mod:
      style: |
        :host {
           {% if is_state(config.entity, 'on') %}
             --card-mod-icon-color: red;
             --card-mod-icon: mdi:lock-open-variant-outline;
             {% else %}
             --card-mod-icon-color: green;
             --card-mod-icon: mdi:lock-check-outline
            {% endif %}
          }
  - entity: switch.fars_dyt_seat_heating_front_left
    name: Sæde og rat fører
    card_mod:
      style: |
        :host {
           {% if is_state(config.entity, 'on') %}
             --card-mod-icon-color: red;
             --card-mod-icon: mdi:car-seat-heater;
             {% else %}
             --card-mod-icon-color: grey;
             --card-mod-icon: mdi:car-seat-cooler
            {% endif %}
          }
header:
  type: picture
  image: >-
    https://ip-modcwp.azureedge.net/modcwp5azs22200218/1Z1ZePfhc_nZStKW-3UPK9ayj.sgBneqdDwt0-OxIv3obND1itVKA7q5X.TkRZ-li0Lfu3.O59SdInzrCbaYBot8Ww-C-1080570dayvext_front1080.png
  tap_action:
    action: none