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

Hi, can I change state color ?

          - type: picture-elements
            image: /local/images/computer/synology_ds1515.png
            elements:
              - type: state-icon
                entity: sensor.nas_drive_1_status
                style:
                  top: 30%
                  left: 25%
                  '--paper-item-icon-color': var(--my-icon-color)
              - type: state-icon
                entity: sensor.nas_drive_2_status
                style:
                  top: 30%
                  left: 37%

I try this code but nothing:

          style: |
            ha-card {
              --my-icon-color: {% if is_state('sensor.nas_drive_1_status', 'normal') %} green {% else %} red {% endif %}
            }

You can just use state_filter for that without card_mod.

Thanks, but state_filter not set color.

What do you mean?

thanks all the same but i solved with this code using condition

          - type: picture-elements
            image: /local/images/computer/synology_ds1515.png
            elements:
            # Synology Drive 1 Status
              - type: conditional
                conditions:
                  - entity: sensor.nas_drive_1_status
                    state: "normal"
                elements:
                  - type: state-icon
                    entity: sensor.nas_drive_1_status
                    style:
                      top: 30%
                      left: 25%
                      "--paper-item-icon-color": greenyellow
              - type: conditional
                conditions:
                  - entity: sensor.nas_drive_1_status
                    state_not: "normal"
                elements:
                  - type: state-icon
                    entity: sensor.nas_drive_1_status
                    style:
                      top: 30%
                      left: 25%
                      "--paper-item-icon-color": red```

First post here. Having some trouble applying custom color to my icons on the simple-thermostat card using card-mod. I’m using the raw editor and I know card mod is installed correctly because I’m able to change colors on an entities card just fine. Below is what I have for the thermostat. I used inspector in Edge/Chrome to see where the color is coming from and I’m thinking it might be because it is inherited from shadow-root? I just don’t know why. I have no theme applied. I’ve tried a lot of different ways of changing the color including rgb(), typing it, or using the #hex. No matter what I do the auto color will not change from springgreen. I’m sure it’s something simple I am missing. Can anyone suggest a fix? heat_cool

- type: 'custom:simple-thermostat'
  entity: climate.thermostat
  sensors:
    - entity: sensor.thermostat_humidity
      name: Humidity
  control:
    hvac:
      heat:
        name: false
        icon: 'mdi:fire'
      cool:
        name: false
        icon: 'mdi:snowflake-variant'
      heat_cool:
        name: false
        icon: 'mdi:cached'
    style: |
      ha-card.mode-item.active.off {
        background: red;
      }
      ha-card.mode-item.active.heat_cool {
        background: #efbd07;
      }

I am not sure if I am getting your point.
You mentioned this code as “not working”:

style:
  element-card:
    $:
      another-thing:
        $: |

I am not sure what do you mean by “element-card”, but this code works:

type: entities
title: 'Common: color icon'
style:
  hui-text-entity-row:
    $:
      hui-generic-entity-row:
        $:
          state-badge:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                    color: red;
                  }      
entities:
  - entity: sun.sun
  - entity: sun.sun

изображение

Try setting --heat_cool-color with !important to ha-card instead. You might need to use mod-card.

I guess the old syntax was fixed, too.

That worked! Thank you!

Well, at least using one more syntax gives us more flexibility!

just a thought, but would it all be possible have the overview posts separated into a Community Guide of sorts. No discussions there, those are done here, simply all posts like @Ildar_Gabdullin did for the various cards and stylings.

Right now, we need to go back and forth in this thread to find these (or save them locally, as I did…). I think it would be very beneficial to all of us to have them on display permanently.

With the separated/dedicated community guide, checking how to style a badge, or a font-size for Entities card would be a breeze.

4 Likes

I would appreciate guidance for suppressing the display of the entire toggle button in an Entities card.

I’ve tried enough things to confirm I don’t have a good grasp of the core concepts (i.e. seems straighforward in theory but not in practice). For example, I tried this but it doesn’t work:

type: entities
entities:
  - entity: input_boolean.test
show_header_toggle: false
style:
  ha-entity-toggle:
    $: |
      ha-switch {
        display: none !important;
      }

The toggle button is within a shadow-root and, based on my limitation understanding, that implies more complexity in how to define the item I wish to act on.

1 Like

The doc says:
I recommend using HACS to install and keep track of plugins.”
But this plug-in is nowhere to be found in HACS ?
Is a custom repository needed to install it ? If so, what’s the URL ?

Hi.
Thanks for all your work and help here!

I’ve searched for a few days but cant seem to figure out how it actually works.
I’ve also read that there might be problems with picture elemts cards, but there was a work around?

I have 2 icons, which actually should show a debug boolean state (removed to simplify) but I just want to change the color depending on on/off state and the only way to do it seems to be card-mod.

elements:
  - icon: 'mdi:android-debug-bridge'
    title: Debug
    type: icon
    style:
      '--mdc-icon-size': 40px
      color: 'rgba(255, 0, 0, 0.6)'
      background-color: 'rgba(3, 169, 244, 0.6)'
      border-radius: 50%
      top: 35%
      left: 40%
      padding: 10px 10px 10px 10px
  - icon: 'mdi:android-debug-bridge'
    title: Debug
    type: icon
    style: |
      hui-icon-element {
        color: blue;
      }
image: /
type: picture-elements

But I’m unable to make the second icon use any of the attributes of the first icon.
I’ve also tryed the debug method of my browser and found some elemts names but they modify colors of the entire page.

<hui-icon-element class="element" style="--mdc-icon-size:40px; color: rgba(255, 0, 0, 0.6); background-color: rgba(3, 169, 244, 0.6); border-radius: 50%; top: 35%; left: 40%; padding: 10px;"></hui-icon-element>

Any help apreciated

Uh, Maybe I can hepl here!

I just made it work:

In Hacs, under Frontend, press “+ EXPLORE & ADD REPOSITURIES” and search for card-mod. Think thats how I made it work!

Found it :+1: Thank you!

2 Likes

Here all my posts which may be useful:


NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).
And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation.


Entity card
post
rotating icon (by @dolodobendan)
disabled tap_action


Entities card (including some special row elements - button, section, divider)
post

font-size for Entities card
post

Entities card with attributes
post

Slider entity inside Entities card
main post
popup baloon issue
hide the popup baloon

"hui-input-number-entity-row" - entity row for "input_number"
main post
How to make input_number rows look less different from other entity rows - part 1, part 2

input_select row
main post
How to make input_select rows look less different from other entity rows - part 1, part 2
How to add secondary_info: last-changed

input-text row
post
How to make input_text rows look less different from other entity rows - part 1, part 2

input_datetime row
part 1
part 2
How to make input_datetime rows look less different from other entity rows - part 1, part 2

Conditional row inside Entities card
post

Toggle row inside Entities card
colored checkbox
how to disable a toggle button
how to disable a toggle button - inside auto-entities
moving toggle to the left

Hiding checkboxes inside Entities card
for some entity row
for all entity rows

Animations for Entities card
post

“Chip” buttons
post
card-mod theme for chip buttons
changing styles for a particular button in a footer dependently on a state

Cover entity row
main post
disable a cover control conditionally

Light entity row
how to show lights with using only “active” & “inactive” colors

How to manage a row’s height
decrease height
increase height

How to shift rows to the right
post

How to center weblinks & commands
post

“Empty slot” for Entities card
post


Glance card
main post
changing margin
Allocate items in a compact manner


Footer / Header
post


custom:multiple-entity-row
main post
displaying "last-changed" or any other labels for items
distribute items evenly
animated icons


custom:fold-entity-row
main post
How to enable / disable a “fold / unfold” control for fold-entity-row


custom:numberbox-card
post


custom:text-divider-row
post


Tile card
colored icon & background on hover
adding a button


custom:bar-card
animation
2 text lines
displaying an image instead of an icon
centered title
hide the whole bar-card if all bars are hidden
replacing a value


Gauge
disabled tap_action


markdown
scrollbar
scrollbar for some text
markdown with images
markdown with a table: post 1, post 2, post 3


Picture Glance card
post
changing an icon by card-mod
distributing icons


Sensor card with a graph
post


History-graph card
styling
prevent clipping when using inside stack-in-card
added scrollbar
custom line colors
custom timeline colors
how to set a 0 lower bound for Y-axis
styling a tooltip
how to add an icon to a card’s title
how to set a height


statistics-graph card
post
grouping / aligning labels
custom line colors
replacing a label
how to set a 0 lower bound for Y-axis


custom:mini-graph-card
main post
animation - blinking name, resized & rotating icon
how to display an additional info on the card
how to display additional text items (prefixes & suffixes)
solid (non-semitransparent) fill
move a graph for the 2nd sensor to the bottom
how to set a color for the last bar
place 2 sensors’ states on the left side
displaying states as a part of the legend
displaying a UoM under the state
displaying a UoM before a state
displaying a state & extrema data on the same line
using card-mod to compare mini-graph-card & history-graph
non-elegant & unstable way to show labels for X-axis
fixing an issue with a card inside state-switch
imitating statistics card
how to nicely align legend’s elements
compact view when used in horizontal stack or grid
styling Y-axis labels’ background
how to change graph’s color dynamically


Weather Card
post


Styling a card inside ‘custom:config-template-card’
post


Styling a card inside ‘custom:decluttering-card’ + passing a style as a variable
post 1
post 2


custom:template-entity-row
post


Badges
Badges: different styling
Badges: conditional show/hide
Badges: hidden name
Square badges
Dynamic icon
Show either an icon or a value
Manually added UoM
Replacing a state
Replacing a UoM
Gradient colors for a badge dependingly on a value (by @parautenbach)


custom:badge-card
post


Picture Elements card
main post
conditional elements
rotated background image
“selection area”
3 ways to change an element dynamically
on-hover effect for elements
example: show a charging process


Logbook card
main post
styling images by using external js-module
Logbook in a Panel mode
styling a scrollbar (style is unstable)


Media Player card
post


custom:mini-media-player
post


vertical-stack, horizontal-stack
main post
How to fix the “margin-top” problem for a hidden conditional card
Stack inside “hui-element” card
Removing internal borders & margins inside vertical-stack
how to add an icon to a card’s title


grid
how to add an icon to a card’s title


custom:stack-in-card
main post
example of customizing a width in a horizontal stack
styling a header
how to add an icon to a card’s title


custom:flex-table-card
main post
How to style a header


Map card
styling markers
display values on a Map card


custom:shutter-card
disable controls


custom:hui-element
post


custom:restriction-card
main post
custom background


custom:tabbed-card
post


Sticky cards
post


Additional small title for any card with a title
post


How to scale an iframe content
post
post


custom:sun-card, custom:horizon-card
post


Other stuff
About these examples
Important notes about navigation
About navigation
About navigation #2
Combining “$:” styles and “not $:” styles
Using variables (especially after 2022.12)
Card for testing colors for binary_sensor entities (icons, history) (may be useful after 2022.12)
Using "::before" , "::after" & "content"
How to change card-mod styles for dark & light modes
How to let HA to choose a default style
How to combine icons
Possible errors when using card-mod
Conditional styles for different clients
Using global macros
Issue with re-defining a variable
Adding a color outline to icons
Showing an old HA logo (pre 2023.10)
How to add an icon to a card’s title
User-defined config options - to be used inside card-mod


Themes
for beginners: where to put card-mod theme code?, also here
“-yaml” vs “w/o -yaml”: schema
Styling toolbar’s tabs
How to set a fixed width for a right sidebar
Moving a right sidebar to the left
Moving a header to the bottom
Hiding a header
How to change a header’s icon size
Badges in a header
Styling a sidebar + adding badges to a sidebar
Styling badges
Using classes
Hide a “search” button (also - hide all buttons & menu)
“Sidebar” view: allow to scroll “main” area w/o scrolling a sidebar

150 Likes

изображение

type: entities
entities:
  - entity: input_boolean.test_boolean
    name: 'Checkbox: hidden'
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
             display: none;
            }
1 Like

Thank you! I think I now understand why the many things I have tried all failed to work.

If the Entities card contains multiple entities, is there a way to make the style apply to all of them? Or does it have to be repeated for each one separately?