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

[arganto]

You can either set no-wrap. But then perhaps get problems with the size.

  - entity: sun.sun
    card_mod:
      style:
        .: |
          .entities-row div.entity {
            white-space: nowrap;
          }
    type: custom:multiple-entity-row

Or you can align theme on top

  - entity: sun.sun
    card_mod:
      style:
        .: |
          .entities-row {
           align-items: start !important;
          }
    type: custom:multiple-entity-row

Or where is you demand/problem, if I perhaps didn’t get it?

[Mariusthvdb (Marius)]

@arganto

    card_mod:
      style:
        .: |
          .entities-row {
           align-items: start !important;
          }

thank you vm.

can confirm this works nicely indeed:

complete used card-mod:

    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
          state-badge {
            display: none;
          }
        .: |
          .entities-row {
           align-items: start !important;
          }

for reference.

its too bad we can not use

    tap_action:
      action: more-info
      entity: weather.buienradar

when display: none is set to the state-badge. I was kind of hoping the action would be set on the card, (like with custom:button-card) and not on the main entity. So, if we want an action to be happening we are forced to keep that state-badge, and get a higher card because of that

Thanks to arganto’s mod, the card remains nicely aligned.

(the nowrap also works, but then the card overflows, which is kind of obvious. shouldnt interfere with that aspect of the card calculations probably)

I did lower the padding (default is 16px) on the containing entities card to take away some of that vertical white space

type: entities
card_mod:
  style: |
    .card-content {
      padding: 8px;
    }
entities:
  - type: custom:multiple-entity-row

again, full card with all tested card-mod options (and some multiple-entity-row options) in comments:

type: entities
card_mod:
  style: |
    .card-content {
      padding: 8px;
    }
entities:
  - type: custom:multiple-entity-row
    entity: weather.buienradar
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
#           state-badge {
#             display: none;
#           }
        .: |
          .entities-row {
           align-items: start !important;
          }
#           .entities-row div.entity {
#             white-space: nowrap;
#           }
    show_state: false
#     tap_action:
#       action: more-info
#       entity: weather.buienradar
    entities:
      - entity: sensor.buienradar_temperature
        name: Temp
      - entity: sensor.buienradar_wind_force
        name: Bft
      - entity: sensor.buienradar_wind_direction
        name: Wind
#         unit: Uit #🧭
      - entity: sensor.buienradar_pressure
        name: Lucht
      - entity: sensor.buienradar_precipitation
        name: Neerslag
      - entity: sensor.buienradar_goes_irradiance
        name: Zon
      - entity: sensor.buienradar_humidity
        name: Vocht
#           - entity: sensor.buienradar_barometer
#             name: Bar

result:

[Mariusthvdb (Marius)]

same card, another challenge apparently…

multiple-entity with state:

but I dont want the state, so try:

  - type: entities
    entities:
      - entity: sun.sun
        type: custom:multiple-entity-row
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }
            .: |
              .entities-row div.state.entity {
                display: none;
              }
        state_color: true
#         show_state: false
        entities:
          - entity: sensor.sun_next_dawn
            name: Dawn
            format: time
          - entity: sensor.sun_solar_elevation
            name: Hoogte
            unit: false
          - entity: sensor.sun_next_rising
            name: Sunrise
            format: time
          - entity: sensor.sun_next_noon
            name: Noon
            format: time
          - entity: sensor.sun_next_setting
            name: Sunset
            format: time
          - entity: sensor.sun_next_dusk
            name: Dusk
            format: time
          - entity: sensor.sun_next_midnight
            name: Night
            format: time

showing:

so, in this case the display: none actually only does the same as show_state: false (commented because also tested) and does Not ‘release’ the space of that element to the card.

Could we some how force the card to be ‘filled’ from the right side?

all the more remarkable, because on mobile this works nicely, and filling the full width:

[arganto]

@Mariusthvdb

only does the same as show_state: false (commented because also tested) and does Not ‘release’ the space of that element to the card.

show_state: false

is releasing the space. So you migh be wrong with your statement above, that it is not releasing.

[Mariusthvdb (Marius)]

probably, maybe I should take that out, and simply forward the ask:

why does this row not get filled from right as the examples show, but leave that space open.

Only if I use extra entities the space gets used (but then the card overflow on mobile, so that is not an option)

[arganto]

Because it has no 100% width and only takes the size it is needing, left aligned. If you set width 100% to the .entities-row it could be, that it is directly as you want. But you should see this if you click arround on the elements in developer tools, too.

[Mariusthvdb (Marius)]

well, sure, ive been clicking my way around this morning… hehe

I just discover it is caused by using the:

        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }

if I replace that with the state: false native card option, we get:

which is exactly what I am looking for was expecting based on the docs examples. Unfortunately we can now clearly see the name space is not released, going to the mobile display of the row:

causing the right side to overflow again… grr

[arganto]

You should describe what you want. If you want it right aligned with minimum space or distributed over the whole line. Without this, this is too much trial and error.

Compare

@Mariusthvdb

works nicely, and filling the full width:

with

@Mariusthvdb

which is exactly what I am looking for.

[Mariusthvdb (Marius)]

@arganto

distributed over the whole line

is what I am after yes. Bigger problem seems to be I can not get mobile And desktop to behave like that with the same config.

I wrote ‘what I am looking for’ in that post, because I was indeed looking for the reason why the card didnt do what I expected it to do, fill from the right. (I’ve edited that post)

As I have established now, that is caused by the card_mod styling on the .info

So, cut it short, I like an icon, no name, several icons spread evenly over the space next to the icon, and no closing state on the right.

Ill limit the number of entities to what can be displayed correctly on mobile, as that space seems more limited than 1 column on desktop, and doesnt get resized, but overflows.

[arganto]

@Mariusthvdb

So, cut it short, I like an icon, no name, several icons spread evenly over the space next to the icon, and no closing state on the right.

But did you test this and leave everything what you had before.

[Mariusthvdb (Marius)]

yes, and that has come very close to being very nice:

  - type: entities
    card_mod:
      style: |
        .card-content {
          padding: 8px 16px 8px 0px;
        }
    entities:
      - entity: sun.sun
        type: custom:multiple-entity-row
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                display: none;
              }
            .: |
              .entities-row {
               width: 100%;
              }
        state_color: true
        show_state: false
#         name: false

I had to push the padding a bit, because otherwise too much space would be on the left.

changing the justify-content does not seem to make things better (I feel there is too much whitespace between the entities now on desktop (see above). Mobile is better but even there the justify could improve…

so many options…

update

had to add !important to overwrite the card option for justify-content:

            .: |
              .entities-row {
               width: 100%;
               justify-content: space-evenly !important;
              }

and, so you know this has not been in vain:

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          --stack-card-margin: 0px;
        }
    card:
      type: vertical-stack
      cards:
        - type: custom:sun-card
          card_mod:
            style: |
              .sun-card {
                --sun-card-lines: #d7d7d7 !important;
                padding: 0px !important;
              }
              .sun-card-header span {
                 display: none;
              }
              .sun-card-footer span {
                display: none;
              }
              .sun-card-footer-row {
                padding: 0px !important
              }

        - !include /config/dashboard/includes/include_zon_multiple_row.yaml

[arganto]

Like your status and sharing of it. But I would suggest to place all this in card-mod theme thread, where you find more audience and where it better belongs to.

[LeiChat (Richard)]

Would appreciate any tips on right aligning a second entity value on a card.

If I use markup to put a span/div round the second value in the ‘secondary information’ may I use card-mod to align that content to the right?

Mockup based on a Mushroom entity card…

Aside from ‘Multiple Entity Row’, has anyone come across any other cards that support two parameter/entity values?

[Arroma]

Thanks, I didn’t know there was that thread

[Lunkobelix]

Struggeling with fonts on iOS, on Android and Windows this works fine.

Does anyone have a few fonts that work well cross platform?

ha-card {
 ha-card-background: rgba(0, 0, 0, 0);
 box-shadow: none;
 margin: 20px 10px 0px -5px;
 font-size: 15px;
 font-family: 'Segoe UI Light";
 text-align: center

[arganto]

@LeiChat

Aside from ‘Multiple Entity Row’, has anyone come across any other cards that support two parameter/entity values?

e.g.

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

GitHub - jcwillox/lovelace-paper-buttons-row: Adds highly configurable...

Frontpage - Swiss Army Knife Card for Home Assistant

[DeltaNu1142]

@jamal01

I use mushroom title card and then modify that

Care to share your YAML? I’m playing around with it, but having zero luck using card-mod on the title card:

type: custom:expander-card
title: ''
cards:
  - type: entities
    entities:
      - entity: climate.first_floor_baseboards
        name: First Floor
        icon: mdi:radiator
      - entity: climate.second_floor_baseboards
        name: Second Floor
        icon: mdi:radiator
      - entity: climate.master_bedroom_baseboards
        name: Master Bedroom
        icon: mdi:radiator
      - entity: climate.basement_baseboards
        name: Basement
        icon: mdi:radiator
style:
  .: |
    ha-card {
      height: 4em;
      background: none;
      box-shadow: none;
    }
state_color: false
button-background: rgba(7, 103, 215, 0.24)
clear: false
padding: '0'
child-padding: '0'
gap: '0'
title-card:
  type: custom:mod-card
  card:
    type: custom:mushroom-title-card
    title: BASEBOARD HEATERS
  card-mod:
    style: |
      mushroom-title-card$: |
        .title {
          font-size: 35px!important;
          font-weight: 520!important;
        }
title-card-button-overlay: false

[richard0815 (Richard Breuning)]

Hi,

how can I colourize the numbers unequal to “0” ?

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.number_lights_on
    name: Lichter an
  - type: entity
    entity: sensor.door_count
    name: Offene Türen
    icon: mdi:door-sliding

I Just want to get an an idicator and change colour to red if Light is on (uneuqal 0) or Doors are open (uneuqal 0)

[arganto]

1st post → Bottom → Link from Ildar → Entity Card.

[hoangvh (hoang)]

Hi,
how can I add or modify badge in any Tile card like the climate or person entities features in