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

Agree - this is what I observed.

I didnā€™t have it, just in this forums. So yes, I tried and no, it changed nothing :frowning:
Anyway, Iā€™d go for an icon styling instead. Unfortunatelyā€¦

ā€¦this is what I feared. So I canā€™t have my little ā€œmdi:check-circleā€ icon in green if everythingā€™s fine but show the number if it isnā€™t. Too bad, but it is what it is right.
Maybe you want to add this information (either icons or values - no mix possible) in your ā€œDynamic iconā€ post?

So my last badge question is:

Can we add a label badge (this text:
grafik
), if the entity does not provide one (does not have an unit)?

Wow, thatā€™s completely crazy:

I use the exact same code as 2 hours beforeā€¦

      - entity: sensor.season
        name: Jahreszeit
        icon: mdi:home
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          .: |
            :host {
              {% set season = states(config.entity) %}
              {% set icon =
                {
                  'winter':'mdi:snowflake',
                  'spring':'mdi:flower',
                  'summer':'mdi:sun',
                  'autumn':'mdi:leaf'
                } %}
              {% set icon_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(0,0,0)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set border_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(230,145,56)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set back_color =
                {
                  'winter':'rgb(255,255,255)',
                  'spring':'rgb(216,251,135)',
                  'summer':'rgb(255,242,204)',
                  'autumn':'rgb(252,229,205)'
                } %}
              --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
              --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
              --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
              --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
            }

but now get another result:

grafik

Thatā€™s the default icon. The spring one (mdi:flower) is not applied.

How can this be possible? Thatā€™s pretty unbelievable - and unreliable.

Itā€™s the same on different devices so checking browser developer mode logs wonā€™t be helpful I guess. Absolutely no idea where to start. And yes, I also removed all the # in that sectionā€¦ :frowning:

Now, if I completely remove this part:

          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }

ā€¦the icon is correct!
grafik

I donā€™t get it. It was working already, squad badge and dynamic icons. Crazy.

Probably it is possible with a bit of efforts:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        name: show value
  - type: custom:badge-card
    badges:
      - entity: sensor.xiaomi_cg_1_temperature
        name: dynamic icon
        icon: mdi:fire
        card_mod:
          style:
            ha-state-label-badge $:
              ha-label-badge $: |
                .badge-container .label-badge .value::after {
                  {% if is_state('input_boolean.test_boolean','on') %}
                    content: "{{states(config.entity)}}";
                  {% endif %}
                }   
              .: |
                ha-label-badge ha-state-icon {
                  {% if is_state('input_boolean.test_boolean','on') %}
                    display: none;
                  {% endif %}
                }

image
image

You can, results may differ on different browsers:

type: custom:badge-card
badges:
  - entity: sensor.xiaomi_cg_1_co2
    name: default
  - entity: sensor.ha_count_sensor
    name: added UoM
    card_mod:
      style:
        ha-state-label-badge $ ha-label-badge $: |
          .badge-container .label-badge .value::after {
            content: "my UoM";
            background-color: var(--ha-label-badge-color, var(--primary-color));
            color: var(--ha-label-badge-label-color, white);
            border-radius: 1em;
            padding: 9% 16% 8%;
            font-weight: 500;
            overflow: hidden;
            position: absolute;
            bottom: -1em;
            left: -0.2em;
            right: -0.2em;
            line-height: 1.05em;
            font-size: 0.5em;
          }

image

But you better create a template sensor with a UoM.

1 Like

Does anyone know, why and how mod-card around another card (even without card_mod, etc.) is changing the order of the card(s) in the dashboard? And how to avoid this?

Are you talking about an order in masonry layout?

Yes. When I use mod-card to change a conditional card or vertical stack, it has another order than without the conditional card.

Probably it does not change the order, it makes neighbouring cards to stick together?
If yes - then a similar behaviour is observed with config-template-card.

So far I have not observed anything similar with mod-card.

Yes could be. I want to have the next one right to the one which I want to mod. But with mod-card the next is below the one. Can I avoid it?

In similar cases I have to use layout-cardā€™s breaks.
Also, in some cases wrapping into vertical-stack (one card only) helped (tested long time ago, do not know if it helps now).

Thanks. Iā€™ll try this. And everything ā€œonlyā€, because of the margins of invisible conditional content (your and my issue in issue list). :joy:

No custom:layout-break is not helping. What a pity.

Until someone has further ideas (or at least some ideas about the ā€œwhyā€, I make it via themes

  card-mod-view-yaml: |
    hui-masonry-view $ div#columns div.column hui-vertical-stack-card $: |
      #root hui-conditional-card:nth-child(2) {
        {% if (states("binary_sensor.ui_alert") == "off") %}
          margin-top: 0px;
        {% endif %}
      }

I got rid of these conditional rows/cards because of that margin)))
Replaced by card_mod or state-switch card.

Give me a minimized code for the problem.

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.ui_alert
        state: 'on'
    card:
      type: custom:vertical-stack-in-card
      horizontal: true
      cards:
        - type: conditional
          conditions:
            - entity: input_boolean.alert_xxx
              state: 'on'
          card:
            type: custom:button-card
            [...]
        - type: conditional
          conditions:
            - entity: input_boolean.alert_xxx_fallig
              state: 'on'
          card:
            type: custom:button-card
            [...]
        [etc]
  - type: conditional
    conditions:
      - entity: binary_sensor.dwd_wetterwarnung_aktiv
        state: 'on'
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:button-card
          [...]
        - type: markdown
          [...]
  - type: weather-forecast

So three ā€œsectionsā€ A, B and C. If A and B are hidden, C has a top-margin which is not wanted. As it is a weather card, I can mod it. If Only A is hidden, B has an unwanted top-marging as well, but this is a conditional-card, which I cannot mod. And with mod-card the problem above.

But the one with theme hacking is working indeed as work-around.

@arganto
Check this:

title: test-test-0
path: test-test-0
badges: []
# type: custom:horizontal-layout
cards:

  - type: entities
    entities:
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean_2
      - entity: input_boolean.test_boolean_3
      - entity: input_boolean.test_boolean_4

  - type: button
    entity: sun.sun
    name: button before the stack

  - type: custom:mod-card
    card_mod:
      style:
        hui-vertical-stack-card $: |
          div#root :nth-child(2) {
            {% if is_state("input_boolean.test_boolean","off") %}
              margin-top: 0px;
            {% endif %}
          }
          div#root :nth-child(3) {
            {% if is_state("input_boolean.test_boolean_4","off") %}
              margin-top: 0px;
            {% endif %}
          }
    card:
      type: vertical-stack
      cards:
        - type: conditional
          conditions:
            - entity: input_boolean.test_boolean
              state: 'on'
          card:
            type: custom:stack-in-card
            title: "test_boolean = ON"
            mode: horizontal
            cards:
              - type: conditional
                conditions:
                  - entity: input_boolean.test_boolean_2
                    state: 'on'
                card:
                  type: custom:button-card
                  entity: person.ildar
                  name: "test_boolean_2 = ON"

              - type: conditional
                conditions:
                  - entity: input_boolean.test_boolean_3
                    state: 'on'
                card:
                  type: custom:button-card
                  entity: zone.home
                  name: "test_boolean_3 = ON"

        - type: conditional
          conditions:
            - entity: input_boolean.test_boolean_4
              state: 'on'
          card:
            type: custom:stack-in-card
            title: "test_boolean_4 = ON"
            cards:
              - type: custom:button-card
                entity: sun.sun
              - type: markdown
                content: aaaaaaa

        - type: weather-forecast
          entity: weather.home_met

  - type: button
    entity: sun.sun
    name: button after the stack

  1. Replaced vertical-stack-in-card with stack-in-card (not using the 1st).
  2. Margins for any cards in stack may be changed from the outer stackā€™s level (like it was proposed in your card-mod-theme example).
  3. Note the div#root :nth-child(....) using.
  4. Top margins are fixed by card-mod, top cards are horizontally aligned.

Regarding the ā€œcards sticking togetherā€ problem.
It presents.
Here the vertical-stack is surrounded by ā€œpictureā€ cards - the stack is sticked to the next card:

If mod-card is removed - no sticking:

How to fix - use layout-card:

title: test-test-0
path: test-test-0
badges: []
type: custom:vertical-layout
cards:
   ...

  - type: custom:layout-break
  
  - type: custom:mod-card
    ....

  - type: custom:layout-break

  ...

1 Like

Perfect. I first thought for this I would need to install https://github.com/thomasloven/lovelace-badge-card first (which I didnā€™t know it exists before). In the end, using your snippetā€¦

          .badge-container .label-badge .value::after {
            content: "my UoM";
            background-color: var(--ha-label-badge-color, var(--primary-color));
            color: var(--ha-label-badge-label-color, white);
            border-radius: 1em;
            padding: 9% 16% 8%;
            font-weight: 500;
            overflow: hidden;
            position: absolute;
            bottom: -1em;
            left: -0.2em;
            right: -0.2em;
            line-height: 1.05em;
            font-size: 0.5em;
          }

ā€¦also works without having https://github.com/thomasloven/lovelace-badge-card installed. But good to know itā€™s possible to place badges everywhere. So thank you twice (for a factory solution with card-mod and for indirectly pointing me to another of Thomasā€™ great pieces of software) :+1::+1:

But I must advise once again:

I can not make this work. I think itā€™s because your setup is having troubles together with the :host part I use.

Please see my code: So currently

      - entity: sensor.problems_any
        name: Probleme
        icon: mdi:check-circle
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
                  .badge-container .label-badge .value::after {
                   {% if is_state('sensor.problems_any','1') %}
                     content: "{{states(config.entity)}}";
                   {% endif %}
                  }  
          .: |
            ha-label-badge ha-state-icon {
              {% if is_state('sensor.problems_any','0') %}
                display: none;
              {% endif %}
            }
            :host {
              {% if states(config.entity) | int(0) == 0 -%}
              --label-badge-text-color: green;
              --label-badge-red: green;
              {% else %}
              color: red;
              --label-badge-text-color: red;
              --label-badge-red: red;
              --label-badge-background-color: yellow;
              {% endif %}
            }

gives

  • grafik when sensor value is 0 ==> exactly what I want, perfect!
  • grafik when sensor value is 1 ==> here I still have the icon shown together with the value. How to get rid of the icon?