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

You should probably enable panel mode instead of using card-mod.

Panel mode is enabled:

  - icon: 'mdi:currency-eur'
    panel: true
    badges: []
    cards:
      - type: 'custom:config-template-card'
        entities:
          - sensor.metabaseuri
        card:
          type: iframe
          style: |
            #root {
              height: calc(100vh - 48.5px);
              padding-top: 0 !important;
            }
          url: '${states[''sensor.metabaseuri''].state}'

Hello,

I have this simple card:

image

Itā€™s possible:

  1. change the color of the state?
  2. blink the state?

thks

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

Thanks KTibow,

This way, it does what I want :slight_smile:

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


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?

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

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

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

Probably because it already has the ā€œstyleā€ key.

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

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

Iā€™m using the Card-mod code below to select which elements are ā€œblurredā€ using the addon popup-backdrop-filter.
Example:
2

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

Thanks in advance for your time.

Mind asking over here instead?

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

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

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

2 Likes

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

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

I figured it out, finally!

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

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.

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