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

janiv · October 27, 2022, 10:29pm

How do I make the spaces (padding) in the title much smaller? The title takes too much real estate.

Thanks

BradAU · October 28, 2022, 4:38am

So far this change has added a 1px border around every element in my dashboards, so now I have added border: none; to all my mods.
Hopefully another PR will fix this during beta for 2022.11

Mariusthvdb · October 28, 2022, 9:54am

you can simply add ha-card-border-width: 0px to your theme, and it will be applied to all cards

Mariusthvdb · October 28, 2022, 10:01am

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 · October 28, 2022, 8:58pm

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 · October 28, 2022, 9:04pm

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

vinzcenzo · October 29, 2022, 4:32am

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 · October 30, 2022, 3:14pm

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 · October 30, 2022, 8:21pm

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

AleXSR700 · October 30, 2022, 9:16pm

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 · October 31, 2022, 6:46am

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 · October 31, 2022, 6:51am

I posted the screenshots of devveloper tools yesterday in my post

CDRX2 · October 31, 2022, 7:21am

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 · October 31, 2022, 7:43am

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 · October 31, 2022, 9:11am

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 · October 31, 2022, 1:05pm

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

Global : stored in my secrets.yaml
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 · October 31, 2022, 5:18pm

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 · November 1, 2022, 10:32am

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 · November 2, 2022, 11:23am

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 · November 2, 2022, 11:43am

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).