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

[mr_aleks]

How to change the text color to red if you were at home during working hours from 9 a.m. to 6 p.m.?

type: custom:logbook-card
entity: device_tracker.192_168_1_2

[Ildar_Gabdullin]

Use Code Inspector to find out a correct selector.

[efaden (Eric Faden)]

That’s my issue. I tried several but I don’t ever seem to see an effect on the front. If I manually select it and change it with the developer tools it works. Suggestions for what I may be doing wrong?

[Ildar_Gabdullin]

Not using this card. Are you using card-mod properly in general? Have you tried with standard cards? Have you checked1st post - link at the bottom?

[tombom (tom)]

hi again

i am trying to change the icons of the buttons of a media_player.template card
i have managed to change the size , spacing etc of the icons but i have not managed to change the actual icons.
what did work was to change the icon of the card itself (see below “mdi:kodi”) but not for the buttons

card:
  type: media-control
  entity: media_player.kodi_firetv
  card_mod:
    style: |
      :host {
         --card-mod-icon: mdi:kodi !important;
      }
      hui-marquee {
          font-size: 1.6em !important;       
      }
      ha-icon-button[action=turn_off]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;

      }
      ha-icon-button[action=turn_on]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }
      ha-icon-button[action=media_previous_track]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }
      ha-icon-button[action=media_pause]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }
      ha-icon-button[action=media_next_track]  {
        --mdc-icon-button-size: 90px !important;
        --mdc-icon-size: 60px !important;
      }

i tried adding the --card-mod-icon to the buttons but that didn’t work.
any idea would be much appreciated.

this is what it looks like atm

the circled buttons i want to change icons for.

using code inspector i found this “path” which allows me to to change the icons manually in the code but that ofc does not persist

[Ildar_Gabdullin]

User-defined config options - to be used inside card-mod:
Interesting & useful.

type: entities
entities:
  - entity: sun.sun
    my_color: red #user-defined config
    card_mod: &ref_style
      style: |
        :host {
          color: {{config.my_color}};
        }
  - entity: sun.sun
    my_color: cyan
    card_mod: *ref_style

Call a reusable card-mod code as an anchor or by “include” - and define settings as a part of “config”.

Ofc can be used with standard options as well (as it can with “config.entity”):

  - type: history-graph
    entities:
      - entity: sensor.system_monitor_processor_use
    hours_to_show: 24
    card_mod: &ref_style
      style: |
        ha-card {
          {% if config.hours_to_show < 12 -%}
            {%- set COLOR = 'rgb(0,255,0)' -%}
          {%- elif config.hours_to_show >= 12 and
                   config.hours_to_show <= 24 -%}
            {%- set COLOR = 'rgb(255,0,0)' -%}
          {%- else -%}
            {%- set COLOR = 'rgb(255,255,0)' -%}
          {%- endif -%}
          --graph-color-1: {{COLOR}};
        }
  - type: history-graph
    entities:
      - entity: sensor.system_monitor_processor_use
    hours_to_show: 6
    card_mod: *ref_style
  - type: history-graph
    entities:
      - entity: sensor.system_monitor_processor_use
    hours_to_show: 32
    card_mod: *ref_style

[danielsoelva (xoa)]

How can I set the font color for the secondary info of the default HA tile cards globally in my own theme-file?

[zavjah]

Hello @Ildar_Gabdullin,

thx a lot for those examples. I’m struggling to combine two of examples you posted here: changes of the main entry and of secondary entries.

I have a card mod for the main entry, it’s this one:

type: entities
show_header_toggle: false
entities:
  - entity: climate.thermoschlazi
    name: Schlafzimmer
    secondary_info: false
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge {
            color: {{ iif(is_state('climate.thermoschlazi', 'off'), '', '#FFC107') }};
            --card-mod-icon: {{iif(is_state('climate.thermoschlazi', 'off'), 'mdi:radiator-off', 'mdi:radiator') }};            
          }
          .info.pointer .secondary 
            ha-relative-time {
              display: {{ iif(is_state('climate.thermoschlazi', 'off') and not is_state('input_select.heizung', 'Aus'), '', none) }};
              color: {{ iif(((now() - states.climate.thermoschlazi.last_changed).total_seconds() // 60) > 19, 'red', '') }};
            }
    type: custom:multiple-entity-row
    show_state: false
    entities:
      - attribute: temperature
        name: Target
        unit: °C
      - attribute: current_temperature
        name: Current
        unit: °C
        styles:
          width: 100px
      - entity: switch.licht_schlazi
        name: Licht
        state_color: true
        tap_action:
          action: toggle

What I want to add is coloring of the 3rd child of the secondary entries so it changes the state color on switch state. Without the main entry mod this works for that:

type: entities
show_header_toggle: false
entities:
  - type: custom:multiple-entity-row
    entity: climate.thermoschlazi
    name: Schlafzimmer
    secondary_info: false
    show_state: false
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    entities:
      - entity: switch.licht_schlazi
        name: Licht
        state_color: true
        tap_action:
          action: toggle
    card_mod:
      style: |
        .entities-row div.entity:nth-child(1) {
          color: {{ iif(is_state('switch.licht_schlazi', 'off'), '', '#FFC107') }};
        }

What i cannot figure out is how to integrate the 2nd style into the first one. Could you please help. thx

best regards,
Zavjah

[arganto]

@zavjah

Could you please help.

As always: First post, link to Ildas examples/tutorials and there you will find an entry for combining such things. Or search for this in this thread and you will find the same question and same answer and even more examples a lot (!) of times.

Sometimes it is really faster and more helpful to do some search and see, how the others are doing it and if the same questions has been flying around again and again.

Example: The last same question has been answered just 2d/15 posts above.

[Balucanb]

Anyone willing to look at the below and tell me where I am going astray? Problem is the text color is not changing when then the background changes to yellow. The card is showing me the output of some of the FLUME sensors. The background color will change based on the # of gallons used, this is working, problem I am having is when it turns yellow I can’t read the numbers so I want the text color to change to black only when the background is yellow. this is all the code for ref. the Card Mod stuff is at the end, attempt 1 was this-

mode: horizontal
cards:
  - type: custom:button-card
    entity: sensor.flume_sensor_denmans_current_day
    name: Today
    icon: mdi:water
    show_state: true
    styles:
      card:
        - '--keep-background': 'true'
        - filter: opacity(70%)
        - height: 40px
      icon:
        - color: white
      name:
        - font-size: 12px
        - color: white
  - type: custom:button-card
    entity: sensor.flume_sensor_denmans_current_week
    name: This Week
    icon: mdi:water
    show_state: true
    styles:
      card:
        - '--keep-background': 'true'
        - filter: opacity(70%)
        - height: 40px
      icon:
        - color: white
      name:
        - font-size: 12px
        - color: white
  - type: custom:button-card
    entity: sensor.flume_sensor_denmans_current_month
    name: This Month
    icon: mdi:water
    show_state: true
    styles:
      card:
        - '--keep-background': 'true'
        - filter: opacity(70%)
        - height: 40px
      icon:
        - color: white
      name:
        - font-size: 12px
        - color: white
card_mod:
  style: |
    ha-card {
      {% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
      {% if value >= 0 and value <= 12000 %}
      --ha-card-background: green;
      {% elif value >= 12001 and value <= 15000 %}
      --ha-card-background: yellow;
      {% else %}
      --ha-card-background: red;
      {% endif %}
      {% if value >= 12001 and value <= 15000 %}
      color: black;
      {% else %}
      color: var(--accent-color);
      {% endif %}
    } ```

Attempt 2, Just the changed Card Mod stuff-

``` card_mod:
  style: |
    ha-card {
      {% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
      {% if value >= 0 and value <= 12000 %}
      --ha-card-background: green;
      {% elif value >= 12001 and value <= 15000 %}
      --ha-card-background: yellow;
      {% else %}
      --ha-card-background: red;
      {% endif %}
      {% if value >= 12001 and value <= 15000 %}
      color: black;
      {% endif %}
    }

Atempt 3, also no go.

  style: |
    ha-card {
      {% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
      {% if value >= 0 and value <= 12000 %}
      --ha-card-background: green;
      {% elif value >= 12001 and value <= 15000 %}
      --ha-card-background: yellow;
      {% else %}
      --ha-card-background: red;
      {% endif %}
    }
    .card-content {
      color: var(--accent-color);
    }
    .card-content.yellow {
      color: black;
    }

[Ildar_Gabdullin]

1. Read docs about using card-mod for vertical (horizontal) stack.
2. You are trying to style a stack & 95% of posted code describing buttons inside a stack, this is unrelated.

[Mngsps]

Good morning!

Does anyone know how to add a shadow to the image in the weather card?

And: Can I reduce the spcing in between the Text and the temperture?

Thanky you, a lot, and all the best!

[UHD (Simon)]

used someone code for a thermostat for a room, but it put a green bar below and I can’t remove it.

type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:

• type: grid
  square: false
  columns: 2
  cards:
  • type: custom:mushroom-template-card
    style: |
    ha-card {
    padding-bottom: 1px !important;
    }
    primary: Thermostat
    secondary: |
    Currently: {{ state_attr(‘climate.living_room’, ‘hvac_action’) }}
    icon: |-
    {% set mode = states(‘climate.living_room’) %}
    {% if mode == ‘off’ %}
    mdi:power
    {% elif mode == ‘cool’ %}
    mdi:snowflake
    {% elif mode == ‘heat’ %}
    mdi:fire
    {% elif mode == ‘heat_cool’ %}
    mdi:autorenew
    {% else %}
    mdi:home-thermometer
    {% endif %}
    icon_color: |-
    {% set status = state_attr(‘climate.living_room’,‘hvac_action’) %}
    {% if status == ‘off’ %}
    grey
    {% elif status == ‘cooling’ %}
    blue
    {% elif status == ‘heating’ %}
    red
    {% else %}
    grey
    {% endif %}
    tap_action: none
  • type: vertical-stack
    cards:
    • type: custom:simple-thermostat
      style: |
      ha-card {
      –st-spacing: 0px;
      }
      ha-card .current–value {
      color: #ffffff;
      }
      header {
      margin-bottom: 12px !important;
      padding-bottom: 0px !important;
      }
      ha-card .thermostat-trigger {
      color: #9e9e9e;
      }
      entity: climate.living_room
      header:
      name: false
      icon: false
      decimals: ‘0’
      fallback: ‘Off’
      hide:
      temperature: true
      state: true
      layout:
      mode:
      names: false
      icons: false
      headings: false
      step: row
      step_size: ‘1’
      control:
      hvac:
      ‘off’: false
      heat: false
      cool: false
      heat_cool: false
• type: custom:mushroom-chips-card
  style: |
  ha-card {
  –chip-box-shadow: none;
  –chip-background: none;
  }
  alignment: justify
  chips:
  • type: template
    entity: climate.living_room
    content: |
    {{ state_attr(entity, ‘fan_mode’) }}
    icon: mdi:fan
    icon_color: green
    tap_action: none
  • type: template
    content: ‘{{state_attr(entity, ‘‘current_temperature’’)}} °F’
    entity: climate.living_room
    icon: mdi:home-thermometer
    tap_action:
    action: more-info
    icon_color: |-
    {% set state=states(entity) %}
    {% if state==‘cool’ %}
    blue
    {% elif state==‘heat’ %}
    red
    {% else %}
    grey
    {% endif %}
  • type: weather
    entity: weather.forecast_home
    show_conditions: true
    show_temperature: true
  • type: template
    double_tap_action:
    action: none
    content: ‘{{ states(entity) }}% Humidity’
    entity: sensor.living_room_humidity
    icon: mdi:water
    icon_color: blue
    tap_action:
    action: none
    hold_action:
    action: none
• type: custom:simple-thermostat
  style: |
  ha-card {
  –st-font-size-toggle-label: 6px
  –st-spacing: 0px;
  –st-default-spacing: 0px;
  –st-mode-background: #262626;
  margin-left: 12px;
  margin-right: 12px;
  }
  ha-card .mode-item.active.off {
  background: #363636;
  color: #9e9e9e;
  }
  ha-card .mode-item.active.cool {
  background: #1d3447;
  color: #2196f3;
  }
  ha-card .mode-item.active.heat {
  background: #472421;
  color: #f44336;
  }
  ha-card .mode-item.active.heat_cool {
  background: #493516;
  color: #ff9800;
  }
  ha-card .mode-item.active {
  background: #263926;
  color: #4caf50;
  }
  ha-card .mode-item.active:hover {
  background: #363636;
  color: #9e9e9e;
  }
  ha-card .mode-item:hover {
  background: #363636;
  color: #9e9e9e;
  }
  ha-card .mode-item {
  –st-spacing: 10px;
  border-radius: 10px;
  }
  ha-card .modes {
  grid-gap: 12px
  }
  entity: climate.living_room
  header: false
  setpoints: false
  hide:
  temperature: true
  state: true
  layout:
  mode:
  headings: false
  icons: true
  names: false
  step: row
  control:
  hvac:
  ‘off’:
  name: Power
  heat:
  name: Heat
  cool:
  name: Cool
  heat_cool:
  name: Auto
• type: custom:mini-graph-card
  entities:
  • entity: sensor.living_room_temperature
    name: Temperature
    color: var(–green-color)
  • entity: sensor.bathroom_temperature
    name: Outside
    color: var(–yellow-color)
    y_axis: secondary
  • entity: sensor.living_room_humidity
    name: Humidity
    color: var(–blue-color)
    y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
    name: false
    icon: false
    state: false
    legend: true
    fill: fade

[LiQuid_cOOled]

Please post your code based off #11

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[pmgsrosa (Pedro Rosa)]

Hi there,

Since I updated to 2024.02, some of the card_mod configurations are not being applied, in this case on the Tile card, mainly this one:

card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        border-radius: 15px !important;

This should make the icon containers almost square, with a round of 15px at the corners but now they are all round. I suppose this is being ignored.
Someone have some pointers on how to solve this?

Thanks.
Pedro.

[Azrael79 (Azrael)]

Hello everyone,

I’m currently using a dashboard that is made up of various custom cards. My goal for 2024 is to move the whole thing back a little more towards standard

And to explore the possibilities with the standard cards + Card_Mod where necessary.

I currently have some problems where I hope you can help me

1. tile card

I would like to use a tile card and display only one icon. The Problem is the GAP for the Name stays there.

  - type: tile
    icon: mdi:home-outline
    entity: zone.home
    hide_state: true
    show_entity_picture: false
    vertical: false
    card_mod:
      style:
        ha-tile-info$: |
          .primary {
            visibility: hidden;
          }

Is there a better way to achieve my goal?

2. Button Card
   Because I didn’t get anywhere with the Tile Card, I thought - okay, let’s try the standard Button Card.

Unfortunately, the problem here is that I’m missing the icon background, which I personally like the look and feel of.

Does anyone here have an example of how I can implement a corresponding icon background with card mod? (It is the standard button card, not a custom version)

Thx in advance

[LiQuid_cOOled]

What do you consider an icon background? color?

[Azrael79 (Azrael)]

Sorry, that it was not clear - i mean the circle behind the icon as the tile card has it (so yes a different color)

i hope its clearer now

[LiQuid_cOOled]

This will change the background of the icon or what is called the shape color.

type: tile
entity: light.bed_lights
card_mod:
  style: |
    ha-card {
      --tile-color: red !important;  
         }

Add background: to adjust the card color

type: tile
entity: light.bed_lights
card_mod:
  style: |
    ha-card {
      --tile-color: red !important;  
      background: grey !important;
         }

[Azrael79 (Azrael)]

Great, thx a lot

But one more question, is it possible to geht this shape color on the button card?