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

[Mariusthvdb (Marius)]

@Mariusthvdb

 {
        {% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
          mdi:toggle-switch
        {% else %}  mdi:toggle-switch-off;
        {% endif %}
      }

thanks Ildar.
I see the toggle switch for a moment,

even toggle it,

but then it returns to the native tick/X after that.

Using/trying:

    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon {
      {% if is_state('switch.vijverpomp_links','on') %}
        animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
      {% endif %}
    }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon {
      {% if is_state('switch.vijverpomp_rechts','on') %}
        animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
      {% endif %}
    }
    .box div:nth-child(3) div:nth-child(3) {
      --card-mod-icon:
        {% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
          mdi:toggle-switch
        {% else %}  mdi:toggle-switch-off;
        {% endif %}
    }

[vinzcenzo (Vincent)]

Hi there,
Is it a way to centralize styles that are identical and used several times with a syntax like the one below, or something else:

(I tried, but it does not work) :

card_mod: 
  style: !include includes/styles/css-home-info-entities.yaml

“css-home-info-entities.yaml” content :

|
ha-card {
  margin-right: 5px;
  margin-bottom: 5px;
  border: solid 2px var(--secondary-color);
  border-radius: 25px;
} 

This would help me to maintain a specific style in a centralized file, and I will need to modify it only in one place when needed instead of changing a hundred style: tags on all my pages.

Maybe a dumb question… but I like to eliminate duplicate code; it is definitely easier to maintain

Thanks in advance for your hints.

[Ildar_Gabdullin]

I use secrets for globally used styles. For repeating styles within one yaml file - I use anchors.

[vinzcenzo (Vincent)]

Thanks for your answer.
A search with the right keywords taught me how to use YAML anchors. I will then be able to simplify many pieces of reused code in my YAML code with your hint (more than style tags).

[AleXSR700 (Alex)]

I am trying to change the font size of a value but I am not changing the div and span correctly. Could someone point me in the right direction please?

    style:
      .: |
        ha-card {
          --ha-card-background: rgba(0, 0, 0, 0);
          --ha-card-box-shadow: none;
          --primary-text-color: white;
          --secondary-text-color: white;
        }
      "#header div":
        "#states div":
          "#state div":
            "#value div":
              $: |
                #state {
                  font-size: 3em;
                }

[CDRX2]

This tool has helped me navigate my way around the CSS selectors quite a few times.

[AleXSR700 (Alex)]

That looks very helpful for the future indeed.

For the first usage, how do I read it correctly, because it cannot just be copy&pasted.

Result:

"body>home-assistant$hui-dialog-edit-card$ha-dialog>div.content>div.element-preview>hui-card-preview>config-template-card$#card>auto-entities>apexcharts-card$#state"`

What would that translate to in card-mod?

Sorry to bother you for a first example, but I did not find a convert example that I could copy & modify

[CDRX2]

Difficult to say without seeing the content of the developer tools. As far as I’ve understood, you’re trying to style an apexcharts card header, so that’s where I’d start.

Where to start in the expression you posted basically depends on where you plan to put the CSS in your code: is it at the CTC level, the auto-entities level or the apexcharts level.

[AleXSR700 (Alex)]

I posted the screenshots of devveloper tools yesterday in my post

[CDRX2]

I checked that, didn’t see anything related to CTC and auto-entities, that’s why I told you I’d start at the apexcharts level in the expression you got

[AleXSR700 (Alex)]

Sorry, yes, I left out the levels above it because I thought it always starts on rach card level.
I then wanted to try that but I am not sure how to treat div and span there correctly.

style: |
        ha-card {
          --ha-card-background: rgba(0, 0, 0, 0);
          --ha-card-box-shadow: none;
          --primary-text-color: white;
          --secondary-text-color: white;
        }
        apexcharts-card:
         "#state:
           $: |
              {
                 font-size: 3em;
               }

?
Because I need to be in the card. Then I don’t need to go to the div above the span? I can go directly to the span?

P.S.: And if I do need to go to a div above, would the two underscores be part of the name?
state__value

[deltabert (Bert)]

Hi @vinzcenzo I like this approach very much, and i found the description from Thomas Loven about node-anchors. But i did not get the hang of it.
Would it be possible for you to post an example of how to use anchors in able to use this in multiple cards?

[vinzcenzo (Vincent)]

Following the answer of @Ildar_Gabdullin , I’m using now as well two kinds of style’s references :

1. Global : stored in my secrets.yaml
2. Local : directly in a dashboard page with anchors

For my secrets.yaml file, I add name_of_my_css: , followed by its style. Then, I’m able to call the style everywhere with this simple syntax:

• style: !secret name_of_my_css

Here is an example of my secrets.yaml :

#-- *************************************************
#--  Inject custom CSS styles from Secret file
#-- *************************************************
gcss_graph_hacard: |
  ha-card {
    border: solid 2px rgb(64, 64, 64);
    background-color: rgb(32, 32, 32);
    border-radius: 25px;
  }

Here is an example of my dashboard page that use secret references:

title: Home Info
path: home-info
icon: "mdi:home-heart"
badges: []
cards:
  - type: entities
    title: Temp (24h)
    style: !secret gcss_graph_hacard
    [...]
  - type: vertical-stack
    cards:
      - type: "custom:mini-graph-card"
        name: Co2
        style: !secret gcss_graph_hacard
        [...]
  - type: vertical-stack
    cards:
      - type: "custom:mini-graph-card"
        name: Noise
        style: !secret gcss_graph_hacard
        [...]

And when I need to use repetitive styles only on a single local page, for the first occurrence of style, I use an anchor style: &css_local_ha-card | followed by its CSS code, then for the other instances with the same style, I only use the pointer style: *css_local_ha-card

Here is an example of the same dashboard page using anchor references

title: Home Info
path: home-info
icon: "mdi:home-heart"
badges: []
cards:
  - type: entities
    title: Temp (24h)
    style: &mcss_graph_hacard |
      ha-card {
        border: solid 2px rgb(64, 64, 64);
        background-color: rgb(32, 32, 32);
        border-radius: 25px;
      }
    [...]
  - type: vertical-stack
    cards:
      - type: "custom:mini-graph-card"
        name: Co2
        style: *mcss_graph_hacard 
        [...]
  - type: vertical-stack
    cards:
      - type: "custom:mini-graph-card"
        name: Noise
        style: *mcss_graph_hacard 
        [...]

It helps me to reduce redundant code inside my dashboard views.

[Ildar_Gabdullin]

That is exactly what I do.
Also, in some cases I define anchors above the code on the topmost level. Sometimes the first occurrence of the anchor may be deleted / commented - so defining anchors on the topmost level helps.

[ontaptom]

Hi folks,

I have hard time enabling card-mod for my ‘popup’ card, this is my YAML for button with popup:

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Sterujemy rolety
      content:
        type: custom:layout-card
        layout_type: custom:masonry-layout
        layout:
          width: 300
        cards:
          - type: custom:mushroom-cover-card
            entity: cover.salon_group
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
            name: Salon
          - type: custom:mushroom-cover-card
            entity: cover.pom_techniczne
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
            name: Kotłownia
          - type: custom:mushroom-cover-card
            entity: cover.pokoje
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
          - type: custom:mushroom-cover-card
            entity: cover.pok_aga
            name: Biuro Agi
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
icon: mdi:window-shutter-alert
name: All Covers

Now, I’m using theme that makes all the cards ‘transparent’ ha-card-background: rgba(10, 10, 10, 0.5). My goal is to make ‘popup’ either no transparent at all, or change the opacity to like 0.9.
But I wish to leave all the other cards with the current opacity…

But it seems card_mod for some reason do not take effect whenever I inject it. I’m trying with simple ‘font color change’ and i’m stuck. Is it because of the type: custom:mushroom-cover-card used ?

code I’m trying to add:

card_mod:
  style: |
    ha-card {
      color: red;
    }

and it seems it does not take effect either if I add it on type: custom:layout-card level, nor single - type: custom:mushroom-cover-card level.

Solution
Replying myself, but perhaps someone finds this question looking for the answer
So, the problem was that my pop-up didn’t have ha-card element, that’s why it was not working fine.
The correct, working code it:

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Sterujemy rolety
      content:
        type: custom:layout-card
        layout_type: custom:masonry-layout
        layout:
          width: 300
        cards:
          - type: custom:mushroom-cover-card
            entity: cover.salon_group
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
            name: Salon
          - type: custom:mushroom-cover-card
            entity: cover.pom_techniczne
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
            name: Kotłownia
          - type: custom:mushroom-cover-card
            entity: cover.pokoje
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
          - type: custom:mushroom-cover-card
            entity: cover.pok_aga
            name: Biuro Agi
            show_position_control: true
            show_buttons_control: true
            tap_action:
              action: more-info
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: horizontal
      card_mod:
        style: |
          :host {
          --ha-card-background: rgba(10, 10, 10, 1.0);
          }
icon: mdi:window-shutter-alert
icon_height: 80px
name: Wszystkie Rolety

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

I use secrets for globally used styles

thats inventive wondering though if that allows for ‘live’ updating after a change, or do you need to restart the HA instance.
(only asking because when using some yaml backend code in secrets, it often requires that restart)

[Ildar_Gabdullin]

@Mariusthvdb

do you need to restart the HA instance

No for Frontend.
Just make your yaml files for dashboard “changed” (open - edit - undo - save) to force HA to redraw UI (like always when editing yaml files for views).

[Mariusthvdb (Marius)]

never have to do anything special for views, I simply click the refresh top right corner

nice trick indeed, will save me even more lines, in addition to the use of yaml anchors per include.Coming to think of it, it might be even better than rely on the card-mod classes. hmm have to test that.

[Ildar_Gabdullin]

@Mariusthvdb

I simply click the refresh top right corner

Probably depends on how you keep your views’ code.
My method is “1 view = 1 yaml” (sometimes with included yamls for cards), “1 dashboard = 1 yaml with included yamls for views”.
So, editing a view’s file, a file for decluttering/button-card template does not cause rebuilding a UI - need to mark a dashboard file as changed.

[Mariusthvdb (Marius)]

yes, I have that same organization:

a dashboard:

button_card_templates: !include_dir_merge_named ../button_card_templates
decluttering_templates: !include_dir_named ../decluttering_templates
kiosk_mode: !include ../kiosk-mode/kiosk-mode.yaml

views:
  - !include ui-data/view_data_Energy.yaml              #0
  - !include ui-data/view_data_Solar.yaml               #1
  - !include ui-data/view_data_Climate.yaml             #2
  - !include ui-data/view_data_Water.yaml               #3
  - !include ui-data/view_data_Presence.yaml            #4
  - !include ui-data/view_data_Computer_netwerk.yaml    #5
  - !include ui-data/view_data_Light.yaml               #6
  - !include ui-data/view_data_Summary_groups.yaml      #7
  - !include ui-data/view_data_Floorplan.yaml           #8
  - !include ui-data/view_data_Time.yaml                #9

and a view:

title: Computer & Network
path: computer_network
icon: cil:desktop-mac

type: custom:horizontal-layout
layout:
  max_cols: 2

cards:

  - !include /config/dashboard/includes/include_path_switch.yaml

  - !include /config/dashboard/buttons/buttons_shortcut_menu.yaml

  - !include /config/dashboard/includes/include_netwerk_devices.yaml

  - !include /config/dashboard/includes/include_computers.yaml

#  - !include /config/dashboard/includes/include_bluetooth_devices.yaml

  - !include /config/dashboard/includes/include_synology_dsm.yaml

  - !include /config/dashboard/includes/include_synology_dashboard.yaml

  - !include /config/dashboard/includes/include_servers_hubs.yaml

  - !include /config/dashboard/includes/include_printer_dashboard.yaml

  - !include /config/dashboard/includes/include_audio_video_devices.yaml

they are nicely refreshed no matter what is changed.