šŸ”¹ Card-mod - Add css styles to any lovelace card

Donā€™t use !include but use !secret if you import from secrets.yaml

Or, use auto-entities and set it in options

      - type: custom:auto-entities
        card:
          type: entities
          card_mod: *mod
        filter:
          include:
            - entity_id: sensor.*_actueel
              options: {card_mod: !secret power_color}

Or, use fold-entity-row and set it in group_config options of the fold

type: custom:fold-entity-row
head:
  type: section
  label: Mobile app
group_config:
  secondary_info: last-changed
  card_mod: !secret not_home_picture
padding: 0
entities:

Options galore

Hello Community,

I try for one week now to style the custom sonos card with card-mod.
Styling ha-card for example changing background works fine, but changing the width, max-width and height of the container is pretty hard for me.

I tried the card-mod helper, but donā€™t know how to use it. I got the following string:

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-sidebar-view$#main>hui-card-options>swipe-card$#swiper-wrapper-85c7cd6b306919d6>sonos-card.swiper-slide.swiper-slide-active$ha-card"

Below an Image of the Chrome inspector. Changing the ā€œ40remā€ to 100% will show the desired result. But i canā€™t get it to run in home assistant with card mod.

The following didnā€™t work:

card_mod:
  style: |
    ha-card  {
      max-width: 100%;
      width: 100%;
    }

I hope anybody can help me and much thanks in advance.

Ugh ā€“ Iā€™m feeling quite slow. Still doesnā€™t work.

Hereā€™s the dashboard:

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

And here is secret.yaml

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }

those are identical snippetsā€¦

see some explanation and more examples on my icon-color repo

Ok, I got it. The style-Element in the code was before the ha-card-Element. Adding !important behind the max-width parameter solved the problem.

How to set a height for ā€œhistory-graphā€

code
type: vertical-stack
cards:
  - type: history-graph
    entities:
      - entity: sensor.processor_use
    hours_to_show: 6
  - type: history-graph
    entities:
      - entity: sensor.processor_use
    hours_to_show: 6
    card_mod:
      style:
        state-history-charts $:
          state-history-chart-line $:
            ha-chart-base $: |
              .chartContainer {
                height: 100px !important;
              }
  - type: history-graph
    entities:
      - entity: sensor.processor_use
    hours_to_show: 6
    card_mod:
      style:
        state-history-charts $:
          state-history-chart-line $:
            ha-chart-base $: |
              .chartContainer {
                height: 300px !important;
              }

Tested in HA 2023.11.2, Chrome 119.0.6045.160 (Win10x64), FF 119 (Win10x64).
Does not work in iOS Companion App (iOS 15.x).

2 Likes

Pity, didnā€™t work for me (nothing changes) :sleepy: HA 2023.4.0, same Chrome version. Probably the issue could be further debugged?
Relative YAML snippet:

- type: vertical-stack
  cards:
    - type: history-graph
      entities:
        - entity: sensor.current_uv_index
      hours_to_show: 48
      card_mod:
        style: |
          state-history-charts $:
            state-history-chart-line $:
              ha-chart-base $: |
                .chartContainer {
                  height: 10em !important;
                }
    - type: markdown
      content: >-
        Maximum exposure time for skin.
1 Like

Really?
And your card_mod version?

Then, ask yourself))

Hi, trying to learn how to work with code inspector to access and modify some objects with card_mod. Made some progress and learned some of the basics but Iā€™m stuck with this one (trying to remove the 16px padding), could you assist so I can improve my skills:

using a screenshot as it should help pinpoint the issue:

Iā€™ve tried a few things but not sure if I should go up the tree structure or stay below ā€œha-cardā€ as I have assumed.

Let me know what Iā€™m doing wrong and/or my syntax issues

Thank you!

  card_mod:
    style: 
      $: |
        .card-content {
          padding: 0px !important;
        }


  card_mod:
    style: |
      card-content {
         padding: 0px !important;
        }

ā€œcard-contentā€ is a CLASS.
And it is not in shadowRoot.
Try

  card_mod:
    style: |
      .card-content {
        ...
      }
1 Like

Damn. I was sure I tried this syntaxā€¦
It works.
At least I was not too far off :smile:
Thx for the prompt response

sorry about the wrong paste above.

I really canā€™t believe this is so difficult.

I have been trying so many different syntaxes, and copying exactly what is above and what is linked above.

Here is a brand new Entities card:

type: entity
entity: sensor.pirateweather_temperature
card_mod: !secret temp_color

Here is a secrets.yaml:

temp_color:
  style: |
    :host {
        --paper-item-icon-color:
            {% set state = states(config.entity)|int(-5) %}
            {% if state == 'unknown'%} gray
            {% elif state < -20 %} black
            {% elif state < -15 %} navy
            {% elif state < -10 %} darkblue
            {% elif state < -5 %} mediumblue
            {% elif state < 0 %} blue
            {% elif state < 5 %} dodgerblue
            {% elif state < 10 %} lightblue
            {% elif state < 15 %} turquoise
            {% elif state < 20 %} green
            {% elif state < 25 %} darkgreen
            {% elif state < 30 %} orange
            {% elif state < 35 %} crimson
            {% else %} firebrick
            {% endif %};
    }


I am unable to save the card because of this:

Configuration errors detected:
unknown tag !<!secret> (3:29)

 1 | type: entity
 2 | entity: sensor.pirateweather_temperature
 3 | card_mod: !secret temp_color
---------------------------------^


I also tried putting a colon ( : ) after:
entity: sensor.pirateweather_temperature:

Still doesnā€™t work.

What am I doing wrong?

tbh, I dont know. are you using yaml mode?
because I dont get syntax error at all.

I can confirm this to happen in UI modeā€¦

and adding a quote kills the mod. hmm not sure how t proceed here, apparently the UI editor cant handle the !

seems the only way would be a ā€˜hybridā€™ approach, as I just learned that UI mode doesnt support !includes either.
wow, that would seriously kill my dashboard :wink:

it does however support yaml anchors

type: entities
entities:
  
  - <<: &entity
      entity: sensor.buienradar_temperature
  - <<: *entity

so, you can at least c&p those card_mod mods per view inside an anchor.

Hey!

I just experienced that some of my temperature sensors went down, without me knowing about it - since they got stuck at the last value read.
So, to fix this - i wanā€™t a ā€œpanelā€ where u can see when they last updated and the battery state. Said and done, as the picture shows.

But hereā€™s the problem - since itā€™s easy to miss if it says ā€œ1 day agoā€ or ā€œ1 hour agoā€ i wanā€™t the secoundary text to be red if itā€™s been over 12h since last update.

I have tried multiple codes getting this to work, but i canā€™t seem to get it working.
The last code i have tried is this one;

type: entities
entities:
  - entity: sensor.badrum_temperature
    type: custom:multiple-entity-row
    name: Tempgivare Hall
    secondary_info: last-changed
    show_state: false
    entities:
      - entity: sensor.tempgivare_hall_batteri
        name: Batteri
    style:
      '--secondary-text-color': >
        {% set last_updated = state_attr('sensor.badrum_temperature', 'last_updated') %}
        {% set time_difference = (now() - last_updated).total_seconds() / 60 %}
        {% if time_difference > 2 %}
          red
        {% else %}
          inherit
        {% endif %}

But it wonā€™t work, i also tried just

   style:
      '--secondary-text-color': red

But it still wonā€™t change the colour to red.

Thankful for all the help i can get!
sensors

Hello,

Can someone get me started with how to target HA-textfield for CSS stuff?

Mini media player TTS died with latest HA update, because paper-input was deprecated, so the quick fix was to swap out paper-input for Ha-Textfield in the JS file

Works great, but now the text box looks ugly lol

Any help would be appreciate.

'ha-textfield
{ font: code stuff goes here
} ā€™

Am I close? lol

As it was already proposed to you in another topic:
1st post ā†’ link at the bottom ā†’ styles for m-e-r

This could BE helpful:
1st post ā†’ link at the bottom ā†’ styling input_text

Hi, guys!
Can someone help me to change the color of the drop-down arrow? I use custom:expander-card. But this card does not have an arrow color setting. Is it possible to change it using Š”ard-mod?

Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2023-11-27 155850

I found a fill parameter that controls the color, but I couldnā€™t use it.

Code
type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      transition-property: none; !important;
      box-shadow: none;
      padding: 7px !important;
      background: rgba(var(--rgb-card-background-color), 0.5) !important;
    }
cards:
  - type: custom:mod-card
    card:
      type: custom:mushroom-title-card
      title: Š–ŃƒŃ€Š½Š°Š»
      subtitle: null
      alignment: center
    card_mod:
      style:
        .: |
          ha-card {
            transition-property: none; !important;
            
            margin: -30px 0px 0px 0px !important;
            padding: 0px 0px 0px 0px !important;
            top: 45px;

          }
        mushroom-title-card$: |
          h1 {
            --primary-text-color: rgb(var(--rgb-grey));  
            --title-font-size: 16px;
            top: 100px;
            left: 132px;
          }
          h2 {  
            --secondary-text-color: rgb(var(--rgb-grey)); 
            --subtitle-font-size: 14px;
            text-align: end;
          }
          .header {
            transition-property: none; !important;
            
            --title-padding: 0px 0px 0px 0px;
            margin: 0px 0px -10px 0px !important;
          }
  - type: custom:expander-card
    padding: 0px
    clear: true
    title: []
    child-padding: 0px
    button-background: transparent
    card_mod:
      style:
        ha-icon: |
          :host {
            fill: green !important;
          }
    cards:
      - type: custom:stack-in-card
        card_mod: null
        style:
          .: |
            ha-card {
              transition-property: none; !important;
              margin: 0px !important;
            }

I canā€™t find anything thatā€™s named ā€œm-e-rā€ and I donā€™t know what that means, I have looked at that list 10 times but canā€™t find anything related to my problem.

multiple-entity-row

1 Like