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

Mariusthvdb · November 29, 2023, 7:14am

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

neo171190 · November 29, 2023, 10:29am

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.

josephny · November 29, 2023, 10:39am

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 %};
    }

Mariusthvdb · November 29, 2023, 10:51am

those are identical snippets…

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

neo171190 · November 29, 2023, 11:38am

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.

Ildar_Gabdullin · November 29, 2023, 9:38pm

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).

dma_k · November 30, 2023, 1:21am

Pity, didn’t work for me (nothing changes) 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.

Ildar_Gabdullin · November 30, 2023, 1:38am

Really?
And your card_mod version?

Then, ask yourself))

Montreal666 · November 30, 2023, 4:30am

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;
        }

Ildar_Gabdullin · November 30, 2023, 4:40am

“card-content” is a CLASS.
And it is not in shadowRoot.
Try

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

Montreal666 · November 30, 2023, 5:04am

Damn. I was sure I tried this syntax…
It works.
At least I was not too far off
Thx for the prompt response

josephny · November 30, 2023, 10:13am

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?

Mariusthvdb · November 30, 2023, 12:17pm

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

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.

DjJoakim · December 1, 2023, 2:34pm

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

image969 · December 1, 2023, 3:39pm

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

Ildar_Gabdullin · December 1, 2023, 3:54pm

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

Ildar_Gabdullin · December 1, 2023, 3:56pm

This could BE helpful:
1st post → link at the bottom → styling input_text

AINER · December 1, 2023, 4:06pm

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;
            }

DjJoakim · December 1, 2023, 4:24pm

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.

Ildar_Gabdullin · December 1, 2023, 4:39pm

multiple-entity-row