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

I specially wrote about it

Hi there, I used the Layout-card to make grid-areas.
Now I will change the background color of a grid area?
I have tried this, but now result.

Someone think that this is possible with the Card-Mod, styling elements without ha-card.
Do someone here nowā€™s how??

views:
  - title: testing
    panel: false
    path: testing
    type: 'custom:grid-layout'
    layout:
      grid-template-columns: 25% auto 25%
      grid-template-rows: null
      grid-template-areas: |
        "header header header"
        "sidebar main main"
        "footer footer footer"
      grid-area: sidebar;
      background-color: #ff0000
    badges: []
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: sensor.energy_production_tarif_1
        show_name: true
        show_icon: true
        show_state: true
        view_layout:
          grid-area: sidebar
title: homey

Iā€™m a beginner, tell me where do you insert this part of the code into Lovelace?

style: |
  @keyframes spin-office-ac {
    100% {transform: translate(-50%, -50%) scale(1.5) rotate( {% if is_state('input_boolean.air_conditioner_office', 'on') %} -360deg {% else %} 0deg {% endif %} )}
  }

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ā€¦

Have you tried position: absolute and family or width?

In the YAML editor of the card.

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

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ā€¦

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.

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.

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.

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ā€¦

Did you try mod-card yet?

1 Like

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*

I hadnt, and now see I should have :wink:
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!

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

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)

Hello just spotted it:

Isnā€™t card-mod / style indentation incorrect? Shouldnā€™t it be?

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

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

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