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

This is not a solution. This is just another approach.

Okay :slight_smile: Well it´s working (basically) for me. Even the need for using the custom:mod-card is not nice but I can completely live with that.

Would you propose another approach for the same result?

Here it is, use any alignment:

type: vertical-stack
cards:
  - type: entities
    title: Some title (+card-mod)
    card_mod:
      style: |
        ha-card .card-header {
          border: 3px dotted magenta;
          padding: 0px;
          display: unset;
        }
        ha-card .card-header .name {
          color: red;
          text-align: right;
          font-weight: 1000;
          letter-spacing: 3px;
        }
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
  - type: entities
    title: Some title
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun

image

Well I´m using a grid and the title is part of the grid, not a card inside the grid. So this approach (which was my first try before asking here) isn´t working for me unfortunately. But that´s okay. Once a last question (how to combine styles for several parts in one card_mod section) is clarified I´m totally happy.

Thanks for your effort!

When I asked you about your intentions, you only told about the Entities card’s title.
Now you are talking about grid card’s title.
Did you try searching here in the thread? Grid cards were discussed here - exactly about styling headers.
image

type: custom:mod-card
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          color: red !important;
          background-color: green;
          --ha-card-header-font-size: 30px;
          font-weight: bold !important;
          padding: 0px 0px 0px !important;
          letter-spacing: 0.112em !important;
          text-align: right;
        }
card:
  type: custom:auto-entities
  card:
    type: grid
    columns: 4
    square: true
    title: Kantoor
  card_param: cards
  filter:
    include:
      - entity_id: sensor.ha_count_*
        options:
          type: entity
          entity: this.entity_id
  sort:
    method: entity_id
    ignore_case: true
1 Like

Well I was only talking bout a cards title, quite unspecific to be honest :slight_smile:
I learned that for applying something to a grid card we need the custom:mod-card. So basically the solution exists, BUT I can´t apply the “center grid card title” CSS to an existing style affecting the whole ha-card. I just don´t know what the syntax is.

In details:

The same example as above:

type: entities
title: Some title (+card-mod)
card_mod:
  style: |
    ha-card {
      border: 3px solid cyan;
    }
    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }
    ha-card .card-header .name {
      color: red;
      text-align: right;
      font-weight: 1000;
      letter-spacing: 3px;
    }
entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun

image

1 Like

Here´s my real life example:

type: custom:mod-card
card:
  type: grid
  columns: 3
  square: true
  title: Services
  cards:
    - type: button
      tap_action:
        action: navigate
        navigation_path: wetter
      name: Wetter
      icon: mdi:white-balance-sunny
      hold_action:
        action: none
      show_name: true
      show_state: false
      show_icon: true
    - type: button
      tap_action:
        action: navigate
        navigation_path: orte
      name: Orte
      hold_action:
        action: none
      show_name: true
      show_state: false
      show_icon: true
      icon: mdi:map-marker
    - type: button
      tap_action:
        action: navigate
        navigation_path: gesundheit
      name: Gesundheit
      icon: mdi:hospital-box
      hold_action:
        action: none
      show_name: true
      show_state: false
      show_icon: true
card_mod:
  style: |
    ha-card {
      border: 1px solid grey;
      padding: 5px;
      background: none;
    }
    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }
    hui-grid-card:
      $: |
        .card-header {
          width: max-content;
          margin: 0 auto;
        }

Neither your appended

    ha-card .card-header {
      border: 3px dotted magenta;
      padding: 0px;
      display: unset;
    }

nor the

    hui-grid-card:
      $: |
        .card-header {
          width: max-content;
          margin: 0 auto;
        }

are working. Only the first section

    ha-card {
      border: 1px solid grey;
      padding: 5px;
      background: none;
    }

is applied:

So where is the bug?!? Drives me crazy meanwhile :smiley:

There is no need just to copy-paste card-mod styles which are not related to this particular card.
You mixed styles from different cards.
The working styles:

type: custom:mod-card
card:
  type: grid
  columns: 3
  square: true
  title: Services
  cards:
    - type: button
      name: Wetter
      icon: mdi:white-balance-sunny
      show_name: true
      show_state: false
      show_icon: true
    - type: button
      name: Orte
      show_name: true
      show_state: false
      show_icon: true
      icon: mdi:map-marker
    - type: button
      name: Gesundheit
      icon: mdi:hospital-box
      show_name: true
      show_state: false
      show_icon: true
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          color: red !important;
          text-align: center;
        }
    .: |
      ha-card {
        border: 3px solid magenta;
        padding: 25px;
        background-color: orange;
      }

image

1 Like

Hey lldar… Any chance you see my error here?
image
I want just the last row, connectivity to show an icon colour but when I apply card mod it changes either all of them or none of them depending on where I place the code. When I place it as per here:

            entities: 
              - type: custom:auto-entities
                card:
                  type: custom:fold-entity-row
                  padding: 0
                  head:
                    type: section
                    label: Fritz!Box Switches and Sensors
                  open: false
                filter:
                  include:
                    - entity_id: "sensor.fritz_*"
                    - entity_id: "switch.fritz_*"
                    - entity_id: "binary_sensor.fritz_*"
#                     card_mod:
#                       style: |
#                         :host {
#                         --paper-item-icon-color:
#                           {% if states('binary_sensor.fritz_box_7590_connectivity') == 'on' %}
#                             var(--state-icon-active-color)
#                           {% else %}
#                             var(--state-icon-color)
#                           {% endif %}
#                           ;
#                         }
                show_empty: true
                sort:
                  method: name

(Uncommented of course) it doesn’t display the connectivity row at all. can you see what I am doing wrong or is it not possible to style just that one row?

Silly thing is if I click that row it looks like this:
image
So something in my theme must be overiding it but I don’t even see what variable is being used if I try to examine it in dev-tools in chrome.

Hi David, check this (replace red & cyan with your colors):

type: entities
entities:
  - type: custom:auto-entities
    card:
      type: custom:fold-entity-row
      padding: 0
      head:
        type: section
        label: Fritz!Box Switches and Sensors
      open: false
    filter:
      include:
        - entity_id: sensor.cleargrass_1_*
        - entity_id: switch.test_*
        - entity_id: binary_sensor.test_*
          options:
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color:
                  {% if is_state(config.entity,'on') %}
                  red
                  {% else %}
                  cyan
                  {% endif %}
                  ;
                }
    show_empty: true
    sort:
      method: name

P.S. Since your "binary_sensor" is some ONE particular sensor, then you may specify it explicitly:

....
      include:
        - entity_id: sensor.cleargrass_1_*
        - entity_id: switch.test_*
        - entity_id: binary_sensor.iiyama_1_ping_availability_status
....

Also, if you need to have this connectivity sensor to be the last in the list, then move the "sort" section to lower levels:

        - entity_id: sensor.cleargrass_1_*
          sort: &ref_sort
            method: name
        - entity_id: switch.test_*
          sort: *ref_sort
        - entity_id: binary_sensor.iiyama_1_ping_availability_status

image

Or even you may not use card-mod at all:

      include:
        - entity_id: sensor.cleargrass_1_*
          sort: &ref_0
            method: name
        - entity_id: switch.test_*
          sort: *ref_0
        - entity_id: binary_sensor.iiyama_1_ping_availability_status
          options:
            state_color: true

image

1 Like

Nice.

What about this one?

                - entity: binary_sensor.workday_sensor
                  card_mod:
                    style: |
                      :host {
                      --paper-item-icon-color:
                        {% if states('binary_sensor.workday_sensor') == 'on' %}
                          rgb(255, 223, 0)
                        {% else %}
                          var(--state-icon-color)
                        {% endif %}
                        ;
                      }

This works (it’s a config-template one for a different row) but if I use
is_state(config.entity, ‘on’) it doesn’t style it?

If I use state_color it didn’t used to work so far as I remember…

I wonder if it’s the function or the use of config.entity that’s not being resolved. Did you try using is_state and the hardcoded entity to see which is the issue?

I didn’t try that but you might be right…
Just tried it again and it is now working… I must have stuffed something up!

1 Like

Thank you very very VERY much! Just perfect.
I need to learn DOM and the syntax, I probably would´ve never come across the formerly missing .: | line :smiley:

Tell me, can I remove the icon in this map in some way so that there is no empty space left from the icon?
image


I tried this, but it didn’t work.

                - type: custom:mod-card
                  card:
                    type: custom:mini-climate
                    entity: climate.guestroom_ac
                    secondary_info: fan-mode-dropdown
                    name: Гостиная #Кондиционер в гостиной
                    icon: blank
                    toggle:
                      hide: true
                    fan_mode:
                      source:
                        auto: Авто
                        low: Низкая
                        mid: Средняя
                        high: Высокая
                  style: |
                      :ha-icon {
                        width: 0;
                      }

Try "display: none" for the icon.
Of course, you should specify a proper path instead of that ":ha-icon".

Code

                  style: |
                      :ha-icon {
                        display: none;
                      }

did not give the expected result.
I tried different options, I changed the levels, but it still didn’t work.
Perhaps I don’t know simple things and I don’t understand a lot, because I don’t know css style.
May be this screenshot give more info for help me:

I solve this situation with custom “button card”. Then you can type "show_icon: false. It’s pretty usefull add-on in any case, you can do a ton of things with it…

I have a general question.

If I want to ingest something here

                  card_mod:
                    style:
                      hui-generic-entity-row:
                        $:
                          state-badge:
                            $:
                              ha-icon:
                                $: |

but e.g here as well

                  card_mod:
                    style:
                      hui-generic-entity-row:
                        $:
                          state-badge:
                            $: |

This is not working, because of duplicate keys.

I can use the work arround

hui-generic-entity-row$:

but then it only applies by design only on the first entry.

So how to note this, if I have different point/s/level/shadow-roots in the same tree, to add some styles?