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

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

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.

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.

1 Like

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.

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.

1 Like

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ā€.

1 Like

Because I did not think of that :wink:

Also, itā€™s even more of a hackā€¦

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

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

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

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.

And all this is less hack than

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

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

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!

I used to use

icon: mdi:dummy

which worked.

Maybe they removed bank because it was redundant if any ā€˜dummyā€™ entry worked?

Could be, another person in the Community said he was using ā€œmdi:nullā€ all the timeā€¦

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

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

I would love to hide the divider on this fold-entity-row however :wink:
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;
          }

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

Is it possible to remove the ā€œduplicate borderā€?
Card code: link


Š”Š½ŠøŠ¼Š¾Šŗ эŠŗрŠ°Š½Š° 2023-02-20 193308