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

This has become a challenge for me :rofl: Iā€™m gonna solve it

:)) I also feel like I have to achieve this, but Iā€™ve already spent dozens of hours, searched the Internet far and wide and havenā€™t found anything.

Thatā€™s why Iā€™m looking for help on the forum.

The built-in ā€œstate_mapā€ option maps colors from the state, itā€™s a pity that you canā€™t map from the attribute state, that would be the end of the matter.

But if the card creator can map it via card-mod, itā€™s certainly possible.

If a template sensor can record the color created and that is mapped, then you can reference that color. We are literally just one step removed from the data you want.

Iā€™m going to test that theory because template sensor history hit the logbook

This is a template sensor that records my fanā€™s speed and direction and itā€™s in the logbook

Getting closerā€¦ we can record the RGB state of the sensor possibly use that to color the log.

But in the templates sensor configuration there is no icon_color option.
If it was, that would be the end of the matter.
I donā€™t think history records the colors of the icons.
The colors are probably overwritten in the cards, but I donā€™t know

I find this in repository in logbook-base-card:

static get styles(): CSSResultGroup {
    return css`
      .card-content-scroll {
        max-height: 345px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-gutter: stable;
      }
      .item {
        clear: both;
        padding: 5px 0;
        display: flex;
        line-height: var(--paper-font-body1_-_line-height);
      }
      .item-content {
        flex: 1;
      }
      .item-icon {
        flex: 0 0 4rem;
        color: var(--paper-item-icon-color, #44739e);
        display: flex;
        justify-content: center;
      }
      .entity {
        color: var(--paper-item-icon-color);
        cursor: pointer;
      }
      state-badge {
        line-height: 1.5rem;
      }
      .state {
        white-space: pre-wrap;
      }

there is a .item-icon section here, but it doesnā€™t work in card-mod

I looked at that. Itā€™s using color: var(ā€“paper-item-icon-color, #44739e) witch is the active color. :frowning_face:

I made a separate color sensor, but how to use it in this logbook card?
No way

- sensor:
    - name: Notify last redmi all attr kolor ikony
      unique_id: Notify_last_redmi_all_attr_kolor_ikony
      state: >-
        {% set apps_attribute = state_attr('sensor.redmi_12_asia_last_notification', 'package') %}
        {% if apps_attribute == 'com.spotify.music' %} green
        {% elif apps_attribute == 'com.whatsapp' %}#3ddc59
        {% elif apps_attribute == 'com.facebook.orca' %}#c743d4
        {% elif apps_attribute == 'com.facebook.katana' %}#207af2
        {% elif apps_attribute == 'com.mi.globalbrowser' %}#3329f2
        {% elif apps_attribute == 'com.google.android.dialer' %} teal
        {% elif apps_attribute == 'com.android.deskclock' %} purple
        {% elif apps_attribute == 'com.instagram.android' %}#fd0186
        {% elif apps_attribute == 'com.google.android.youtube' %} red
        {% elif apps_attribute == 'com.zhiliaoapp.musically' %} white
        {% elif apps_attribute == 'com.google.android.apps.messaging' %} teal
        {% elif apps_attribute == 'pl.pkobp.iko' %}#094689
        {% else %}#1E90FF {% endif %} 

HA. You can do it with entity pictures and a sensor.

I have a sensor in my config that combines to attributes and that references a SVG. If the fan is going forward it uses one SVG and in reverse it uses another. The logbook is recording the entity pic.

the sensor yaml

sensor:
  - platform: template
    sensors:
     fan_direction:
       friendly_name: "Fan Direction"
       unique_id: fan1
       value_template: "{{ state_attr('fan.bedroom_fan', 'direction') }}"
       
     fan_direction_speed:
       friendly_name: "Fan Direction Speed"
       unique_id: fan2
       value_template: |
         {% set direction = state_attr('fan.bedroom_fan', 'direction')  %}
         {% set speed = state_attr('fan.bedroom_fan', 'percentage')  %}
         {{[direction,speed]|join("")}}
       entity_picture_template: >-
          {% set direction = state_attr('fan.bedroom_fan', 'direction')  %}
          {% set path = "/local/animated/" %}
          {% set speed = state_attr('fan.bedroom_fan', 'percentage')  %}
          {% set ext = ".svg"%}
          {{[path,direction,speed,ext]|join("")}}   

you could assign a pic to each app state and it will show in the log.

Which means we could use the actual app image for the log. Iā€™ll put an example together. Iā€™ve already done this for for a tv icon so it shows what app is in use.

image

The image on the TV would change to the app playing in one of my setups. That image would record in the logbook.

Iā€™ll try it and see if it works, but itā€™s still too complicated a solution.
I have to look for a solution how to map it via cardmod.
This is possible because the owner does it in this card by overwriting the color.
I just need to determine at what level of code (ha-card; state-badge; ha-state-icon; ha-svg etc.) it does it and how

Itā€™s actually fairly simple with one sensor and images for the app modes. I have most of it already built, just need to find all the code. Iā€™ll message you tomorrow.

Gosh this one drives me crazy: how can I colorize this icon?

Part of the card
            - type: conditional
              conditions:
                - entity: sensor.updater_hacs
                  state: 'True'
              card:
                type: entities
                entities:
                  - type: custom:auto-entities
                    card:
                      type: entities
                      title: HACS (nur installierbare Integrationen)
                      icon: mdi:home-assistant
                      state_color: false
                      show_header_toggle: false
                      card_mod:
                        style:
                          .: |
                            .card-header {
                              font-size: 14px;
                              font-weight: 450;
                              padding: 5px;
                              padding-top: 0px;
                              margin-left: 20px;
                              margin-bottom: 5px;
                              margin-left: -35px;
                            }
                            .card-header .ha-icon {
                              --paper-item-icon-color: cyan;
                              color: var(--red-color)
                            }
                            .card-header .ha-icon {
                              --paper-item-icon-color: cyan;
                              color: var(--red-color)
                            }
                            ha-state-icon {
                              color: grey !important;
                            }
                            ha-card {
                              margin-left: 30px;
                              #margin-right: 1px;
                              margin-top: 0px;
                              margin-bottom: -15px;
                              border-width: 0px;
                            }
                    entities: []
                    filter:
                      include:
                        - domain: update
                          integration: hacs
                          state: 'on'
                          not:
                            attributes:
                              release_summary: >-
                                <ha-alert alert-type='warning'>Requires Home
                                Assistant *
                      exclude: null
                    show_empty: false
                    unique: true
                    sort:
                      method: name
                      reverse: false
                  - type: weblink
                    name: Zum HACS
                    url: /hacs
                    icon: mdi:arrow-right
                    card_mod:
                      style: |
                        a {
                          margin-top: -5px;
                          padding-left: 45px;
                          text-decoration: none;
                          justify-self: left;
                          #padding-right: 30px;
                        }
                        a div {
                          margin-left: 0px !important;
                        }
                        :host {
                          display: grid;
                        }
                card_mod:
                  style:
                    .: |
                      ha-card {
                        #margin-left: 1px;
                        #margin-right: 1px;
                        margin-top: -5px;
                        margin-bottom: -25px;
                        border-width: 0px;
                      }

Non of those are working:

                            .card-header .ha-icon {
                              --paper-item-icon-color: cyan;
                              color: var(--red-color)
                            }
                            .card-header .ha-icon {
                              --paper-item-icon-color: cyan;
                              color: var(--red-color)
                            }
                            ha-state-icon {
                              color: grey !important;
                            }

Edit: solved with

...
                            ha-icon {
                              color: #44739e !important;
                            }
...

@kosmaluk This is what your logbook will look like with entity pictures for android device. I created a template sensor that refers to the app_name and references a locally stored svg. This is a bit off topic so feel free to message me if you want to pursue this method.

sensor:
  - platform: template
    sensors:
      shield_input_pic:
       friendly_name: "Shield Input Pic"
       unique_id: shield_input_pc
       value_template: |
         {{ state_attr('media_player.shield', 'app_name') }}
       entity_picture_template: >-
          {% set channel = state_attr('media_player.shield', 'app_name')  %}
          {% set path = "/local/pics/" %}
          {% set ext = ".svg"%}
          {{[path,channel,ext] |join("") |urlencode | replace("%20", "")}}  

Interesting solution. Iā€™ll definitely think about it.

However, for me the best way is to use the simpler and faster card-mod (css) function.
I have a dozen or so logbook cards and it would be difficult to create records for each of them. New entities with different icons are constantly added to my folders, so I need to have a quick way to modify them.

I wrote to the card owner and he seems to be working on solving this issue now. I saw that he had a feature request on this topic, so I guess Iā€™m not the first.

Anyway, thanks a lot for your help.

Hey, I am trying to figure this out, as I am developing a dashboard. I have a radiator, that has an attributes.hvac_action that gives the following values; heating, idle and cooling. The below code is not working, any pointers?

- type: "custom:button-card"
  entity: climate.loft
  icon: mdi:radiator
  styles:
    icon:
      - color: >
          {% set hvac_action = state_attr('climate.loft', 'attributes').hvac_action %}
          {% if hvac_action == 'heating' %}
            orange
          {% elif hvac_action == 'cooling' %}
            blue
          {% elif hvac_action == 'idle' %}
            green
          {% else %}
            rgb(68, 115, 158)
          {% endif %}
{% set hvac_action = state_attr('climate.loft', 'hvac_action')%}

You are mixing button-card and card-mod.

1 Like