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

[loocd]

@m4v3

Elseway the icons and text would be shifted.

you’re right - it seems there was one more change in my dev tools that I didn’t notice was there.

change it to the following and it should work like a charm:

        * {
          line-height: unset;
          height: unset;
        }

[m4v3 (Mario)]

I have used this code on an other card, but unfortunately there is no change in the card when I modify any value within “hui-generic-entity-row$”

card_mod:
  style:
    .: |
      ha-card {
        --mdc-icon-size: 20px;
        }
      .card-content {
        padding-top: 5px;
        padding-bottom: 5px;
      }
    hui-sensor-entity-row$:
      hui-generic-entity-row$: |
        * {
          line-height: unset;
          margin-top: 0px !important;
          margin-bottom: 0px  !important;
          margin-left: -20px !important;
          height: 17px;

[loocd]

@m4v3

there is no change in the card when I modify any value within “hui-generic-entity-row$”

That’s because you are targeting things that aren’t there.

With CSS you always need to target an element that you can find in the html. So the starting point is always to look at your browser’s dev tools:

Card mod starts at ha-card. you are targeting all hui-generic-entity-row that are within a hui-sensor-entity-row.
But if you look at the screenshot above, you’ll see that there isn’t a hui-sensor-entity-row in the html tree.

You’ll need to adjust accordingly.
Let me know if you get stuck

[m4v3 (Mario)]

Thank you loocd!
Yes you are right - it should be “cover”

type: entities
entities:
  - entity: cover.kids_room_roller_shutter_3
  - entity: cover.roof_roller_shutter_3
  - entity: cover.bedroom_roller_shutter
  - entity: cover.kitchen_roller_shutter
card_mod:
  style:
    .: |
      ha-card {
        --mdc-icon-size: 20px;
        }
      .card-content {
        padding-top: 0px;
        padding-bottom: 0px;
      }
    hui-cover-entity-row$:
      hui-generic-entity-row$: |
        * {
          line-height: unset;
          height: unset;
          margin-top: 0px !important;
          margin-bottom: 0px  !important;
        }

How can I reduce the distance between the entities?

[loocd]

same thing here - you need to go through the document tree and figure out where the sizing is coming from.
If you do that you’ll notice that the buttons have huge padding around them:

card_mod:
  style:
    .: |
      ha-card {
        --mdc-icon-size: 20px;
        }
      .card-content {
        padding-top: 0px;
        padding-bottom: 0px;
      }
    hui-cover-entity-row$:
      hui-generic-entity-row$: |
        * {
          line-height: unset;
          height: unset;
        }
      ha-cover-controls$: 
        ha-icon-button$: 
          mwc-icon-button$: |
            button {
              padding-top: 5px !important;
              padding-bottom: 5px !important;
              height: unset !important;
            }

there’s still some margin left between the four rows, but you can get rid of them in the same way by looking at your dev tools, finding the element that adds that margin and then removing it.

[Ildar_Gabdullin]

Styling badges 2024.8:

Default:

Even more beautified:

Now try to unsee it )))

And yes, it is card-modded like old-style badges:

code

type: entity
show_name: true
show_state: true
show_icon: true
entity: zone.home
name: some very long long long name
card_mod:
  style:
    ha-badge $: |
      span.label {
        color: magenta;
        font-size: 14px;
        transform: translateY(50px);
        line-height: 14px;
      }
      .badge {
        background-color: lightblue !important;
        width: 100px !important;
        height: 100px !important;
        flex-direction: column !important;
        border-radius: 50% !important;
        border: 2px solid red !important;
      }
      .info {
        align-items: center !important;
      }
      .content {
        transform: translateY(-40px) !important;
      }
    .: |
      :host {
        --primary-color: green;
      }
      ha-state-icon {
        --mdc-icon-size: 36px;
        margin-top: 24px;
      }
      state-display {
        color: blue;
        font-size: 18px;
      }

How was it achieved?

It is patched card-mod.js: replace “hui-state-badge-element” with “hui-entity-badge”.
Very brute-force way w/o thinking about consequences…

[Ildar_Gabdullin]

About circular progress indicator:

type: entities
entities:
  - entity: input_number.test_level_1
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            {% set THICKNESS = "60%" -%}
            {% set RING_OPACITY = "0%" -%}
            {%- set MASK_COLOR = "rgba(255,255,255,0.8)" -%}
            {%- set BACK_COLOR = "rgba(127,127,127,0.1)" -%}
            {%- set RING_COLOR = "rgb(252,109,9)" -%}
            background:
              radial-gradient(
                {{MASK_COLOR}} {{THICKNESS}},
                transparent {{RING_OPACITY}}
              ),
              conic-gradient(
                {{RING_COLOR}} {{states(config.entity)|round(0)}}% 0%,
                {{BACK_COLOR}} 0% 100%
              );
          }

[Mariusthvdb (Marius)]

Nice!

I’ve adapted it quickly to use the brightness of a light entity:

    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            {% set THICKNESS = "60%" -%}
            {% set RING_OPACITY = "0%" -%}
            {% set brightness = state_attr(config.entity,'brightness')/2.54 %}
            {%- set MASK_COLOR = "rgba(255,255,255,0.8)" -%}
            {%- set BACK_COLOR = "rgba(127,127,127,0.1)" -%}
            {%- set RING_COLOR = "rgb(252,109,9)" -%}
            background:
              radial-gradient(
                {{MASK_COLOR}} {{THICKNESS}},
                transparent {{RING_OPACITY}}
              ),
              conic-gradient(
                {{RING_COLOR}} {{brightness}}% 0%,
                {{BACK_COLOR}} 0% 100%
              );
          }

however, it suffers the same issue I have in other places: a darker background shines through:

it also does not change when turning off (making brightness effectively 0)…

unless we reload the view.

so to catch that we might need to add a condition for the entity being ‘on’, which is a bit of a nuisance really

[Ildar_Gabdullin]

mod-card

[boyi01]

thx i was just stupid…

[stephanschleichstr13]

Can someone remove the Padding from a mushroom badges?

i need access to .badge {

[danhiking (Daniel)]

I’m trying to write a single loop that conditionally changes the formatting of an entities list. I’ve got as far as being able to loop over the entities and correctly pick out the corresponding elements.

To test stuff out, I’ve got the following test setup:

type: entities
entities:
  - entity: sensor.master_bath_temperature
    secondary_info: last-changed
  - entity: sensor.master_bed_temperature
    secondary_info: last-changed
    type: custom:multiple-entity-row
    entities:
      - entity: sensor.master_bed_humidity
        name: false
        format: precision1
card_mod:
  style: |
    {% for entity in config.entities %}
    #states div:nth-child({{ loop.index }}):before {
      {% if true %}
        content: "{{loop.index}} {{entity.entity is string}} {{entity.entity}} {{states}}";
        color: green;
      {% endif %}
    }
    {% endfor %}

In reality, the list of entities is 20-30 long.

The above shows that loop.index, entity.entity, and states are all the correct type and values. However when I add states(entity.entity), the template fails:

    {% for entity in config.entities %}
    #states div:nth-child({{ loop.index }}):before {
      {% if true %}
        content: "{{loop.index}} {{states(entity.entity)}}";
        color: green;
      {% endif %}
    }
    {% endfor %}

despite previously showing that states and entity.entity appear to be the right type.

Is the problem somehow that states is not populated at this point, or is it something else? When I put states('sensor.master_bath_temperature'), the correct state is returned, so it doesn’t seem to the a missing state.

Is there an alternative way to loop over the entities programmatically to style them?

EDIT: I realized I had a type: section in there that is NOT an entity type, and that was killing the entire template!

This conditional fixes that:

card_mod:
  style: |
    {% for entity in config.entities %}
      {% if entity.entity is string %}
        #states div:nth-child({{ loop.index }}):before {
          content: "{{loop.index}} {{states(entity.entity)}}";
          color: green;
        }
      {% endif %}
    {% endfor %}

UPDATE 2: The following now works perfectly to highlight which updates appear to be taking too long:

card_mod:
  style: |
    {% for entity in config.entities %}
      {% if entity.entity is string %}
        {% if as_timestamp(now()) - as_timestamp(states[entity.entity].last_changed) > 60*30 %}
        #states div:nth-child({{ loop.index }}) {
          --secondary-text-color: yellow;
        }
        {% endif %}
      {% endif %}
    {% endfor %}