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

[Mariusthvdb (Marius)]

@elchininet

I would start with an opacity for the border of 1 and end with a 0 opacity, it should give you a more smooth animation.

o nice idea, however, not that easy to implement…

                :host([entity-id='{{entity}}']) .marker {
                  outline: solid {{ns.px}}px var(--warning-color);
                  animation: resizing_outline calc( {{t}}s ) linear infinite;
                  border: var(--warning-color) {{ns.px}}px dashed;
                }

            @keyframes resizing_outline {
              0% {outline-offset: 0;opacity:0;}
              25% {outline-offset: 5px;opacity:0.2;}
              50% {outline-offset: 10px;opacity:0.4;}
              75% {outline-offset: 15px;opacity:0.6;}
              100% {outline-offset: 20px;opacity:1;}
            }

sets opacity on the full marker (including the entity_picture) and not only the border ofc.
Dont think there is an element to target the opacity of the border only? Can we somehow set that on the border element, together with the already set color and width style?

or should I add animation to the border additionally, but then how.

this might work:

            @keyframes resizing_outline {
              0% {outline-offset: 0;}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;outline-color: transparent; border-color: transparent;}
            }

or the variant, start with transparent

            @keyframes resizing_outline {
              0% {outline-offset: 0;outline-color: transparent; border-color: transparent;}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;}
            }

Already rather smooth, maybe you have more ideas?

[elchininet]

@Mariusthvdb

Already rather smooth, maybe you have more ideas?

Instead of setting an opacity in the element (something that will set the opacity for that element and its children), the opacity should be put in the color itself. The rgb functional notation allows you to set a relative value. This should do the work:

@keyframes resizing_outline {
  0% { outline-offset: 0; outline-color: rgb(from var(--accent-color) r g b / 1); }
  25% { outline-offset: 5px; }
  50% { outline-offset: 10px; }
  75% { outline-offset: 15px; }
  100% { outline-offset: 20px; outline-color: rgb(from var(--accent-color) r g b / 0); }
}

[elias87 (Elias)]

Hi guys,

I am a bit lost here and can’t find a solution.

I want to target this specific div element and the p inside it, the other elements should not be affected. Is this even possible? I want to add to the div element

display: flex; align-items: center;

and to p

color: red; margin: 0 10px;

I tried something like

card_mod:
  style:
    ha-markdown $ ha-markdown-element: |
      div {
        display: flex; 
        align-items: center;
      }
    ha-markdown $ ha-markdown-element div: |
      p {
        color: red; 
        margin: 0 10px;
      }

But this affects all p elements.

[Yoinkz]

Would you mind sharing this?
It really looks awesome!

Also the scene part how does that look when you expand it?

[Mariusthvdb (Marius)]

o that is nice indeed. Im always fighting with those rgba colors when Im using theme variables… didnt know this functionality existed at all, never saw it in HA .

can we also use that with color names or hex values?

rgb(from green r g b / 1)

or

rgb(from '#98878f' r g b / 1)

? up to now, I’ve always added a dedicated variable primary-rgb color to the themes

primary-rgb: 152,135,143

so I can use that in the rgba() syntax. this function now is much prettier!

edit

yes we can… wow

            @keyframes resizing_outline {
              0% {outline-offset: 0;outline-color: rgb(from '#98878f' r g b / 1);}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;outline-color: rgb(from red r g b / 0.5);}
            }

it does require the spaces between r g b, I tested rgb but that simply returns the border color.

o man this css is really so cool, the effects are simply amazing, adding the transparency on the border-color makes it even more attractive:

            @keyframes resizing_outline {
              0% {outline-offset: 0;outline-color: rgb(from var(--warning-color) r g b / 1);}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;outline-color: rgb(from var(--alert-color) r g b / 0.5);border-color: transparent;}
            }

perfect!
got something to do today

[Mariusthvdb (Marius)]

for the badge modders among us:
Ive just found that we can use the variable var(--badge-color) in our modifications:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.next_alarm
  color: var(--alert-color) # this will be inherited by the mod below when using var(--badge-color)
  tap_action:
    action: navigate
    navigation_path: /ui-instellingen/wekker_instellingen
visibility:
  - condition: state
    entity: binary_sensor.wekker_voor_morgen
    state: 'on'
card_mod:
  style:
    hui-entity-badge:
      $:
        ha-badge:
          $: |
            .badge {
              border: 2px solid var(--badge-color) !important;
            }

and it takes the color set in the main badge config options. In the above card that is var(--alert-color)

this is also an option, using theme variable:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: alarm_control_panel.ha_main_alarm
card_mod:
  style:
    hui-entity-badge:
      $:
        ha-badge:
          $: |
            {% set state = states(config.card.entity) %}
            .badge {
              border: 2px solid var(--state-alarm_control_panel-{{state}}-color) !important;
            }

[Faecon (Jo)]

The result of this code is, that the button is always white. Where am I going wrong ?
Also I want a little border around when it is white… How do I achieve this ?

 card_mod:
                                style:
                                  mushroom-state-info$: |
                                    .container {
                                      margin: -0px;
                                      }  
                                    .primary {
                                      padding: 0px 0px 0px 0px;
                                                }
                                  mushroom-shape-icon$: |
                                    .shape {
                                    margin-top: 0px;
                                    }
                                  .: |
                                    ha-state-icon {
                                      {% if is_state('light.gevel','on') %}
                                      animation:  blink 1s infinite, illumination 1s infinite ;{%- endif %}
                                      }
                                      @keyframes blink {
                                        50% {opacity: 0;}
                                            }   
                                      @keyframes illumination {
                                          0%, 100% { clip-path: inset(0 0 0 0); }
                                          95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
                                                }
                                    ha-card {
                                      width: 160px;
                                      height:60px !important;  
                                      ha-card-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important  
                                      {% if is_state('light.gevel','on') %}
                                      {
                                      background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-width: "2px"
                                      }
                                      {%else %}
                                        white
                                      {%- endif %}

[Mariusthvdb (Marius)]

@Faecon

background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-width: "2px"

this is the part you need debugging ? if yes, please post only the relevant bit, and not let us find your code for you…
for example, what card is this? Mushroom? ok, which, etc etc

also, show the card, and the output this template has in dev tools

btw there is a dedicated Mushroom styling thread in Mushroom Cards Card Mod Styling/Config Guide be sure to check there first

[Faecon (Jo)]

it is a mushroom template card

                                    ha-card {        
                                      {% if is_state('light.gevel','on') %}
                                      background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      {% endif %}
                                      }

so when my entity is on, i want to change the background color of the card…

[rougedevin (Hinkle)]

Posted this in the front end category but was directed here instead. I’m new to HA and understand enough to copy/paste and make modifications to suite my needs.

I’m using card-mod to make a card transparent, without a border, and to change text colors. Any card I edit in the first dashboard in card position 1 (first card on first dashboard), will not keep the css styles applied to it. I can edit the card, add the css styles, and then save it and it works, but as soon as I refresh my browser, or close the android HA app and re-open, the card goes back to its default settings and ignores the css styles. I’ve cleared the cache, tried different browsers, and deleted/re-installed the HA app and the issue still persists across multiple devices. This is the example of the card I’m using and the css mods added to it.

show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
card_mod:
  style: |
    ha-card {background: transparent;
       --border-style: none;
       --primary-text-color: white;
       --secondary-text-color: teal;
       --border: 0px;
       --box-shadow: none;
       --background: rgba(50,50,50,0.3);
       border: none;}
       

This only happens to the first card on my first dashboard, any other position or dashboard and all the styles work correctly. Any help is greatly appreciated!

[Ildar_Gabdullin]

Cannot reproduce in Chrome.

BTW, these are wrong vars:

--border-style
--border
--background
--box-shadow

[rougedevin (Hinkle)]

Can you provide any help with what the variables should be, or how they should be formatted if improper? I’m trying to learn more about CSS but very slow going. I copied the style code from another post, but can’t remember where. I’m just trying to get some basic styles going until I really have time to learn more.

[Ildar_Gabdullin]

1. Some examples are provided & can be used as a “starting point”: 1st post of this thread → link at the bottom titled “fantastic” → scroll down for weather card.
2. This small code could be rather sufficient:

card_mod:
  style: |
    ha-card {
      background: transparent;
      --primary-text-color: white;
      --secondary-text-color: teal;
      border: none;
    }

At least it removes a border, makes a transp. background & set colors…

[rougedevin (Hinkle)]

That does simplify it, I really appreciate it. Hopefully I can figure out why the styling doesn’t work for me in that first dashboard position. I really like the theme I’m getting together so far, and the transparency really ties it together.

[Ildar_Gabdullin]

Note that a stock weather card can change it’s class dynamically (“narrow” etc) dependently on a view, this might (just a guess) cause issues on some browsers…

[rougedevin (Hinkle)]

I’ll try to find a card that isn’t dynamic and see if that has any effect. So far I’ve tried the default weather card, custom expander card, and default thermostat card and have the same issue in that first card slot. I’ll try some other cards and see if I can find one that doesn’t lose its styling. Thanks for the help. I would assume that most cards are going to be dynamic (or have some kind of scaling) when using the HA companion app?

[Ildar_Gabdullin]

@rougedevin

I would assume that most cards are going to be dynamic (or have some kind of scaling) when using the HA companion app?

No idea. Only a few stock cards (weather, markdown, ???) have dynamic classes added. Other cards have dynamic sizes (as expected) (and let’s not talk about sections…).

[elchininet]

@Mariusthvdb

can we also use that with color names or hex values?

Yes, you can. But don’t put the hex color between quotes (even if it works) because it is not the standard. Do it like this:

rgb(from #98878f r g b / 0)

@Mariusthvdb

it does require the spaces between r g b, I tested rgb but that simply returns the border color.

Yes, you need to separate any color by spaces, that is because you can do this:

rgb(from #98878f r 25 50)

So, it will take the red from #98878f (0x98 = 152) and the blue and red as 25 and 50.

[wazza_c12 (Warwick Clarke)]

I’ve been playing around trying to customise some climate tiles for a wall display dashboard to primarily control a heat pump
Unfortunately I have been unable to locate examples to understand how to achieve what I want - any assistance with the following appreciated

See below photos - I was hoping to be able to customise inactive and active colours for the HVAC mode and fan speed buttons on the climate tile card
I was also hoping to replace the icons with text “Heat” “Cool” etc
Any help with how to reference the buttons and achieve the above would be appreciated
Cheers
Waz

[mattat (Matthew)]

I have been struggling with this for 2 days, and I need to know if it is even possible (so I can stop if it isn’t)… I have really tried to avoid asking someone to think for me, but I have failed… Please help, I need to sleep!

I have a default sections dashboard with a couple of tabs (calendar and shopping list). I’ve tried to show the code with as little as possible whilst showing enough…
I am successfully placing an image from my template in the background of the custom:week-planner-card (as shown with the first card_mod), but I want the image in the background behind that (and the other) cards, basically the background of the dashboard’s tab.
I have tried so many versions of the second card_mod shown below to get the image behind the card (in ha-sortable or hui-view or hui-view-container, I can’t get anything in the card_mod slot of those)…

kiosk_mode:
views:
  - title: Calendar
    sections:
      - type: grid
        cards: ...
      - type: grid
        cards:
          - type: custom:week-planner-card
            calendars: ...
            ...
            card_mod:
              style: |
                ha-card {
                  background: url('{{ states('sensor.unsplash_random_image') }}') no-repeat center;
                  background-size: 100%;
                }
      - type: grid
        cards: ...
    card_mod:
      style: |
        ha-sortable: {
          background: url('{{ states('sensor.unsplash_random_image') }}') no-repeat center;
          background-size: 100%;
        }
    cards: []
    type: sections
    ...
    badges: ...

I have also tried DOM navigation using things like the below:

“body home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-lovelace $ hui-root $ #view hui-view hui-sections-view $ ha-sortable”:

But, I think I just don’t get it…

Please, can someone tell me how to do this, or tell me it can’t be done. Either way, end my misery!

Thanks,
Matthew