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

Ildar_Gabdullin · December 22, 2021, 6:27pm

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:

Mariusthvdb · December 22, 2021, 7:48pm

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!

Ildar_Gabdullin · December 22, 2021, 8:10pm

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

More examples are described here.

Ildar_Gabdullin · December 22, 2021, 8:17pm

@Mariusthvdb could you post pictures for folded & unfolded?

Mariusthvdb · December 22, 2021, 10:03pm

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 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

Mariusthvdb · December 22, 2021, 10:47pm

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

Swallowtail · December 23, 2021, 12:42pm

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?

CDRX2 · December 23, 2021, 4:33pm

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.

Ildar_Gabdullin · December 23, 2021, 7:12pm

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 → …)

Awebian · December 23, 2021, 8:40pm

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.

When pressed it pops open my thermostat in the Kitchens settings

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…

Swallowtail · December 24, 2021, 12:55am

Thank you both - noted and changed in code.

Shestak · December 24, 2021, 8:29am

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.

Ildar_Gabdullin · December 24, 2021, 9:13am

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;
          }

Shestak · December 24, 2021, 10:10am

Thank you for help. Here’s what I got.

Без имени

Ildar_Gabdullin · December 24, 2021, 1:05pm

Similarly to this:

but with less efforts and only for static headers:

    type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: sun.sun
        style: |
          :host .entity {
            display: flex;
            flex-direction: column-reverse;
          }
        entities:
          - entity: sun.sun
          - entity: sun.sun
          - entity: input_boolean.test_boolean
            toggle: true
        name: Bottom headers
        show_state: false

Ildar_Gabdullin · December 24, 2021, 1:32pm

If anyone needs this:

type: entities
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
    name: normal
  - entity: input_boolean.test_boolean
    name: toggle on the left
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            display: none;
          }
        .: |
          hui-generic-entity-row {
            flex-direction: row-reverse !important;
          }

Shestak · December 24, 2021, 2:35pm

What about shortcuts in mini-media-player?
Like this:

shortcuts:
  attribute: sound_mode
  buttons:
    - icon: mdi:monitor-cellphone-star
      id: Любимая музыка
      type: command

Color for play-control buttons - ok, i find it.

Summary

I realy use search, but don’t find solution. Thanks again *смайл_пожатия_рук

Ildar_Gabdullin · December 24, 2021, 2:48pm

Never used shortcuts, cannot give a ready solution.
Try to adapt ready styles for these buttons.

Ildar_Gabdullin · December 24, 2021, 3:17pm

Using card-mod to move a graph for the 2nd sensor to the bottom:
post

Shestak · December 24, 2021, 4:14pm

Hmm, it turned out to be very simple, but it is possible that other elements will be painted as well.

type: custom:mini-media-player
entity: media_player.yandex_station_lb00000000000000304600006f6ab3ee
shortcuts:
  attribute: sound_mode
  buttons:
    - icon: mdi:monitor-cellphone-star
      id: Любимая музыка
      type: command
      ......
  columns: 6
card_mod:
  style: |
    ha-card {
      color: var(--state-icon-color) !important;
    }

color: var(–state-icon-color) !important;

Без имени