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

Well, only move the header of the fold 8px to the left…
I thought I had managed that by the edit of the resource but noticed I also moved the divider 8px outside of the card ;-(

its because of this:

using default mod:

        card_mod:
          style: |
            ha-card {
              margin: 0px -16px;
            }

id like the

  - type: custom:fold-entity-row
    head:
      type: section
      label: Itinerary

to align with that horizontally

Sharing my glance card setup, that’s showing if any of the devices are on.

type: glance
entities:
  - entity: sensor.dishwasher_operation_state
    icon: mdi:dishwasher
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'Inactive' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: sensor.washing_machine_status_binary
    icon: mdi:washing-machine
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: sensor.tumble_dryer_status_binary
    icon: mdi:tumble-dryer
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: climate.daikin_ac
    icon: mdi:air-conditioner
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
  - entity: binary_sensor.keba_p30_plug
    icon: mdi:ev-plug-type2
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
            {% if states(config.entity) != 'off' %}
             var(--primary-color)
            {% endif %}
            }
show_name: false
show_state: false
show_icon: true
state_color: false

a simple state_color: true should do the same, shouldn’t it?

I guess, but it doesn’t work for me. For none of the above entities. It never changed the color, so I came up with this solution with the help of some of the above examples.

Only for these entities:

1 Like

You can use clip-path inset: https://codepen.io/firstchair/pen/KKXLLqq

1 Like

I wonder, if there is a way to have a bit transparent background at the header - especially the state values (here the 4.1 °C) - of the apex_chart Card?
And - as a joker - have the 77% right formatted?

Added the code:

type: custom:apexcharts-card
header:
  show: true
  title: Außen
  floating: true
  show_states: true
series:
  - entity: sensor.xiaomiaqara_1_temperature
    name: Temperatur
  - entity: sensor.xiaomiaqara_1_humidity
    name: rel. Luftfeuchtigkeit
    show:
      in_chart: false
all_series_config:
  type: area
  show:
    extremas: true
apex_config:
  legend:
    show: false
  stroke:
    width: 2
  yaxis:
    - decimalsInFloat: 0
style: |
  ha-card {
    font-size: 15px;
  }

I think it is possible. Cannot say w/o having the card’s code.

Added the code - stripped a bit, to focus on the main - to my original post.

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    header:
      show: true
      title: Außen
      floating: true
      show_states: true
    series:
      - entity: sensor.cleargrass_1_temperature
        name: Temperatur
      - entity: sensor.cleargrass_1_humidity
        name: rel. Luftfeuchtigkeit
        show:
          in_chart: false
    all_series_config:
      type: area
      show:
        extremas: true
    apex_config:
      legend:
        show: false
      stroke:
        width: 2
      yaxis:
        - decimalsInFloat: 0
    style: |
      ha-card {
        font-size: 15px;
      }
  - type: custom:apexcharts-card
    header:
      show: true
      title: Außen
      floating: true
      show_states: true
    series:
      - entity: sensor.cleargrass_1_temperature
        name: Temperatur
      - entity: sensor.cleargrass_1_humidity
        name: rel. Luftfeuchtigkeit
        show:
          in_chart: false
    all_series_config:
      type: area
      show:
        extremas: true
    apex_config:
      legend:
        show: false
      stroke:
        width: 2
      yaxis:
        - decimalsInFloat: 0
    style: |
      .wrapper div#header div#states__state:nth-child(2) div#state__value {
        justify-content: end;
      }
      .wrapper div#header div#states__state div#state__value {
        display: flex;
      }
      .wrapper div#header div#states__state:nth-child(1),
      .wrapper div#header div#header__title {
        margin-left: 30px;
      }

1 Like

I’ve finally gotten to the point where I’m needing card-mod… and @Ildar_Gabdullin’s examples have been a tremendous help! I’m putting together my first wall-mounted tablet, but I’m not able to find any examples where card-mod is used to modify a custom:weather-card, specifically, to make the background transparent. Has anyone done this?

EDIT: This works great to change the background color of my custom:weather-card:

style: |
  ha-card {
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #FFFFFF;
  background: rgba(7, 103, 215, 0.24);
  }

secondary-text-color is the low temp font color. Terrific.

I’m playing with stylizing the new energy card. Here’s what I have so far:

type: energy-usage-graph
style: |
  ha-card {
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #FFFFFF;
  --divider-color: #FFFFFF;
  --rgb-primary-color: red;
  background-color: rgba(7, 103, 215, 0.4);
  }

I haven’t been able to find the colors for the bars themselves, though… I’m a novice at searching the source code for the right terms. Also, the same code above doesn’t work for the energy-date-selection card.

Hi all - am really enjoying card-mod. I have successfully used it to modify the flex-horseshoe card to very closely resemble the light entity cards just to keep my dashboard uniform. Most notable to this question, I needed to change the height to 100% on some elements.

However, when I take exactly the same code that works on a flex-horseshoe card and encapsulate it in a declutter template, the height reverts to normal.

In the original, version (card-mod + flex-horseshoe), it’s pretty easy to add ‘height: 100% !important;’ to the ha-card with card-mod.

However, the addition of declutter (declutter + card-mod + flex-horseshoe) adds a number of encapsulating elements, most notably a div in a higher shadow root that also needs to get that mod. Verified that in developer mode and it works (highlighted below).

So guess, my question is how do I navigate up the shadow DOM to that element and mod it? Have tried various permutations… :host only goes one level up, and tried various permutations of $ to no avail. Is there a guide anywhere to $, # and the other syntax that I can read?

Try as I might, I am unable to query my way up to that div from inside the declutter template.

Any help for a community member who seems to be developing a case of OCD about this :slight_smile: ?

Code below for original

          - type: custom:flex-horseshoe-card
            style: |
              circle {
                cx: 50%;
                cy: 50%;
                r: 40%;
                #stroke-linecap: round;
                padding-top: -88em;
                #transform: rotate(-220deg, 100, 100);
              }   

              circle.horseshoe__scale {
                stroke-dasharray: 363.028484, 180;
              } 

              ha-card {
                height: 100% !important;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
              } 

              div.container::after {
                content:  "Geyser(orig)";
                margin-top: -6px;
                font-size: 1.2rem;
                text-align: center;
              }
            entities:
              - entity: sensor.geyser_power
                decimals: 0
                name: Geyser
                unit: W
                tap_action:
                  action: more-info
              - entity: switch.geyser
                icon: mdi:water-boiler
                tap_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.geyser
            horseshoe_scale:
              min: 0
              max: 4000
              width: 5
              color: var(--text-primary-color)
            horseshoe_state:
              width: 5
              color: var(--primary-color)
            animations:
              entity.1:
                - state: 'on'
                  icons:
                    - animation_id: 0
                      styles:
                        - color: var(--switch-checked-color);
                - state: 'off'
                  icons:
                    - animation_id: 0
                      styles:
                        - color: var(--switch-unchecked-button-color);
            show:
              horseshoe_style: fixed
            layout:
              states:
                - id: 0
                  entity_index: 0
                  xpos: 50
                  ypos: 90
                  uom_font_size: 1.5
                  styles:
                    - font-size: 1.5rem;
                    - opacity: 0.9;
              icons:
                - id: 0
                  animation_id: 0
                  xpos: 50
                  ypos: 63
                  entity_index: 1
                  icon_size: 8.5
                  styles:
                    - color: var(--primary-text-color);
            color_stops:
              '0': var(--primary-background-color)
              '90': var(--primary-color)

Code below for declutter template (which renders, but as per above the height is off)

  modded_horseshoe:
    card:
      type: custom:flex-horseshoe-card
      card_mod:
        style: |
          circle {
            cx: 50%;
            cy: 50%;
            r: 40%;
            #stroke-linecap: round;
            padding-top: -88em;
            #transform: rotate(-220deg, 100, 100);
          }   

          circle.horseshoe__scale {
            stroke-dasharray: 363.028484, 180;
          } 

          ha-card {
            height: 100% !important;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
          } 

          div.container::after {
            content:  "Geyser(decl)";
            margin-top: -6px;
            font-size: 1.2rem;
            text-align: center;
          }
      entities:
        - entity: sensor.geyser_power
          decimals: 0
          name: Geyser
          unit: W
          tap_action:
            action: more-info
        - entity: switch.geyser
          icon: mdi:water-boiler
          tap_action:
            action: call-service
            service: switch.toggle
            service_data:
              entity_id: switch.geyser
      horseshoe_scale:
        min: 0
        max: 4000
        width: 5
        color: var(--text-primary-color)
      horseshoe_state:
        width: 5
        color: var(--primary-color)
      animations:
        entity.1:
          - state: 'on'
            icons:
              - animation_id: 0
                styles:
                  - color: var(--switch-checked-color);
          - state: 'off'
            icons:
              - animation_id: 0
                styles:
                  - color: var(--switch-unchecked-button-color);
      show:
        horseshoe_style: fixed
      layout:
        states:
          - id: 0
            entity_index: 0
            xpos: 50
            ypos: 90
            uom_font_size: 1.5
            styles:
              - font-size: 1.5rem;
              - opacity: 0.9;
        icons:
          - id: 0
            animation_id: 0
            xpos: 50
            ypos: 63
            entity_index: 1
            icon_size: 8.5
            styles:
              - color: var(--primary-text-color);
      color_stops:
        '0': var(--primary-background-color)
        '90': var(--primary-color)

Hi all, I’ve trying to build a dashboard with some oversized entity cards. I’ve been able to increase the value font and the size of the card, but haven’t figured out how to prevent the behavior in the image below. I suspect it is an easy fix that I just haven’t been able to find in this thread. Any suggestions? Thanks in advance!

card_mod:
  style: |
    ha-card {
      --ha-card-background: white;
      color: var(--primary-color);
      height: 256px !important;
    }
    .value {
    font-size: 160px !important;
    }
type: entity
entity: sensor.tempest_st_00050852_temperature
name: temperature

Is there a way to style different from light and dark themes? Tried to add @media (prefers-color-scheme: dark) but no luck…

Thomas, thank you! You are the only one who has even tried to explain how to style this beast and the shadow beast underneath (or so I have found). I am trying to style an mdi:icon that is placed in a custom:button-card. I also have card-mod installed.
This is what I have in my ui-lovelace.yaml:

extra_styles: |
          ha-icon {
            --mdc-icon-size: 2vh !important;
          },
          "#hum ha-icon$": |
            :host {
              fill: rgb(0, 255, 255) !important;
            }

I have several icons on the card and have managed to size them, but trying to change the fill has been challenging. In the above code I am trying to color the icon in the ‘hum’ div. I cannot seem to get the “fill” attribute in the shadow to change. Help?

Hi is can anyone guide me i am trying to change the color of the icon instead of the whole card.

I have multiple buttons and i am trying to change the icon to go green when state is on.

I am new to this :slight_smile: I am able to change the color of whole card but not sure how will i go about doing it for icon only.

type: button
tap_action:
  action: toggle
entity: light.bedroom
icon: mdi:lightbulb
show_state: true
show_name: false
layout:
  key: 11e7094b-6f3d-44bf-99f3-2cb0896af18c

This is how i am able to do the background of card but dont know how i can get it working for icon itself

type: button
tap_action:
  action: toggle
entity: light.bedroom
icon: mdi:lightbulb
show_state: true
show_name: false
card_mod:
 style: |
  ha-card {
   --ha-card-background: teal;
   color: var(--primary-color);
  }

Is it possible to change the icon and make it flashing at the same time depending on entity’s state by using multiple-entity-row and card-mod? For now I can only make the icon flashing but I need to click on ‘EDIT’ button of the card to see the icon changed.

type: entities
entities:
  - type: section
  - entity: switch.mobile_charger_plug
    type: custom:multiple-entity-row
    entities:
      - entity: switch.mobile_charger_plug
        attribute: device_class
        name: 1
        styles:
          width: 50px
          text-align: left;
        unit: ''
      - entity: switch.mobile_charger_plug
        name: false
        styles:
          width: 50px
          text-align: left;
        unit: false
        icon: mdi:dots-hexagon
      - entity: switch.mobile_charger_plug
        name: 3
        unit: ''
        styles:
          width: 50px
          text-align: left;
      - entity: switch.mobile_charger_plug
        name: false
        styles:
          width: 50px
          text-align: left;
        unit: false
        icon: mdi:car
        tap_action:
          action: url
          url_path: xxxcc
    name: Rotated icons
    unit: ''
    toggle: false
    show_state: false
    state_header: ''
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            state-badge:
              $:
                ha-state-icon:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          color: orange;
                          transform: rotate(-45deg);
                          animation: disappear 0.5s linear infinite alternate;
                        }
                        @keyframes disappear {
                          0% {
                            opacity: 0;
                          }
                          100% {
                            opacity: 1;
                          }
                        }
        .: |
          :host .entities-row div.entity:nth-child(1) span  {
            animation: disappear 0.5s linear infinite alternate;
            color: orange;
          }
          div.entity:nth-child(2) div {
           --card-mod-icon:
            {% if states('input_boolean.test_mode')| string == "on" %} mdi:dolphin;
            {% else %} mdi:dots-hexagon;
            {% endif %}
            animation: disappear 0.5s linear infinite alternate;
            font-size: 0.7rem;
            white-space: pre;
          }
          :host .entities-row div.entity:nth-child(3) div {
            color: royalblue ;
            animation: disappear 0.5s linear infinite alternate;
          }
          div.entity:nth-child(4) state-badge {
            color: red;
            transform: rotate(45deg);
            font-size: 0.7rem;
            white-space: pre;
          }
          @keyframes disappear {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }
title: Individual Colored & Animated

Trying to make the icon in a button to change color depending on the state, but with no luck.It looks like this:

type: button
entity: binary_sensor.garageoppnare_channel_1_input
name: Garageport
show_name: true
show_state: true
show_icon: true
state_color: false
style: |
  :host {
    --paper-item-icon-color:
      {% if states(config.entity) == 'on' %}
        red;
      {% elif states(config.entity) == 'off' %}
        green;
      {% else %}
        gray;
      {% endif %}
        }
tap_action:
  action: call-service
  service: script.oppna_stang_garageport
  confirmation:
    text: öppna / Stäng ?

Wat am I doing wrong?
What should it be?

Thanks for your code hint. I got my button color to change :slight_smile:

type: button
tap_action:
  action: toggle
entity: light.bedroom
icon: mdi:lightbulb
show_state: true
show_name: false
state_color: false
card_mod:
  style: |
    ha-card {
     --paper-item-icon-color:
       {% if states(config.entity) == 'off' %}
         yellow;
       {% elif states(config.entity) == 'on' %}
         green;
       {% else %}
         gray;
       {% endif %}
         }