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

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

I know it wasnā€™t for me. I was agreeing it was an issue.

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)

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 :wink:

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:

SchermĀ­afbeelding 2024-04-22 om 09.20.51

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

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

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?

1 Like

image

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

1 Like

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!

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

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

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

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

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 :frowning:

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

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

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

1 Like

Whatā€™s the third state shown in developer tools?

1 Like

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

Letā€™s test thisā€¦

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
    name: System armed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color:   {{ iif(states(config.entity) == 'on' ,'green', iif(states(config.entity) =='off','yellow',iif(states(config.entity) == 'auto','red')))}};
                 }
  - entity: sensor.relay_no_2_kugelhahn_state
  - entity: sensor.relay_no_5_poolbeleuchtung_state
  - entity: sensor.temperature_no_3_aussentemp

We may need to adjust because itā€™s a sensor entity.

unfortunately no :confused:

And my color in the code is green, hence pasting the screenshot from it in