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

[Mariusthvdb (Marius)]

another day, another challenge…

please help me mod the map card in a stack, to fill the full width of the card.

this is a piece of the yaml I use:

type: conditional
conditions:
  - entity: binary_sensor.earthquakes_near_active
    state: 'on'
card:
  type: entities
  header:
    type: picture
    image: /local/images/aardbeving.jpg
  entities:

    - type: custom:hui-element
      card_type: entities
      style: |
        ha-card {
          margin: 0px -16px 0px -16px;
          box-shadow: none;
        }
      title: Quakes
      show_header_toggle: false
      entities:
        - binary_sensor.earthquakes_near_active
        - sensor.earthquakes_near
        - input_number.quakes_near

        - type: custom:auto-entities
          show_empty: false
          entities:
            - zone.home
          card:
            type: map
            style: |
              ha-card {
                box-shadow: none;
              }
#                 margin: 0px -16px 0px -16px;
            default_zoom: 4
          filter:
#            include:
#              - entity_id: geo_location.*
            template: >
              {%- set ns = namespace(quakes_near=[]) %}
              {% set km = states('input_number.quakes_near')|float %}
              {% set location = states('input_select.quakes_near') %}
              {% for s in states.geo_location|selectattr('attributes.source','eq','usgs_earthquakes_feed')
                   if distance(s.entity_id,location) < km %}
                    {% set ns.quakes_near = ns.quakes_near + s.entity_id %}
              {% endfor %}
              {{ns.quakes_near}}

and as you can see I normally use the

margin: 0px -16px 0px -16px;

to make it happen. However, on the map card it merely shifts it to the left, creating an even bigger gap on the right side.

this is un-modded:

and this with the mod:

really odd…

[KTibow (Kendell R)]

Have you tried position: absolute and family or width?

[KTibow (Kendell R)]

In the YAML editor of the card.

[KTibow (Kendell R)]

Yes, using mod-card. Please try to read the documentation.

[Mariusthvdb (Marius)]

no I haven’t, the only positional mods I use, system wide, are like margin: 0px -16px 0px -16px; sometimes 8 px more or less, but it always works perfectly.
Except for these maps obviously.

What would you suggest? combine this with position: absolute? or only that?
Not sure what you mean with family?

did try object-fit: auto; but none of that seems to have any effect.
The map card section only does show perfectly, so it is an issue displaying that in the entities card stacking it…

[ASNNetworks]

Not sure if this is of any help, but I had a similar challenge when I created a button-card. Since button-card uses CSS codes like card-mod, it might work with card-mod as well. I wanted to display the entity picture in fullscreen inside the button card (I created this project with it to give you an idea). Which worked, using the following code:

            card:
              - padding: 0px
              - background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
            entity_picture:
              - height: 100%
              - width: 100%
              - position: absolute

Perhaps you can use variables like padding: 0px for the card element and height: 100% and width: 100% for the map element with card-mod. Not sure if it’s in anyway helpful, but I figured it doesn’t hurt to try.

[Mariusthvdb (Marius)]

Thanks, and yes, I did try several of these already, nothing changes anything… I also tried a custom:stack-in-card, but even there, the Map behaves differently than the other elements.

Since this is all customization, there’s no change any of the HA Dev’s will care, even though to seems to be an issue with the Map card’s properties… at least as far as all tried options seem to indicate.

[KTibow (Kendell R)]

You can combine position: absolute and other properties like top, left, bottom, and right to get precise control over positioning. You might also want to use position: relative.

[Mariusthvdb (Marius)]

Ok thanks Kendell,
I see. And do use those all over the place in eg the button-cards.
This however seems to be more of a challenge , can’t get anything to do the job.

As said using the Map on its own in the auto- entities works just fine, but stacking it creates the issue.

Since these stack are wide spread in my config , and all are styled for margin, I am rather used to that.

Except with the Map…

[KTibow (Kendell R)]

Did you try mod-card yet?

[Ildar_Gabdullin]

Marius, I see no differences on the left & right sides:

type: conditional
conditions:
  - entity: binary_sensor.service_on_value
    state: 'on'
card:
  type: entities
  header:
    type: picture
    image: /local/images/blue_low_2.jpg
  entities:
    - type: 'custom:hui-element'
      card_type: entities
      style: |
        ha-card {
          margin: 0px -16px 0px -16px;
          box-shadow: none;
        }
      title: Quakes
      show_header_toggle: false
      entities:
        - binary_sensor.updater
        - sensor.cleargrass_1_co2
        - input_number.test_number
        - type: 'custom:auto-entities'
          show_empty: false
          entities:
            - zone.home
          card:
            type: map
            style: |
              ha-card {
                box-shadow: none;
              }
            default_zoom: 4
          filter:
            include:
              - entity_id: device_tracker.life360*

Also, I wonder why you use "hui-element" card, here is a card w/o it, it seems almost same (difference may be tuned by card-mod, I think):

type: conditional
conditions:
  - entity: binary_sensor.service_on_value
    state: 'on'
card:
  type: entities
  title: Quakes
  show_header_toggle: false
  header:
    type: picture
    image: /local/images/blue_low_2.jpg
  entities:
    - binary_sensor.updater
    - sensor.cleargrass_1_co2
    - input_number.test_number
    - type: 'custom:auto-entities'
      show_empty: false
      entities:
        - zone.home
      card:
        type: map
        style: |
          ha-card {
            box-shadow: none;
          }
        default_zoom: 4
      filter:
        include:
          - entity_id: device_tracker.life360*

[Mariusthvdb (Marius)]

I hadnt, and now see I should have
Its a bit complicated because the margins go into the mod-card style, while the box-shadow can be in the map style:

        - type: custom:mod-card
          card_mod:
          style: |
            ha-card {
              margin: 0px -16px 0px -16px;
            }
          card:
            type: custom:auto-entities
            show_empty: false
            entities:
              - zone.home
            card:
              type: map
              style: |
                ha-card {
                  box-shadow: none;
                }
  #                 margin: 0px -16px 0px -16px;
              default_zoom: 4
            filter:
  #            include:
  #              - entity_id: geo_location.*
              template: >
                {%- set ns = namespace(quakes_near=[]) %}
                {% set km = states('input_number.quakes_near')|float %}
                {% set location = states('input_select.quakes_near') %}
                {% for s in states.geo_location|selectattr('attributes.source','eq','usgs_earthquakes_feed')
                     if distance(s.entity_id,location) < km %}
                      {% set ns.quakes_near = ns.quakes_near + s.entity_id %}
                {% endfor %}
                {{ns.quakes_near}}

thanks for the suggestion!

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Also, I wonder why you use "hui-element" card, here is a card w/o it, it seems almost same (difference may be tuned by card-mod, I think):

tbh, I dont remember, and I took it out just now.

if one adds this for card_header:

      .card-header {background-color: var(--primary-color);}

it immediately makes clear what is happening:

thats why the header is so difficult, and I might be better of using a picture card without entities…

btw, the bottom off this stack is the full list of quakes (if there are any of course, not now, so empty Map). This is hidden in the fold-entity-row, so poses yet another challenge to get the correct mod-card syntax I still need to find:

    - type: custom:hui-element
      card_type: markdown
      style: |
        ha-card {
          box-shadow: none;
        }
      content: >
        {{state_attr('sensor.earthquakes_near','list')}}

    - type: divider
    - binary_sensor.earthquakes_active
    - sensor.earthquakes

    - type: custom:fold-entity-row
      head:
        type: section
        label: All Quakes
      padding: 0
      entities:
        - type: custom:hui-element
          card_type: map
          style: |
            ha-card {
              box-shadow: none;
            }
#                   margin: 0px -16px -16px -16px;
          entities:
            - zone.home
          geo_location_sources:
            - usgs_earthquakes_feed
          default_zoom: 4

[Mariusthvdb (Marius)]

bingo:

    - type: divider
    - binary_sensor.earthquakes_active
    - sensor.earthquakes

    - type: custom:fold-entity-row
      head:
        type: section
        label: All Quakes
      padding: 0
      entities:
        - type: custom:mod-card
          card_mod:
          style: |
            ha-card {
              margin: 0px -16px -16px -16px;
            }
          card:
            type: custom:hui-element
            card_type: map
            style: |
              ha-card {
                box-shadow: none;
              }
  #                   margin: 0px -16px -16px -16px;
            entities:
              - zone.home
            geo_location_sources:
              - usgs_earthquakes_feed
            default_zoom: 4

btw, I now see I can leave out the hui-element there too, where it needs to stay for the markdown card above it. (see post above for that)

[maxym]

Hello just spotted it:

@Mariusthvdb

          card_mod:
          style: |
            ha-card {
              margin: 0px -16px -16px -16px;
            }

Isn’t card-mod / style indentation incorrect? Shouldn’t it be?

          card_mod:
            style: |
              ha-card {
                margin: 0px -16px -16px -16px;
              }

[Mariusthvdb (Marius)]

guess not, all I can say it works perfectly now on both my Maps. Maybe its a typo on Thomas’s repo?

[FreakLikeMe]

Im trying to do 2 things to the custom:fold-entity-row but i cant seem to get it to work. any help would be appreciated.

1. Get rid of the divider by making the divider size 0px
2. Center the label text

This is the code I have.

type: 'custom:vertical-stack-in-card'
cards:
  - type: entity-filter
    entities:
      - input_boolean.home
      - input_boolean.away
      - input_boolean.extended_away
      - input_boolean.guest
      - input_boolean.cleaning_lady
    state_filter:
      - 'on'
    card:
      type: glance
      show_state: false
      show_icon: false
      show_name: true
  - type: 'custom:mod-card'
    style: |
      ha-card {
          background-color: #2b374e;
      }    
      div.divider {
        height: 0px;
      }
      div.label {
        text-align: center;
      }
    card:
      type: 'custom:fold-entity-row'
      head:
        type: section
        label: Mode options
      entities:
        - input_boolean.guest
        - input_text.guest_name

[Ildar_Gabdullin]

@Mariusthvdb

it immediately makes clear what is happening:

@Mariusthvdb

guess not, all I can say it works perfectly now on both my Maps. Maybe its a typo on Thomas’s repo?

I think you may use:

card_mod:
  style:
    .....

as well as:

style:
  .....

But for picture-elements only the 1st case works (as I understood).
Your case w/o indent is same as the 2nd case.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Your case w/o indent is same as the 2nd case.

confirmed!

      entities:
        - type: custom:mod-card
          style: |
            ha-card {
              margin: 0px -16px -16px -16px;
            }
          card:
            type: map
            style: |
              ha-card {
                box-shadow: none;
              }
            entities:
              - zone.home
            geo_location_sources:
              - usgs_earthquakes_feed
            default_zoom: 4

works fine.

@Ildar_Gabdullin would you know if we can style the header picture in this card, and have it fill (probably bottom-margin +24px) to get rid of the white space between it and the header bar (in my image the grey bar with ‘Quakes’)

[Ildar_Gabdullin]

@Mariusthvdb

confirmed!

Marius, did you see that there is no wrong spaces in my example?
Even w/o mod-card.