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

[Tomm206]

Great, it works, thank you

[LiQuid_cOOled]

Agreed, it was part of the original code and I let it be.

[Mariusthvdb (Marius)]

my question was not for you
even the post of the ask, it already was doing nothing, and thats not a good thing with mod-card

[LiQuid_cOOled]

I know it wasn’t for me. I was agreeing it was an issue.

[iron_lady]

Can I hijack tthis?

I’m using the minimalism theme and per card css works,

The theme already uses it, my (global) css won’t come up

--
minimalist-desktop:
  # Journal
  state-icon-color: "rgb(var(--color-theme))"
  border-radius: "20px"
  ...
  # THEME-CSS
  card-mod-theme: "minimalist-desktop"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  # MY-CSS
  card-mod-card: |
    ha-card .heating #item1 .ellisis {display: none;}
    ha-card .type-custom-simple-thermostat header .heating .header__title { color: red !important; }

For testing purposes alll titles should be red x)

[Mariusthvdb (Marius)]

I cant believe I overlooked this all of those years… because of another thread, I just realized we can set an icon on core entities card…

since entities isnt my main card for the most used views in my config, I suppose I didnt give it as much attention, and simply jotted my card-header class to them all.

However that icon detail is kind of nice. Ofc, when using that, one immediately wants to be able to make it dynamic

which is just as simple:

type: entities
title: Tijd
icon: [] # could probably also set a default here, but the template below has that already, so just the placeholder is required
card_mod:
  class: class-header-margin # my overall entities header mod
  style: |
    .card-header {
      {% set up = states('sun.sun') == 'above_horizon' %}
      --card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
      --card-mod-icon: mdi:weather-sunset{{'-down' if not up}};
    }
entities:

or

--card-mod-icon: mdi:weather-sunset{{'-up' if up  else 'down'}};

 --card-mod-icon: mdi:weather{{'-sunny' if up else '-night'}};

nice touch (although there’s a bit too much space around the icon for my taste. Maybe set the padding/margin there, need to experiment a bit more)

given this is the default style:

a quick fix there could be:

    .card-header .icon {
      padding: 0;
    }

or just a bit more:

    .card-header .icon {
      padding-left: 0px;
      padding-right: 4px;
    }

which to my eyes has a better balance.

so, let me try and add that to a card-mod class…

        ha-card.class-header-icon .card-header .icon {
          padding-left: 0px;
          padding-right: 4px;
        }

in card-mod-theme and now add that to the other class:

type: entities
title: Tijd
icon: []
card_mod:
  class:
    - class-header-margin
    - class-header-icon
  style: |
    .card-header {
      {% set up = states('sun.sun') == 'above_horizon' %}
      --card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
      --card-mod-icon: mdi:weather-sunset{{'-up' if up  else 'down'}};
    }

works beautifully!
Never knew we could list classes like that either, so TIL, twice

[iron_lady]

Do I implement it right or could you show me where I’m failing?

  # THEME_MODS
  card-mod-theme: "minimalist-desktop"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  # MY_CSS
  card-mod-card: |
    ha-card .heating #item1 .ellisis {display: none;}
    ha-card .type-custom-simple-thermostat header .heating .header__title { color: red !important; }

Crossposted on github as I don’t know if this has to do with the vertical stack I’m using

Vertical stack | Templating

[skrippi]

So I am searching for hours now to find the correct css command to edit this slider.

Right now the slider looks like this:

And I want it to have thin lines like this:

But I can’t find out the right css names to edit the pixel width for the stroke. Can someone help me?

[arganto]

It is the stroke-width you have to adjust in the different path elements/css classes

[yoyoTech]

Thought I would share here too - since the main part of the video is card-mod!

If your not already using fonts on your dashboard, its an easy way to really make an impact! Check out my tutorial - if you find it useful and would like to see more make sure to like, comment and subscribe to help the channel grow!

Home Assistant Dashboard Design - adding FONTS to your dashboard

[iamrufus]

Hi everyone,

Been reading a ton of docs and slowly learning my way around, is there a way with card-mod that i can somehow style a container like a sidebar which is made from a vertical stack? I want to have an exact height of 100vh applied to the container (vertical stack) and then have my entities inside it

[Stevengerrard08]

I’d like to apply this globally across my entire dashboard using my theme, rather than having to manually add it to each card.

Could someone assist me in finding a solution?

    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
          }

[lordvalium]

@Ildar_Gabdullin

type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
  .header .icon {
  {% if is_state(config.entity,'on') %}
    color: var(--paper-item-icon-active-color);
  {% else %}  
    color: var(--state-icon-color);
  {% endif %}  
  }

Hi,
have a switch with 3 states (On, Off, “Auto (off)”) but i cant get it working

  - entity: sensor.relay_no_1_filterpumpe_state
    card_mod:
      style: |
        .header .icon {
        {% if is_state(config.entity,'Off') %}
          color: var(--paper-item-icon-active-color);
        {% else %}  
          color: red;
        {% endif %}  
        }

[Frosty]

you haven’t defined a card in your code.
but this does what you describe.

type: entity
entity: automation.empty_dehumidifier
card_mod:
  style: |
    .header .icon {
    {% if is_state(config.entity,'on') %}
      color: green;
    {% elif is_state(config.entity,'off') %}
      color: red;
    {% else %}  
      color: white;
    {% endif %}  
    }

hope this helps

[lordvalium]

Thank you Frosty. To be honest i dont see the difference, where have i not defined the “card”

And it does not work, still showing in the standard color

[LiQuid_cOOled]

Add state_color: false

type: entity
entity: light.pc_lights
state_color: false
card_mod:
  style: |
    .header .icon {
    {% if is_state(config.entity,'on') %}
      color: green;
    {% elif is_state(config.entity,'off') %}
      color: red;
    {% else %}  
      color: white;
    {% endif %}  
    }

[lordvalium]

@LiQuid_cOOled

state_color: false

Really strange, it does not show any color, even change the else to red to enforce any different color in case switch states would be misspelled

type: entities
entities:
  - entity: sensor.ph_sensor
    secondary_info: none
  - entity: sensor.redox_sensor
  - entity: sensor.temperature_no_2_pool
  - entity: sensor.relay_no_1_filterpumpe_state
    state_color: false
    card_mod:
      style: |
        .header .icon {
        {% if is_state(config.entity,'on') %}
        color: green;
        {% elif is_state(config.entity,'off') %}
        color: red;
        {% else %}  
        color: red;
        {% endif %}  
        }
  - entity: sensor.relay_no_2_kugelhahn_state
  - entity: sensor.relay_no_5_poolbeleuchtung_state
  - entity: sensor.temperature_no_3_aussentemp

[LiQuid_cOOled]

For the entities card you need different it needs to be coded a little different. Give me a few…

[LiQuid_cOOled]

@lordvalium

.header .icon {
        {% if is_state(config.entity,'on') %}
        color: green;
        {% elif is_state(config.entity,'off') %}
        color: red;
        {% else %}  
        color: red;
        {% endif %}  
        }

What’s the third state shown in developer tools?

[lordvalium]

options: auto, on, off
attribution: Data provided by your Pool Digital ProCon.IP (https://www.pooldigital.de)
icon: mdi:toggle-switch-variant
friendly_name: Relay No. 1: FilterPumpe