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

[sira87]

Yeah, I figured. I’ve solved it by splitting the original glance card in 2, and by adding 2 separate markdown cards below them with 0 padding-top.

Thank you anyways!

Here’s the updated YAML for this card:

type: custom:mod-card
card_mod:
style: |
  ha-card {
    background: var( --ha-card-background, var(--card-background-color, white) );
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
card:
  type: horizontal-stack
  cards:
    - type: custom:mod-card
      card:
        type: vertical-stack
        card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
          }
        cards:
          - type: glance
            show_name: false
            show_state: true
            card_mod:
            style: |
              div.entity {
                margin-bottom: 0px;
              }
              div.entities {
                padding: 8px 8px 8px 8px;
              }
              div.entities.no-header {
                padding-top: 8px;
                padding-bottom: 0;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            entities:
              - entity: person.carlo
                image: /local/carlo.png
                style: |
                  state-badge {
                    width: 75px;
                    height: 75px;
                    margin: 4px;
                    background-color: 
                      {% if states('person.carlo') == "not_home" %}
                        rgba(205, 92, 92, 0.4)
                        {% elif states('person.carlo') == "home" %}
                          rgba(47, 189, 79, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(255, 228, 181, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(240, 128, 128, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(0, 255, 255, 0.4)
                        {% elif states('person.carlo') == "redacted_position" %}
                          rgba(218, 165, 32, 0.4)
                        {% else %}
                          rgba(105, 105, 105, 0.4)
                      {% endif %};
                  }
          - type: custom:hui-markdown-card
            style: |
              ha-markdown {
                padding: 0 0 16px 0 !important;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            content: >-
              <center><font color={% if
              states('sensor.iphone_di_carlo_battery_state') == 'Charging' %}
              "chartreuse" {% else %} "white" {% endif %}><ha-icon icon={{
              "'mdi:cellphone-charging'" }}></ha-icon> {{
              states('sensor.iphone_di_carlo_battery_level') }}%</center>
    - type: custom:mod-card
      card:
        type: vertical-stack
        card_mod:
        style: |
          ha-card {
            background: none;
            box-shadow: none;
          }
        cards:
          - type: glance
            show_name: false
            show_state: true
            card_mod:
            style: |
              div.entity {
                margin-bottom: 0px;
              }
              div.entities {
                padding: 8px 8px 8px 8px;
              }
              div.entities.no-header {
                padding-top: 8px;
                padding-bottom: 0;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            entities:
              - entity: person.martina
                image: /local/marty.png
                style: |
                  state-badge {
                    width: 75px;
                    height: 75px;
                    margin: 4px;
                    background-color: 
                      {% if states('person.martina') == "not_home" %}
                        rgba(205, 92, 92, 0.4)
                        {% elif states('person.martina') == "home" %}
                          rgba(47, 189, 79, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(255, 228, 181, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(240, 128, 128, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(0, 255, 255, 0.4)
                        {% elif states('person.martina') == "redacted_position" %}
                          rgba(218, 165, 32, 0.4)
                        {% else %}
                          rgba(105, 105, 105, 0.4)
                      {% endif %};
                  }
          - type: custom:hui-markdown-card
            style: |
              ha-markdown {
                padding: 0 0 16px 0 !important;
              }
              ha-card {
                background: none;
                box-shadow: none;
              }
            content: >-
              <center><font color={% if
              states('sensor.iphone_di_martina_battery_state') == 'Charging' %}
              "chartreuse" {% else %} "white" {% endif %}><ha-icon icon={{
              "'mdi:cellphone-charging'" }}></ha-icon> {{
              states('sensor.iphone_di_martina_battery_level') }}%</center>

[Ildar_Gabdullin]

@sira87

I’ve solved it by splitting the original glance card in 2

Would be good to post your solution here.

[sira87]

You’re right, I’ve updated my post

[Kabala (Cata)]

Hi everyone,
since i made the new custom card update (3.1.1) i got the following error message.
Do you have a solution?
I reinstalled it exactly according to the instructions.
Thanks.

Logger: frontend.js.latest.202111090
Source: components/system_log/init.py:190
First occurred: 7. Dezember 2021, 19:51:50 (4 occurrences)
Last logged: 06:27:02

http://xxx.xxx.xxx.xxx:8123/lovelace/home:0:0 Uncaught

[Mariusthvdb (Marius)]

using

    entities:
      - input_select.origin
      - input_select.destination
#      - sensor.origin
#      - sensor.destination
      - sensor.here_origin
      - sensor.here_destination
      - entity: script.update_routeplanner_dynamic
        action_name: Update
      - type: custom:waze-card
        card_mod:
          style: |
            .header {
              background-color: var(--background-color-off);
              color: var(--text-color-off);
              padding: 8px 16px 8px 16px;
              margin: 0px -16px 0px -16px;
            }
            ha-card {
              box-shadow: none;
              margin: 0px -16px 0px -16px;
            }
        title: Itinerary
        entities:
          - entity: sensor.here_route_planner

gives me a quasi desired result in Safari:

but wont place the header correctly in Chrome:

somehow the custom:waze-card is a bit odd, because it also doesn’t show the exact correct color for the header:

ofc the margin to the first line of text is a bit too small also, but thats nitty-gritty…

any thoughts on how to fix the position in Chrome, (and the color in both?)
thanks for having a look!

[kimus (alessandro)]

    card_mod:
      style: |
        .body .padl {
          padding-bottom: 20px;
        }
        .body .padr {
          padding-top: 20px;
        }

yes, thank you

[Mariusthvdb (Marius)]

on the Waze card:
it was the css values in the card itself, which I had completely forgotten to look at… sorry bout that. Ive adapted that in the resource to:

    /*ha-card {
        padding: 0px;
    }*/

    .header {
        font-family: var(--paper-font-headline_-_font-family);
        -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
        font-size: var(--paper-font-headline_-_font-size);
        font-weight: var(--paper-font-headline_-_font-weight);
        letter-spacing: var(--paper-font-headline_-_letter-spacing);
        line-height: var(--paper-font-headline_-_line-height);
        text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        /*opacity: var(--dark-primary-opacity);*/
        padding: 8px 16px;
    }

    table {
        padding: 8px;
        font-size: 1.1em;
    }

    th {
        padding: 0px 15px 0px 0px;
        text-transform: capitalize;
    }

    .waze-card-pointer {
        cursor: pointer;
    }

    td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

so the lovelace card config only needs:

      - type: custom:waze-card
        card_mod:
          style: |
            .header {
              background-color: var(--background-color-off);
              color: var(--text-color-off);
            }
            ha-card {
              box-shadow: none;
              margin: 0px -16px 0px -16px;
            }
        title: Itinerary

and make it appear identical, correctly positioned, and in the correct color in both Chrome and Safari

[andrewjswan]

@Ildar_Gabdullin Is it possible to replace the main picture in the weather card with your own?

[Ildar_Gabdullin]

@andrewjswan

Is it possible to replace the main picture in the weather card with your own?

In theory - yes.
Make a picture invisible, add a new picture as a background.

[andrewjswan]

@Ildar_Gabdullin

Make a picture invisible, add a new picture as a background.

Sounds good, if I knew how

[haze.1986 (Hay Kay)]

Hi All, I have not been able to set a static color for one of my icon as below:
Would I be able to set only the mdi hanger icon to white color?

type: horizontal-stack
cards:
  - type: button
    tap_action:
      action: none
    show_icon: true
    icon: mdi:hanger
    show_name: false
    icon_height: 25px
    hold_action:
      action: none
  - type: vertical-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: script.hanger_move_up
        show_icon: true
        name: Hanger
        icon: hass:arrow-up-bold
        icon_height: 25px
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: script.hanger_move_down
        show_icon: true
        name: Hanger
        icon: hass:arrow-down-bold
        icon_height: 25px
        show_name: false
  - type: button
    tap_action:
      action: toggle
    show_icon: true
    icon: hass:lightbulb
    entity: script.hanger_light_mode
    show_name: false
    icon_height: 25px

[Ildar_Gabdullin]

2021.12.0
Cannot change color for state only:

  - entity: sun.sun
    name: Colored value
    style: |
      :host .text-content {
        color: orange;
      }  

Now the state element is directly inside the hui-generic-entity-row node:

If you change a color for the state, then the name’s color will be changed too:

  - entity: sun.sun
    name: Colored value
    style: |
      hui-generic-entity-row {
        color: orange;
      } 

P.S. The most difficult HA release for me, many things are broken.
Will have to re-check all my examples…

[duittenb (Dirk)]

Just wanted to share my green/yellow christmas trees, created with the info from this thread.
The main goal was to make the xmas tree green

• Horizontal Stack + card-mod style
  
  

type: horizontal-stack
cards:
  - type: button
    tap_action:
      action: toggle
    entity: switch.xmas_living
    name: Living
    icon: mdi:pine-tree
    style: |
      :host {
        --paper-item-icon-active-color: rgb(253, 216, 53);
        --paper-item-icon-color: green;
      }
  - type: button
    tap_action:
      action: toggle
    entity: switch.xmas_garden
    name: Garden
    icon: mdi:pine-tree
    style: |
      :host {
        --paper-item-icon-active-color: rgb(253, 216, 53);
        --paper-item-icon-color: green;
      }
  - type: button
    tap_action:
      action: toggle
    entity: switch.xmas_cabin
    name: Cabin
    icon: mdi:pine-tree
    card_mod:
      style: |
        :host {
          --paper-item-icon-active-color: rgb(253, 216, 53);
          --paper-item-icon-color: green;
        }

[Ildar_Gabdullin]

card-mod gives us a lot of opportunities.
People with a good taste and designing skills can create nice things.
I myself not an artist at all and has a little of imagination, just can help with ideas.
Do you now that you can also use GIF as a background?

type: button
tap_action:
  action: toggle
entity: switch.test_switch
name: ' '
icon: mdi:pine-tree
style: |
  ha-card {
    --paper-item-icon-active-color: rgba(125,170,104,0.5);
    --paper-item-icon-color: green;
    {% if is_state(config.entity,"on") %}
    background: url("https://fabulae.ru/redirect.php?url=https%3A%2F%2Fschool9.karelia.ru%2Fimages%2F2802.gif");
    {% endif %}
  }

[DrewXT (Andrew)]

That
Is
AWESOME!

[skynet01 (Alex)]

Hey guys, can anyone help me with card background styling? I am trying to remove the background but as soon as the card updates the background comes back. Any ideas?
I am using auto-entities and card-mod is loaded as a module in config.

Here is my card :

card:
  show_header_toggle: false
  type: entities
  style: |
    ha-card {
       background: none ;
       --ha-card-box-shadow: none;
       
     } 
filter:
  exclude:
    - state: /standby|off|idle|closed|False|clear|unavailable|paused|locked|away/
    - entity_id: light.*strip
    - entity_id: binary_sensor.monitor*
    - entity_id: switch.power*
    - entity_id: switch.server*
    - entity_id: switch.*alarm
  include:
    - entity_id: group.lights*
      options:
        type: custom:fold-entity-row
        group_config:
          toggle: true
          type: custom:slider-entity-row
    - domain: light
      options:
        secondary_info: brightness
        toggle: true
        type: custom:slider-entity-row
    - domain: lock
    - domain: fan
    - domain: switch
    - domain: cover

type: custom:auto-entities
sort:
  method: none

[Johanvh (Johan Van Hoorde)]

Dear all,

I use shutters and want to customize the icon based on the shutters position.
First off all, by default, there are no icons available to show different states for shutters. (Only shutter fully open, fully closed or shutter alert exists).
After searching I found this solution: GitHub - g-kiss/Home-Assistant-custom-shutter-icons
By default a shutter entity gives this cardt:

The icon on the left changes based on the state open/closed.
The entity ‘State’ can be open (State not 0) or closed (State = 0).
The position is just the ‘Secondary information’, taken from the attribute ‘current_position’ of the entity.
That said, I have 2 issues:
1/ I changed the code to

card_mod:
     style: |
       :host {
         --card-mod-icon:
               {% if states(config.entity) == 'open' %}  csi:shutter-0
               {% else %}  csi:shutter-4
               {% endif %};

The left icon changes to an open shutter but also the 3 ‘operation’ buttons on the right change to this icon.

This is not intend to happen, so how can I get the ‘normal’ operation icons back?

2/ How should I change the code in order not to rely on the state open/closed but on the attribute ‘current_position’?

Thanks for your time and help!

[arganto]

For the left icon you only have to set device_class shutter to your cover. You do not need card-mod.

Either via customizing menu (if you are still on 2021.11.x or via yaml, if you are already on 2021.12.x. Could be, that you can change device_class in your shutter in the entity config as well (in 2021.12.x), but didn’t check this. If not:

In your configuration.yaml

homeassistant:
  customize: !include customize.yaml

And then in an additional customize.yaml

cover.rolladen_wohnzimmer_vorne_links:
  device_class: shutter

But of course, you then have still only open/closed.

[Johanvh (Johan Van Hoorde)]

Thanks for your reply but that doesn’t really helps me. My initial question was clear: icons based on shutter position:
I believe somewhere it should be defined like:
Position 0 = icon shutter-0
Position 1 - 30 = shutter-1
Position 31 - 60 = shutter-2
Position 61 - 99 = shutter-3
Position 100 = shutter-4
I am on 2021.12.X
Hope someone can help, maybe @thomasloven

[arganto]

@Johanvh

2/ How should I change the code in order not to rely on the state open/closed but on the attribute ‘current_position’?

e.g. as starting point

if state_attr('cover.alle_rolladen', 'current_position')|int(default=0) < 100