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

[KTibow (Kendell R)]

Blinking is a more advanced part. Try taking the w3schools CSS course (look for keyframes), and combine it with this. I would rather teach you how to use card-mod than tell you how to use card-mod. Here’s a simple implementation of changing the color:

type: entities
entities:
  - entity: sensor.time
    style: |
      .text-content {
        color: red;
      }

[bbaixo (Flávio)]

Thanks KTibow,

This way, it does what I want

type: entities
entities:
  - entity: sensor.esc_janela
    style: |
      .text-content {
        color: var(--my-font01-color);
        animation: var(--my-animation);
      }
      @keyframes blink {
        50% {
            background: white;
            opacity: 0.0;
        }
style: |
  ha-card { 
    --my-font01-color: {% if states('sensor.esc_janela') == 'Aberta' %} red {% else %} black {% endif %};
    --my-animation: {% if states('sensor.esc_janela') == 'Aberta' %} blink 2s ease infinite  {% endif %};
  }

[Ildar_Gabdullin]

The latest update of “config-template-card” allows to use the card as a single row in “Entities card”.
But I cannot apply styles to the row.

Please check this card:

type: entities
entities:
  - type: 'custom:config-template-card'
    entities:
      - sun.sun
    row:
      entity: sun.sun
      style: |
        :host .text-content {
          color: red;
        }
  - entity: sun.sun
    style: |
      :host .text-content {
        color: red;
      }

The card:

In both cases I am expecting values of red color.
But it does not work with config-template-card.
Any ideas?

Update:
May be the 2nd problem is about the same.
There is a decluttering card:

decluttering_templates:
  decl_test_entity_row:
    card:
      type: 'custom:multiple-entity-row'
      entity: '[[SENSOR]]'
      style: |
        :host {
          color: red;
        }

It is used here:

type: entities
entities:
  - type: 'custom:multiple-entity-row'
    entity: sun.sun
    style: |
      :host {
        color: red;
      }
  - type: 'custom:decluttering-card'
    template: decl_test_entity_row
    variables:
      - SENSOR: sun.sun

And what we see:

I wonder why the 2nd row is not red?

[myhrmans (Martin Myhrman)]

Hey. Im trying to modify a div inside a shadow-root but it’s not grabbing what Im saying. I might be doing it wrong.

Here is my style:

 style:
      top: 5%
      left: 10%
      width: 20%
      min-width: 350px
      height: 90%
      transform: 'translate(0, 0)'
      .: |
        ha-card{
            height: 100%
          }
        ha-card > div {
          height: 100%
        }
        ha-card > div > hui-vertical-stack-card:
            $:
              div{
                height:100%; 
              }

and here is a print of the element Im trying to modify. I also need to change the divs that are above but they work as intended

[KTibow (Kendell R)]

That isn’t valid CSS. You’re mixing YAML and CSS. Is there a place that you got this code from?

[tom_l]

It’s a picture elements card - for which card-mod does not work, apparently.

State based styling in picture-elements

@thomasloven thank you your solution got me on the right track. There was only one weird thing that I don’t understand. This doesn’t work: - type: horizontal-stack cards: - type: picture-elements style: | ha-card { --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}" } ...etc But this does: - type: horizontal-stack style: | ha-card { --state-color: "{%if is_state('person.…

Probably because it already has the “style” key.

[maxym]

I’m pretty familliar with css as well as controling them with JS. Existing of style property shoildn’t be any obstacle.

Is there a document over here which explain how card-mod work and why it is so complex task to style HA pages? Why there are cards which cannot be styled by card-mod while those are obviously stylable (as anyone can confirm using browser devtool).

[KTibow (Kendell R)]

Because of shadow roots and HA limitations. Try yourself to use the browser console to style a card.

[mkanet]

I’m using the Card-mod code below to select which elements are “blurred” using the addon popup-backdrop-filter.
Example:

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(13px);
        -webkit-backdrop-filter: blur(13px);
        background: rgba(0,0,0,0.0);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        border-radius: 1em;
      }

It does a great job with popups. However, I can’t figure out how to also blur the background when the card editor is open (see below screenshot). Could someone please assist me to also blur the card editor’s background? I haven’t been successful in finding the right element(s) to add to the code above.

This is what the card editor looks like currently:

Thanks in advance for your time.

[KTibow (Kendell R)]

Mind asking over here instead?

Card-mod - Super-charge your themes!

A while ago, I created card-mod, a custom card* that lets you change various css options for other lovelace cards. Much more skilled people than I have used that to create beautiful and awesome things. Today, I’ve added theme support to card-mod. Your ordinary theme file can now be used to Give cards a flashing border Make that border only flash when a certain entity is in a certain state Make fan icons spin when they are on Change the border color of the badges at the top of the screen dep…

This might be not possible yet, so I would encourage you to raise an issue over at card-mod, and possibly mention thomasloven (from what I can see they’ve unwatched the repo).

[mkanet]

Thanks for pointing me in the right direction to get help.

[dbrunt (Daniel)]

Is there a way to use card-mod in the following to reduce the font size for the name in last 4 buttons?

type: 'custom:vertical-stack-in-card'
cards:
  - type: thermostat
    entity: climate.living_room
    style: |
      ha-card {
        color: white;
        box-shadow: none;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          #EB6D00
        {% endif %} ;
        background: 
        {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
          blue 
        {% endif %} ;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
          #373F48
        {% endif %} ;
      }
    theme: iOS Dark Mode
  - type: entities
    entities:
      - entity: sensor.living_room_humidity
        name: Inside Humidity
        icon: 'hass:none'
      - entity: sensor.openweathermap_temperature
        name: Outside Temp.
        icon: 'hass:none'
    style: |
      ha-card {
        color: white;
        box-shadow: none;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          #EB6D00
        {% endif %} ;
        background: 
        {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
          blue 
        {% endif %} ;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
          #373F48
        {% endif %} ;
      }
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: input_select.hvac_mode
        name: MODE
        show_name: true
        tap_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.hvac_mode
        color_type: icon
        state:
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'off' ]]]
            icon: 'mdi:power'
            color: white
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'heat' ]]]
            icon: 'mdi:fire'
            color: 'rgb(239, 140, 0)'
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'cool' ]]]
            color: blue
            icon: 'mdi:snowflake'
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
        show_state: false
      - type: 'custom:button-card'
        entity: input_select.preset_mode
        name: ECO
        label: ECO
        tap_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.preset_mode
        color_type: icon
        color: white
        icon: 'mdi:leaf-off'
        state:
          - operator: template
            value: >
              [[[ return states['climate.living_room'].attributes.preset_mode ==
              'eco' ]]]
            icon: 'mdi:leaf'
            color: green
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
      - type: 'custom:button-card'
        entity: climate.living_room
        name: SCHEDULE
        action: url
        navigation_path: 'https://home.nest.com'
        color_type: card
        icon: 'mdi:calendar-clock'
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
      - type: 'custom:button-card'
        entity: climate.living_room
        name: HISTORY
        action: url
        navigation_path: 'https://home.nest.com'
        color_type: card
        icon: 'mdi:progress-clock'
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white

[KTibow (Kendell R)]

You should ask over at button-card, they have built-in styling. Or just read the docs of it over at GitHub.

[dbrunt (Daniel)]

Thanks. First time trying to use card-mod. I’ve read the docs and I guess I’m missing something. Does card-mod (or mod-card) need to be specified as a card type above the card(s) you want to inject styling into? I tried adding styling but nothing happened so I presume that’s what needs to be done now that I think more about it. I’ll have another go at it…

I did not know there was a Github Community Support forum. Now I do! Posted a new topic…

[dbrunt (Daniel)]

I figured it out, finally!

      - type: 'custom:button-card'
        style: |
          ha-card { 
            font-size: 0.8rem
            }

[dbrunt (Daniel)]

Well, I thought I had.
The ha-card entry is being overridden by a constructed stylesheet called ha-card.button-card-main { .

UPDATE: added !important to the font entry and that fixed it.

[cpuram]

Grid Card - is there any way to reduce the space between cards in new grid card?

[ASNNetworks]

Bumping my own question since it hasn’t been fixed/reverted with HA117 updates or HA 118 and I haven’t found a workaround yet. I can confirm that the !important does not work ideally here. Each time you refresh the tab, first the stylesheet is applied and then the css cardmod, which causesthe markdown styling to jump which makes using the interface a bad experience.

I’m not skilled with CSS, but perhaps there is a way to change (or delete) the stylesheet itself.

Github ticket: https://github.com/home-assistant/frontend/issues/7578#issuecomment-720539351

[skank]

Can i change the color of my title only with this?

I tried

style: |
          ha-card {
            --primary-text-color: #e79118
          }

But that changed all my text
title-color doesnt work

[KTibow (Kendell R)]

There’s a regular theme variable for that, something like grid-card-gap, no need for card-mod, use it as a regular theme variable.