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

What do you want exactly?
Could you provide a picture describing your intentions?

I want to center a cardĀ“s title. Nothing more, nothing less :man_shrugging:

See šŸ”¹ Card-mod - Add css styles to any lovelace card - #1951 by e-raser

To be more visual:

Currently:

Desired (mock-up):

Mission impossible according to what IĀ“ve gone through so far.

+++ UPDATE +++
Solution provided by @MaestroMetty at šŸ”¹ Card-mod - Super-charge your themes! - #864 by MaestroMetty.

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
2 Likes

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

2 Likes

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: