πŸ”Ή Card-mod - Add css styles to any lovelace card

odd thing is it is no longer in inspector at all…

trying to replace my old footer mod:

        .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          font-size: 20px;
          color: orange;
        }

and manipulate the chips in the footer at all, I copied your code to:

    card_mod:
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }
        .header-footer.ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              border-radius: 4px !important;
            }
            .mdc-chip span {
              text-align: center;
              width: 250px;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
          hui-buttons-base $: |
            .ha-scrollbar {
              justify-content: center;
            }

and, ofc, see nothing happening…

while it needs to be something like:

which I now realize with an extra stack of buttons:

      - type: custom:hui-element
        card_type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: script.garage_lamellen_open
            icon: mdi:arrow-up
            <<: &button
              show_name: false
              aspect_ratio: 3/1
              styles:
                card:
                  - box-shadow: none
          - type: custom:button-card
            entity: script.garage_lamellen_my
            name: My
            show_icon: false
            aspect_ratio: 3/1
            styles:
              card:
                - color: orange
                - box-shadow: none
              name:
                - font-weight: bold
                - font-size: 40px
            tap_action:
              action: call-service
              service: script.toggle
              service_data:
                entity_id: entity
              haptic: light
            hold_action:
              action: more-info
              haptic: light
          - type: custom:button-card
            entity: script.garage_lamellen_close
            icon: mdi:arrow-down
            <<: *button

which is ok-ish, but a huge bit of code for 3 little buttons…

how can we manipulate the footer chips?

Try this (not tested):

     style:
        .header-footer.ha-scrollbar ha-chip:
          $: |
            ..
        .: |
          .card-header {
            ...
          }

really sorry but unfortunately no:

    card_mod:
      style:
        .header-footer.ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              border-radius: 4px !important;
              color: orange
            }
            .mdc-chip span {
              text-align: center;
              width: 250px;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
          hui-buttons-base $: |
            .ha-scrollbar {
              justify-content: center;
            }
        .: |
          .card-header {
            background-color: var(--background-color-off);
            color: var(--text-color-off);
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 16px 0px;
          }

does exactly nothing

Wrong, .ha-scrollbar is inside shadowRoot.
Check Code Inspector for the correct path.

A bit more compact view for custom:sun-card:

type: custom:sun-card
showAzimuth: false
showElevation: false
timeFormat: 24h
card_mod:
  style: |
    .sun-card-header span {
      font-size: var(--mdc-typography-body1-font-size) !important;
      padding-bottom: 0px !important;
    }
    .sun-card-footer span {
      font-size: var(--mdc-typography-body1-font-size) !important;
      padding-bottom: 0px !important;
    }
    .sun-card-footer-row {
      padding-top: 0px !important;
    }

Left - with card-mod, right - w/o card-mod:


A similar for a horizon-card (fork of the archived sun-card):

type: custom:horizon-card
card_mod:
  style: |
    .horizon-card-header {
      margin-top: 0px !important;
    }
    .horizon-card-graph {
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }
    .horizon-card-footer {
      margin-bottom: 0px !important;
    }
    .horizon-card-footer > * {
      margin-top: 0px !important;
    }
    .horizon-card-field-name {
      font-size: 0.8rem !important;
      color: red !important;
    }
    .horizon-card-field-value {
      font-size: 1.8rem !important;
      color: cyan !important;
    }

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

5 Likes

and another challenge, which is probably easy, but at the end of the day…

  - type: custom:fold-entity-row
    head:
      type: section
      label: Camera
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: picture-entity
        card_mod:
# document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > horizontal-layout").shadowRoot.querySelector("#columns > div:nth-child(1) > hui-entities-card:nth-child(9)").shadowRoot.querySelector("#states > div:nth-child(5) > fold-entity-row").shadowRoot.querySelector("#measure > div > hui-element > hui-picture-entity-card").shadowRoot.querySelector("ha-card > hui-image").shadowRoot.querySelector("#image")
          style: |
              div#container.image {
                margin: 0px -16px -16px -16px;
              }
              ha-card {
                box-shadow: none;
              }

I want the picture to take the full width in the fold, and not respect the margins…

path in inspector:

# document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > horizontal-layout").shadowRoot.querySelector("#columns > div:nth-child(1) > hui-entities-card:nth-child(9)").shadowRoot.querySelector("#states > div:nth-child(5) > fold-entity-row").shadowRoot.querySelector("#measure > div > hui-element > hui-picture-entity-card").shadowRoot.querySelector("ha-card > hui-image").shadowRoot.querySelector("#image")

normally, this works:

        card_mod:
          style: |
              ha-card.type-picture-entity {
                box-shadow: none;
                margin: 0px -16px -16px -16px;
              }

but the only thing modded is the box-shadow.

Ive had fights like this with folded Map cards, and they are successfully modded with:

    - type: custom:fold-entity-row
      head:
        type: section
        label: Map
      card_mod:
        style: |
          div#items {
            margin: 16px -16px -16px -16px;
          }

no so this case ;-((

Adapt this for your needs:

type: entities
entities:
  - sun.sun
  - sun.sun
  - type: section
  - sun.sun
  - sun.sun
  - type: custom:fold-entity-row
    head:
      type: section
      label: Camera
      card_mod:
        style: |
          :host {
            overflow: visible !important;
            margin-bottom: 8px;
          }
    padding: 0
    open: true
    entities:
      - type: custom:hui-element
        card_type: picture-entity
        entity: input_boolean.test_boolean
        image: /local/images/blue_low_2.jpg
    card_mod:
      style: |
        div#items  {
          margin-left: -16px;
          margin-right: -16px;
          margin-bottom: -16px;
        }
        :host {
          margin-bottom: 16px;
        }
  - type: section
    card_mod:
      style: |
        .divider {
          margin-top: 16px !important;
        }
  - sun.sun
  - sun.sun

Not as elegant as it could be - not 100% perfect: the image’s top edge is not on the same height as the divider when folded. This is happening because of using entities card. You should use stacks instead.
Compare with stack solution:

1 Like

thanks. Tried the full stack-in-card, but that has various other ugly results. Mixing it like:

  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#items {
          margin: 8px -16px -16px -16px;
        }
#        :host {
#          margin-bottom: 16px;
#        }
    head:
      type: section
      label: Camera
    padding: 0
    entities:
      - type: custom:stack-in-card
        keep:
          background: true
        cards:
          - type: custom:hui-element
            card_type: picture-entity
#            card_mod:
#              style: |
#                  ha-card {
#                    box-shadow: none;
#                  }
            entity: camera.buienradar

makes it show as I want, folded and unfolded!

For people who are still using badges:

I realized that we can replace icons for badges - even if badges do not have badges displayed.
For example, this badge has an icon displayed:

badges:
  - entity: sun.sun

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
And this badge does not have an icon:

badges:
  - entity: sensor.cleargrass_1_co2

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
We can replace an icon for the 1st badge:

badges:
  - entity: sun.sun
    icon: mdi:home

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
And also we can do it for the 2nd badge:

badges:
  - entity: sensor.cleargrass_1_co2
    icon: mdi:home

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Why it could be useful?
Suppose we have a sensor whose badge is with no icon displayed (like that β€œCO2” badge) - and then we need to display an icon dynamically (dependingly on some conditions).
To achieve this, we need to:

  • add an icon first by β€œicon: something” (this particular icon will not be displayed);
  • replace this icon by card-mod by using templates:
      - entity: sensor.cleargrass_1_co2
        icon: mdi:home  ###creates a placeholder
        card_mod:
          style: |
            :host {
              {% if states(config.entity) | int > 600 %}
              --card-mod-icon: mdi:fire;
              {% else %}
              --card-mod-icon: mdi:leaf;
              {% endif %}
            }

One of possible usage - showing an icon for a season badge.
By default the season badge shows a current state:

badge:
  - entity: sensor.season

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
Here is how to change it:

badges:
  - entity: sensor.season
    icon: mdi:home
    card_mod:
      style: |
        :host {
          {% set season = states(config.entity) %}
          {% set icon =
            {
              'winter':'mdi:snowflake',
              'spring':'mdi:flower',
              'summer':'mdi:sunglasses',
              'autumn':'mdi:leaf'
            } %}
          {% set icon_color =
            {
              'winter':'rgb(138,180,248)',
              'spring':'rgb(106,168,79)',
              'summer':'rgb(0,0,0)',
              'autumn':'rgb(255,126,0)'
            } %}
          {% set border_color =
            {
              'winter':'rgb(138,180,248)',
              'spring':'rgb(106,168,79)',
              'summer':'rgb(230,145,56)',
              'autumn':'rgb(255,126,0)'
            } %}
          {% set back_color =
            {
              'winter':'rgb(255,255,255)',
              'spring':'rgb(216,251,135)',
              'summer':'rgb(255,242,204)',
              'autumn':'rgb(252,229,205)'
            } %}
          --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
          --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
          --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
          --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
        }

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
Probably you may find more nice color combinations )))


Another case is - show either an icon or a value:
post
image
image


More examples are described here.

2 Likes

@Mariusthvdb could you post pictures for folded & unfolded?

sure, left full stack-in-card, right my (entities) card with bottom stack-in-card (and especially note the height of the fold title row, which seems better I the right version:

folded:

opened:

here’s the full code for the right card (which I have changed to use a picture card for the top banner, didnt have that one yet in the config :wink: and seems even more adequate than what I had before:

type: entities
entities:

  - type: custom:hui-element
    card_type: picture
    image: /local/images/buienradar_banner.png
    card_mod:
      style: |
        ha-card.type-picture {
          box-shadow: none;
          margin: -16px -16px 16px -16px;
        }
    tap_action:
      action: url
      url_path: https://www.buienradar.nl

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: -16px -16px -16px -16px;
        }
    entities:
      - entity: sensor.buienradar_feel_temperature
        name: Apparent
      - entity: sensor.buienradar_wind_force
        name: Wind force
      - entity: sensor.buienradar_condition
        name: Condition

  - type: custom:fold-entity-row
    head:
      type: section
      label: Temp & condition
    padding: 0
    entities:
      - entity: sensor.buienradar_temperature
        name: Temperature
      - entity: sensor.buienradar_ground_temperature
        name: Ground temperature
#      - entity: sensor.buienradar_condition_code
#        name: Code
      - entity: sensor.buienradar_detailed_condition
        name: Detailed condition
      - entity: sensor.buienradar_full_condition
        name: Condition
      - entity: sensor.buienradar_symbol
        name: Symbol
      - entity: sensor.buienradar_wind_direction
        name: Wind direction
      - entity: sensor.buienradar_wind_direction_azimuth
        name: Wind azimuth
      - entity: sensor.buienradar_wind_force
        name: Wind force
      - entity: sensor.buienradar_wind_gust
        name: Wind gust
      - entity: sensor.buienradar_wind_speed
        name: Wind speed

  - type: custom:fold-entity-row
    head:
      type: section
      label: Barometer
    padding: 0
    entities:
      - entity: sensor.buienradar_precipitation
        name: Precipitation
      - entity: sensor.buienradar_precipitation_forecast_average
        name: Precipitation forecast average
      - entity: sensor.buienradar_precipitation_forecast_total
        name: Precipitation forecast total
      - entity: sensor.buienradar_humidity
        name: Humidity
      - entity: sensor.buienradar_pressure
        name: Pressure
      - entity: sensor.buienradar_barometer
        name: Barometer
      - entity: sensor.buienradar_barometer_value
        name: Barometer value
      - entity: sensor.buienradar_stationname
        name: Station
      - entity: sensor.buienradar_visibility
        name: Visibilty

  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#items {
          margin: 8px -16px -16px -16px;
        }
# does nothing? left for reference 
#        :host {
#          margin-bottom: 16px;
#        }
    head:
      type: section
      label: Camera
    padding: 0
    entities:
      - type: custom:stack-in-card
        cards:
          - type: custom:hui-element
            card_type: picture-entity
# not sure if the 'none' does anything, hard to see, so I left it out for now
#            card_mod:
#              style: |
#                  ha-card {
#                    box-shadow: none;
#                  }
            entity: camera.buienradar

btw, we still cant do this can we:

        ha-card {
          background: camera.weerkaart_nl;
        }

?
update
just for reference here: yes we can, and check the link :wink:

Newbie to card-mod question…

I’ve installed from HACS, have added as a front-end module in configuration.yaml.

I notice all of the instructions say to use card-mod:

Yet these two cards both display identically, even though the second does not use the card-mod tag.

      - type: entities
        entities:
          - sensor.home_external_average_humidity
          - sensor.ensuite_absolutehumidity
          - sensor.ensuite_heatindex
        card_mod:
          style: |
            ha-card {
              color: red;
            }
      - type: entities
        entities:
          - sensor.home_external_average_humidity
          - sensor.ensuite_absolutehumidity
          - sensor.ensuite_heatindex
        style: |
          ha-card {
            color: red;
          }

Is this because it’s loaded as a module? And are there functional differences that mean it is necessary to always use the card-mod: line?

Hi,

Both still work indeed, however you should use the first example. The second one is legacy and will most likely stop working at some point.

2 Likes

Also, the 2nd example will not work with picture-elements for styling an element. So, again we should use the 1st type (card_mod β†’ style β†’ …)

1 Like

I have to first apologize if someone has already covered this as I must be failing on how to search and cannot seem to find an answer / example and my guessing is not working.

I have a button that I cannot seem to find a way to change the font size of the β€œstate” or would it be β€œoperation” or β€œsetting” or ??? text.

image

When pressed it pops open my thermostat in the Kitchens settings

image

I am trying to increase the font-size of the β€œHeat” text in this button and I thought it might be reffered to as the β€œstate”, however, in the control panel that pops open it is called β€œOperation”.

Here is what I have, less all my attempts to add a font-size change for the text that shows now as β€œHeat”.

                  - type: button
                    tap_action:
                      action: more-info
                    entity: climate.kitchen
                    show_name: false
                    show_state: true
                    show_icon: true
                    icon: mdi:fan
                    icon_height: 25px\
                    card_mod:
                    style: |
                      ha-card {
                        border-radius: var(--border-radius);
                        box-shadow: var(--box-shadow);
                      }

I’ll keep searching the 2400 plus posts while I hope someone knows the answers I seek…

Thanks…

Thank you both - noted and changed in code.

Can you help me?

Trying to change the standard card https://pastebin.com/5fUNmPWH

Summary

But out of all css blocks only this ha-card {} is applied. And in blocks:
ha-card .header .name {}
ha-card .info .value {}
ha-card .info .measurement {}
For some reason, nothing is applied at all.

Plus, there is an additional question regarding the icons in this card, in particular, I would like to apply a code like this to it:

      img_cell:
        - background-color: rgba(var(--color-theme),0.05)
        - border-radius: 50%
        - place-self: center
        - width: 42px
        - height: 42px

Thank you.

You got a mixed code - Entities card + card_mod for Entity card.

    ha-card {
      border-radius: 20px;
      #font-weight: bolder;

Do not use β€œ#” here since you are trying to comment a part inside a string.

This is for custom:button-card (ref this thread).

If you are talking about β€œmay I apply a similar code for an entity icon” - ok, just a minute.

may be achieved:

type: entities
show_header_toggle: false
entities:
  - entity: sun.sun
  - entity: sun.sun
style: |
  ha-card {
    --mdc-icon-size: 60px;
  }

As for this:

already applied for icons.
As for this:

you can change a background:

type: entities
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            background-color: aqua;
          }

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

1 Like