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

[CZonin]

Hey everyone. Looking to get some help on a the last few items for my setup. I’ve typically been able to get things working through trial and error, but I can’t seem to figure these out. Any help would be appreciated.

The first are these circular buttons in the Frigate card. I’m trying to change the background circle color, as well as the icon color:

For the background circle color, the card-mod helper output is
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>frigate-card$#ha-card>frigate-card-menu$div.matching>ha-icon-button:nth-child(1)"
with the property to change being background-color within ha-icon-button.button.

The icon color for it is within the same card-mod helper output, and the property is color, but this is not within ha-icon-button.button.

The last thing is the selected icon color within the controls in a tile card:

The card-mod helper output is:
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-tile-card$ha-card>hui-card-features$hui-fan-speed-card-feature$div>ha-control-select$#option-off"
with the property being color within .option.selected

For all of these, I’m able to get the property I want changed when inspecting, but can’t figure out how to format it properly for card-mod.

[Peet (Peet van Dijk)]

I am monitoring a fire-alarm panel, which used to work.
Log says: Template error: int got invalid input ‘None’ when rendering template ‘{{ state_attr(“sensor.sensor_thingspeak”, “field1”) | int}}’ but no default was specified.

field1: "0"

Nothing has been changed lately, can’t see any errors

type: picture-elements
card_mod:
  style: |
    @keyframes my-blink {
      from {opacity: 0;}
      to {opacity: 100;}
      from {opacity: 100;}
      to {opacity: 0;}
    }

    ha-card {
      --my-fire-color: {% if state_attr("sensor.sensor_thingspeak", "field1") | int == 1 %} red {% else %} darkgrey {% endif %};
      --my-trouble-color: {% if state_attr("sensor.sensor_thingspeak", "field2")| int == 1 %} orange {% else %} darkgrey {% endif %};
      --my-rmh-color: {% if states('sensor.rookmelder_hal_smoke_amount')|int >= 5 %} red {% else %} darkgrey {% endif %};
      --my-rmo-color: {% if states('sensor.rookmelder_overloop_smoke_amount')|int >= 5 %} red {% else %} darkgrey {% endif %};
      --my-rmz-color: {% if states('sensor.rookmelder_zolder_smoke_amount')|int >= 5 %} red {% else %} darkgrey {% endif %};
      --my-co-color: {% if states('binary_sensor.co_alarm')=='on' %} red {% else %} darkgrey {% endif %};
      --my-test-color: {% if state_attr("sensor.sensor_thingspeak", "field5") |int==1 %} green {% else %} red {% endif %};
    }
elements:
  - type: icon
    icon: mdi:circle
    style:
      top: 77%
      left: 26.2%
      color: lightgreen
      animation: my-blink 2s linear infinite
      transform: scale(.6,.6)
  - type: icon
    icon: mdi:circle
    style:
      top: 17.5%
      left: 26.2%
      transform: scale(.6,.6)
      color: var(--my-fire-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 17.5%
      left: 29.2%
      transform: scale(.6,.6)
      color: var(--my-fire-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 29%
      left: 26.2%
      transform: scale(.6,.6)
      color: var(--my-trouble-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 17.5%
      left: 7.7%
      transform: scale(.6,.6)
      color: var(--my-rmh-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 29%
      left: 7.7%
      transform: scale(.6,.6)
      color: var(--my-rmo-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 41.5%
      left: 7.7%
      transform: scale(.6,.6)
      color: var(--my-rmz-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 53%
      left: 7.7%
      transform: scale(.6,.6)
      color: var(--my-co-color)
  - type: icon
    icon: mdi:circle
    style:
      top: 17.5%
      left: 72%
      transform: scale(.6,.6)
      color: var(--my-test-color)
image: /local/images/bmc.png?v=7.0

[LiQuid_cOOled]

@Peet

--my-fire-color: {% if state_attr("sensor.sensor_thingspeak", "field1") | int == 1 %} red {% else %} darkgrey {% endif %};

Try using a format similar to this…

--my-fire-color: {{ 'red' if state_attr('sensor.sensor_thingspeak', 'field1') | int == 1 else 'darkgrey' }};

I assume the code was AI generate?

[Peet (Peet van Dijk)]

Nope, no AI here, just googling…
I’ve changed all the color lines, at least the blinking is back but the icons remain black

[safvan89 (safvan)]

is there any way to change tile card features’ button’s icons?
I tried to dig using inspector but nothing seems to work.

[LiQuid_cOOled]

Depending on the card, yes. This a good thread to review.

Card-mod for Tile card: icon & tile color

@boheme61 In the morning I think you are right. May be I should have been more patient and explain with details in the very beginning. Please accept my apologize if I was rude. For the record: Tile card has nice default features: – icon’s color depends on a domain & state; – card’s background gets the same color (with transparency) on hover. So there are possible ways to style this behaviour. Disclaimer: I am not an expert on the Tile card, so more possible ways of styling could be pos…

[almighty59]

I have the hover over icons working but it doesn’t seem to work when hovering over labels. I tried a few things but couldn’t quite get it. Is there a way to do this with the label: attribute? Thanks.

@Ildar_Gabdullin

Hilight icons on hover:

Code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:hover {
        --mdc-theme-primary: red;
        --mdc-tab-color-default: red;
      }  
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle

[chpego]

Hi all !

I’m trying to blinking an icon, where the state of an entity, on the picture element with card_mod, but doesn’t work :

- type: picture-elements
  image: /local/rlKlbf6LYE.png
  elements:
    - type: state-icon
      entity: cover.ikea_of_sweden_praktlysing_cellular_blind_volets
      style:
        left: 13%
        top: 47%
      tap_action:
        action: toggle
      card_mod:
        style: |
          :host {
             {% if ( states('sensor.ikea_of_sweden_praktlysing_cellular_blind_batterie') | int ) < 20 %}
               animation: blink 2s linear infinite;
               color: red;
             {% endif %}
          }

I’ve made several searches but I can’t get the icon to flash red.

Update, i found myself :

card_mod:
  style: |
    :host {
      {% if ( states('sensor.ikea_of_sweden_praktlysing_cellular_blind_batterie') | int ) < 20 %}
        animation: blink 2s linear infinite;
        --card-mod-icon-color: red;
      {% endif %}
    }
    @keyframes blink {
      50% {opacity: 0;}
    }

[d13g0m0nt3s]

Hi, I have a custom button card with a entity picture image ( the currently playing cover). It is possible to fade in the image every time that change? Now load without any transition. Is possible with card-mod?

Thanks in advance

[captaincanada]

hi,
can anybody tell me how to change the color of the icon inside a custom secondaryinfo-entity-row depending on a sensors state?

i have tried nearly everything…

the bird should be yellow if motion ia detected and the slider turns the guest mode on or off

thx in advance

[arganto]

@captaincanada

i have tried nearly everything…

Can you show your not working code/your tries?

[captaincanada]

name: Gästemodus
state_color: true
type: custom:secondaryinfo-entity-row
secondary_info: '[[ binary_sensor.bewegungsmelder_bad.state ]]'
card_mod:
    style: |

      ha-card {
        {% if states('sensor.bewegungsmelser_bad') = 'on' %}
          --card-mod-icon-color: var(--amber-color);
        {% else %}
          --card-mod-icon-color: grey;
        {% endif %}
      }

this was the last code.
i also tried without card-mod at the beginning, because i read about a breaking change not to use this anymore.
i used --paper-item-icon-color instead
inserted the color without template
and tried to use a kind of this

    card_mod:
      style:
        hui-generic-entity-row $: |
          .info.pointer .secondary ha-relative-time {
        
            {% if is_state('sensor.bewegungsmelder_bad', 'on' %}
              color: red;
            {% endif %}
          }

[Mariusthvdb (Marius)]

works alright here in any combination with or without icon using this:

card:
  type: custom:mod-card
  card_mod:
    style:
      tabbed-card:
        $:
          .: |
            mwc-tab:hover {
              --mdc-theme-primary: var(--power-color);
              --mdc-tab-color-default: var(--power-color);
            }
            mwc-tab-bar {
              background: {{'var(--lovelace-background)'
                            if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                            else 'var(--primary-color)'}};
            }
          mwc-tab:
            $:
              mwc-tab-indicator $: |
               .mdc-tab-indicator__content--underline {
                  border-color: var(--active-color);
                }

              .: |
                .mdc-tab {
                  min-width: 80px;
                }
                .material-icons {
                  display: contents !important;
                }

                .mdc-tab--active {
                  --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
                  /*background: var(--text-color-off) !important;*/
                }
 
  card:
    type: custom:tabbed-card
  #   attributes:
  #     isFadingIndicator: true
    styles:
      --mdc-tab-horizontal-padding: 4px;
      --mdc-theme-primary: var(--active-color)
  #     --mdc-theme-secondary: var(--text-color-off) # not functional
      --mdc-tab-color-default: var(--text-primary-color)
    tabs:
      '[[tabs]]'

Note I did some other tab mods, so I had to change the Dom path a bit, maybe its just what you need

[almighty59]

@Mariusthvdb

    styles:
      --mdc-tab-horizontal-padding: 4px;
      --mdc-theme-primary: var(--active-color)
  #     --mdc-theme-secondary: var(--text-color-off) # not functional
      --mdc-tab-color-default: var(--text-primary-color)

I apologize @Mariusthvdb, I should have explained myself better. Currently when hovering over the active tab the icon, label text, and underline are all highlighted. However, when hovering over an inactive tab only the icon is highlighted. Since I don’t use icons on the tabs and only the label text is displayed, when I hover I’d like the label text to highlight.

[Mariusthvdb (Marius)]

Yes, that is what I tested and see happening with the mod I posted. Text only label gets highlighted when hovered

[bchevreau (Boris)]

Is there a way to target the ha-sortable element inside of the drag-and-drop sections ?

I’ve tried several ways to add this but I can’t find the right selectors…
What I’m trying to reproduce:

Here is the exact thing I’m trying to target (but any above element could do):

I’ve tried to add this to that specific section:

  card-mod:
    style: |
      ha-sortable$: |
          .card {
              padding: 20px 17px;
              background-color: white;
              border-radius: 1em;
            }

Without much luck… tried also a few other selectors like hui-grid-section but nothing seems to work

Maybe this? But no luck either

    card_mod:
      style:
        hui-section$: |
          .container {
            padding: 20px 17px!important;
            background-color: white !important;
            border-radius: 1em !important;
          }

[captaincanada]

i can change the color in devtools…

but dont know how to use it in my code

[PsychoLynx]

Hi there!

I have a bunch of temperature sensors that show “Hot”, “Cold” or “OK” based on the room temperature.

I want to diplay these in a history graph with the bar color being red for “Hot”, blue for “Cold” and green for “OK”. How would I go about doing this?

Thank you kindly!

[Frosty]

take a look at Apex Charts card that should do what you want/need

[Ildar_Gabdullin]

@PsychoLynx

want to diplay these in a history graph with the bar color being red for “Hot”, blue for “Cold” and green for “OK”. How would I go about doing this?

Home Assistant frontend

type: history-graph
entities:
  - sun.sun
card_mod:
  style: |
    ha-card {
      --state-sun-above_horizon-color: red;
      --state-sun-below_horizon-color: violet;
    }

Update: unfortunately, theme vars are not supported for “sensor” domain:

So, this method will not work.