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

DeviDarkL · February 19, 2023, 1:39pm

Hey,

I don’t know if anyone can help me. I’m want the mdi:icon to rotate when it’s ‘on’ on a tile card but i cant seem to find the right class

type: custom:mod-card
card:
  type: tile
  entity: switch.aquecedor_wcsuite
  icon: mdi:fan
  name: Aquecedor WCs
card-mod:
  style: |
    @keyframes rotation { 0% { transform: rotate(0deg); }
                      100% { transform: rotate(359deg); } }
                      
    ha-tile-icon {
      {% if is_state('switch.aquecedor_wcsuite','on') %}
      animation: rotation 1.5s linear infinite; 
      {% endif %}
    }

Mariusthvdb · February 19, 2023, 2:17pm

sure, appreciate all of these efforts.
but, trying to keep things as short and simple as possible always seems best. not only for the browser and memory usage, but also in keeping up with resource changes.

If the author would implement a simple option for tabs at the button, it would certainly simplify all, including the rest of the card_mods.
until then, we need that monstrosity of a mod like Ildar has made possible. Hope it will keep for some while indeed.
until the next card update breaks it I am afraid.

Ildar_Gabdullin · February 19, 2023, 2:30pm

Most people are rather satisfied with a default implementation.
For others - a customization is available.
Surely you may try convincing the card’s developer to implement your wishes.
Same is for most cards, conditional & custom.

Mariusthvdb · February 19, 2023, 5:07pm

having started playing with

          - entity: sun.sun

            card_mod:
              style: |
                state-badge {
                  display: none;
                }
                .name {
                  display: none;
                }
                :host div:not(.name) {
                  display: none;
                }

to create a complete and non-functional gap in a glance card, I was also looking for a way to have an empty slot in an entities card. Ofc, this does not work (although, it would have been nice…) and I have come as far as:

    entities:
      - entity: sun.sun
        name: ' '
        icon: ' '
        show_state: false
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none

this however still leaves the state to be displayed, so need some extra modding.

arganto · February 19, 2023, 6:01pm

Why / for what. If you want have space, why not setting padding or margin to the one before or after? Or use type divider and hide the line of it.

Ildar_Gabdullin · February 19, 2023, 6:14pm

Ildar_Gabdullin · February 19, 2023, 6:21pm

I have a similar “blank” row too. May be used as a ready decluttering-template.
Could be more flexible than “setting padding or margin to the one before or after”.

Mariusthvdb · February 19, 2023, 6:24pm

Because I did not think of that

Also, it’s even more of a hack…

Mariusthvdb · February 19, 2023, 7:21pm

never knew about the mdi:blank ! cool. Is that card_mod? couldn’t find that at material design

btw, this works too:

      - entity: sun.sun
        card_mod:
          style:
            hui-generic-entity-row $: |
              .state {
                display: none;
              }
        name: ' '
        icon: mdi:blank #' '
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none

and seems even more concise. (we need the action settings, to not have a mouse pointer happen)

just found this little gem:

      - type: custom:template-entity-row
        state: ''
        name: ''

a row without a state and name. perfect!
haha, thats as short as it gets I think

or… no it still shows the handle on the icon field

        card_mod:
          style: |
            :host {
              pointer-events: none;
            }

helps

so summarizing:

      - type: custom:template-entity-row
        state: ''
        name: ''
        card_mod:
          style: |
            :host {
              pointer-events: none;
            }

      - entity: sun.sun
        card_mod:
          style:
            hui-generic-entity-row $: |
              .state {
                display: none;
              }
            .: |
              :host {
                pointer-events: none;
              }

        name: ' '
        icon: mdi:blank #' '
#         tap_action:
#           action: none
#         hold_action:
#           action: none
#         double_tap_action:
#           action: none

Ildar_Gabdullin · February 19, 2023, 7:40pm

It was there some time ago, present as an icon - but recently I realized that it’s gone.
The code still works.

Ildar_Gabdullin · February 19, 2023, 7:42pm

~~Could be a bad solution since sometimes a state occupies 2 lines… So hiding it causes a 1px difference.~~ No, it’s a rare case. So, your variant good.

arganto · February 19, 2023, 7:44pm

And all this is less hack than

      type: divider
      style:
        margin-top: 50px
        background-color: transparent

(with or without margin for different/adjusted spaces)?

Mariusthvdb · February 19, 2023, 7:49pm

well, maybe not…

guess there are more ways to do the same. but, background: transparent, still has a background? with : none, there effectively is none.

anyways, thanks!

klogg · February 19, 2023, 8:27pm

I used to use

icon: mdi:dummy

which worked.

Maybe they removed bank because it was redundant if any ‘dummy’ entry worked?

Ildar_Gabdullin · February 19, 2023, 8:57pm

Could be, another person in the Community said he was using “mdi:null” all the time…

Mariusthvdb · February 19, 2023, 10:21pm

icon: ''

is shorterst…

and even

icon: none

or icon: 1

works. only thing that doesnt work is an empty spot there. Seems anything works, as long as it is Not in material design icons library

Mariusthvdb · February 19, 2023, 10:46pm

btw, for the Glance card gap, this is a bit shorter:

          - entity: sun.sun
            card_mod:
              style: |
                state-badge {
                  display: none;
                }
                :host div {
                  display: none;
                }

not yet exactly sure why that would be, but since it takes less modding, I would presume it to be more efficient

Mariusthvdb · February 20, 2023, 8:15am

I would love to hide the divider on this fold-entity-row however
seems not to be described in the main post yet, so maybe explore that a bit:

consider this:

type: entities
title: Air quality dashboard
card_mod:
  class: class-header-no-margin-no-color
  style: |
    .card-header {
      background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
                        {% if aqi <= 50 %} seagreen
                        {% elif aqi <= 100 %} gold
                        {% elif aqi <= 150 %} orange
                        {% elif aqi <= 200 %} crimson
                        {% elif aqi <= 300 %} purple
                        {% else %} maroon
                        {% endif %};
      color: var(--text-color-off);
    }
entities:

  - type: custom:fold-entity-row
    head:
      type: section
      label: AirVisual
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }

    padding: 0
    entities:

which shows like

if you look closely, you’ll notice the divider peeking through the header color.

we did have a similar case before: 🔹 Card-mod - Add css styles to any lovelace card - #2725 by Ildar_Gabdullin however using that now does not hide the divider?

So, I’d love to set that to none, or at least transparent.

guess we should set the height to 0px?

  - type: custom:fold-entity-row
    card_mod:
      style:
        div#head hui-section-row $: |
          .divider {
              background-color: transparent;
            }

is not successful though.

or

      style:
        div#head hui-section-row $: |
          .divider {
              height: 0px !important;
            }

for that matter

Update and fix

duh… I thought it was as simple as:

  - type: custom:fold-entity-row
    head:
      type: section
      label: AirVisual
      card_mod: &label
        style: |
          .label {
            margin-left: 0px;
          }
          .divider {
            height: 0px;
          }

but now that makes the lable change position

so, in this case setting a transparent color is indeed better than not showing the element:

      card_mod:
        style: |
          .label {
            margin-left: 0px;
          }
          .divider {
            background-color: transparent;
          }

SteffenDE · February 20, 2023, 12:57pm

Tap / Press animation without manual helper?

Is there a option to play a animation of a button, entity (Mushroom etc.) after press?

I often have a script as a tap action and want to show a short animation that I can see something happens but I have no status changed of the entity.

Regards, Steffen

Shestak · February 20, 2023, 4:39pm

Is it possible to remove the “duplicate border”?
Card code: link