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

try this (not tested):

    card_mod:
      style:
        .entities .entity:
          $: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }
        .: |
          ha-card {
            box-shadow: none;
            margin: 0x -16px 0px -16px;
          }

That post contained examples for wrapped names only, I just added examples for values - specially for @Mariusthvdb )))

!!!

better:

though now the last child is shifted upwards …

image

  - type: glance
    title: Wrapped value (1st entity) + aligned
    entities:
      - entity: input_text.test_text
        name: Wrapped
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }
      - entity: input_text.test_text
        name: Not wrapped
    card_mod:
      style: |
        .entities {
          align-items: start !important;
        }

right!
so this does it all:

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities {
          align-items: start !important;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - entity: sensor.prediction
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }

is it on purpose we dont use ‘card-mod’ on the entity, or an oversight and I should add it:

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities {
          align-items: start !important;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - entity: sensor.prediction
        card_mod:
          style: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }

btw, the !important can be deleted, works without it just as fine.

  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities {
          align-items: start;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - entity: sensor.prediction
        card_mod:
          style: |
            div:not(.name) {
              text-overflow: unset;
              white-space: unset;
            }

in the card now, thanks Ildar!

If you are talking about adding a card_mod keyword - that was an old code from card-mod 2.0, I just edited it and forgot to add this keyword… It works w/o it but surely we should add it always.

1 Like

since 🔹 Card-mod - Add css styles to any lovelace card - #1522 by Ildar_Gabdullin didnt yet have a mod for the background (which I needed) please have a look at my attempts…

trying to get rid of the default background color which does not match any of my themes at all, and creates a huge dark blob in the interface :

I managed to do something like:

and have it mimics the settings for the headers I use in my frontend:

not sure this is the best code for it, but it seems to work fine for now:

  - type: media-control
    entity: media_player.tv_auditorium
    card_mod: &media
      style: |
        .player {
          background-color: var(--background-color-off);
        }
        .title-controls {
          background-color: var(--background-color-on);
          margin: 16px -16px 0px -16px;
          padding: 0px 8px;
        }
        .title-controls {
          color: var(--icon-color-on);
        }

if this could be optimized, please give me a hint? thx

note the Schermafbeelding 2021-12-22 om 11.54.07 has disappeared completely, not sure where…

Try with semi-transparent background

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: