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

colyro · August 30, 2023, 6:27pm

i’ve took the exact code from original post and checked that i have exactly begininning code mentioned by you above but no luck
nevertheless, thanks for work and sharing!

Murder3D · August 31, 2023, 10:15am

Hi,

I’m trying to set the mushroom template card border radius to 40px.

I have this card (which is animated so that the “Fan” image spins when the state is ON and it stops when the state is OFF):

type: custom:mushroom-template-card
primary: Fan
secondary: |-
  {% if states(config.entity)=='on' %}
    On
  {% else %}
    Off
  {% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
badge_icon: ''
picture: |-
  {% if states(config.entity)=='on' %}
    /local/Custom_Icons/Mushroom/V0/FAN_ON.png
  {% else %}
    /local/Custom_Icons/Mushroom/V0/FAN_OFF.png
  {% endif %}
card_mod:
  style:
    mushroom-shape-avatar$: |
      img {
        {% if states(config.entity)=='on' %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

And I have this piece of code which I’m using in all other mushroom template cards and it’s working:

    ha-card {
      border-radius: 40px;
    }

This is how the card is at the moment:

This is how all my other cards look and what I would like it to be:

Please help me merge the two pieces of code so that the “Fan” card borders are rounded.

Thank-you

arganto · August 31, 2023, 11:26am

First post, link at the bottom, link to topic " Combining “$:” styles and “not $:” styles"

Murder3D · September 1, 2023, 7:25am

It works! (I know it shouldn’t be a surprise but for someone who can’t code like me it’s an achievement )

card_mod:
  style:
    mushroom-shape-avatar$: |
      img {
        {% if states(config.entity)=='on' %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    .: |
      ha-card {
      border-radius: 40px;
      }

Thank you!

arganto · September 1, 2023, 8:08am

U are welcome. And esp. such achievements without giving the final solution directly will help you in the future.

Ildar_Gabdullin · September 1, 2023, 4:20pm

Example for customizing a color printer card:
posted here

Actually, this is an example of adding an outline for an icon, like here:

jouster · September 2, 2023, 8:03pm

havent really done much in the way of CSS modding before now but think ive found someting that my use case might require it

The new Tile Alarm card has a number of baked-in modes…of which I am using Home, Away, Custom (night) and Disarmed

it currently looks like this by default

I’d like to change the colour and icon on a couple of states…so right now when Home is set it is green, and that is all good…but the image above is showing in night mode which I’d like in blue with a crescent moon icon on the sheil.

Away/Armed is the correct icon but Id like to change it to red…

Is this even something I can do with CSS…I’m thinking yes, but I’d be guessing at how I’d even get that done.

Did manage to change the background colour pretty easily but to impact individual elements of a card seems to be a bit more complex…happy to read up and play if someone can point me in the right direction…TIA

Lainol · September 4, 2023, 5:54pm

Hi all, I’m trying to stylize the person badges…

I want to colorize the badges depending on state (home, away, etc) like example 1 (left one), with the badge container border in color (lime = home, orange = away, etc), but the best I can do is like example 2 (right one), gray container border, only the circular border with color. Don’t know how integrate “ha-label-badge:” into the “if” states.

Here is my code of example 1 and 2 , any help is appreciated. Thx!

  - entity: person.lainol
    name: Lainol
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                border-color: lime;
                background-color: 1c1c1c;
               }
              .badge-container .label-badge .value {
                color: lime;
               }
              .badge-container .label-badge .label span {
                border-style: solid;
                border-color: lime;
                color: white;
                background-color: #1c1c1c;
               }
              .badge-container .title {
                color: white;
               }
  - entity: person.lainol
    name: Lainol
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge .label span {
                border-style: solid;
                border-color: gray;
                background-color: #1c1c1c;
               }          
            .: |
              :host {
                {% if is_state('person.lainol','home') %} --label-badge-red: lime;
                {% else %} --label-badge-red: red; 
                {% endif %}
                }

Ildar_Gabdullin · September 4, 2023, 6:25pm

Why do you put it here?
It is misplaced.
Use examples from “1st post → link at the bottom → badges” as a starting point.
When you build a proper DOM path - then you will see how to “integrate “ha-label-badge:” into the “if” states”.

Lainol · September 4, 2023, 7:36pm

Because I don’t really know how it works, it’s a hit&miss procedure until it works . Too complicated for my brain…

My problem is that I can’t change badge-container color, border and background as easy as the --label-badge… in the different states provided by :host {%if…

Ildar_Gabdullin · September 4, 2023, 8:22pm

It’s OK, the “hit&miss” procedure exactly what is used by lots of people (including me who never dealt with CSS before card-mod).

The link I gave you earlier explains that there are 2 ways of styling some element:

By defining CSS properties for some PARTICULAR element (“direct access way”) - and you need to specify a PATH to this element.
By defining special variables like “–label-badge-text-color” (“variable way”) for the whole badge (which can be addressed as “:host”). In a code of HA some properties of some elements are defined based on similar variables, and a user do not have to know a path to some element, he only need to define a corr. variable on a particular badge level or globally in a custom theme.

This is applicable for many UI parts, not to badges only. And to style some UI part sometimes a combination of both ways is used.
In the link given earlier both ways (“direct”, “variable”) are illustrated by examples.

Your 1st code is based on a provided “direct way” example.
Your 2nd code (but with errors) is based on a “combined” example.

Your task may be split:

Provide STATIC (w/o “if”) styles for elements.
Then - make some of these styles dynamic.

So, first prepare a STATIC styling.
Use the 1st code as a starting point (it seems to be correct).
Suggestion: use different colors to be sure that is styled properly, not like “lime for several elements”.

Lainol · September 4, 2023, 9:04pm

Thanks for your time and support!

In the end the fix is so simple… putting the conditionals next to the colors

 .badge-container .label-badge {
 border-color: lime;
 background-color: #1c1c1c;
 }

changed to

.badge-container .label-badge {
 border-color: {% if is_state('person.lainol','home') %} lime; {% else %} orange; 
 {% endif %};
 background-color: #1c1c1c;
 }

Thank you so much!!!

Ildar_Gabdullin · September 4, 2023, 9:22pm

I would suggest to use another notation:

{% if ... %}
border-color: lime;
{% else %}
border-color: orange; 
{% endif %}

More structural imho, also can be easily changed to

{% if ... %}
border-color: lime;
smth_else: bla-bla;
{% else %}
border-color: orange; 
smth_else: bla-bla-bla;
{% endif %}

no to mention a possible indentation:

{% if ... %}
  border-color: lime;
{% else %}
  border-color: orange; 
{% endif %}

chrisonline · September 5, 2023, 7:36am

Does anyone know a solution to the problem from this thread:

I have the same problem, but did not find a solution in this and the linked thread.
Installed card-mode via HACS.

My dashboard code:

- entity: person.christian
        card_mod:
          style: |
            :host {
               --label-badge-red: {% if is_state('person.christian', 'home') %} green {%else %} #db4537 {%endif %};
             }

Ildar_Gabdullin · September 5, 2023, 7:45am

Be kind to describe the problem here.

chrisonline · September 5, 2023, 7:53am

I have this style added to the badge:

- entity: person.christian
        card_mod:
          style: |
            :host {
               --label-badge-red: {% if is_state('person.christian', 'home') %} green {%else %} #db4537 {%endif %};
             }

It shows correct in the browser on my PC after coming from “Raw edit” screen and if I hit refresh (F5) the page reloads and I don’t see the changed color.

On my Android phone I don’t see the changed color if I open the app.
Only sometimes after a refresh the colors are working.

Ildar_Gabdullin · September 5, 2023, 7:59am

May be not related, but if the condition is false then your code is

some_path {
  some_property:
}

which causes an error. In most cases this is not critical, but this is not “solid”.
See a few posts above HOW to properly wrap styles in “if else” code.

Also, have you read this in part of “extra_module_url”.

chrisonline · September 5, 2023, 8:12am

Have now changed it:

      - entity: person.christian
        card_mod:
          style: |
            :host {
               {% if is_state('person.christian', 'home') %} --label-badge-red: green {%else %} --label-badge-red: #db4537 {%endif %};
             }

But the problem is still there.

chrisonline · September 5, 2023, 8:13am

Have now added this too.
Seems it is now working in the browser. After F5 it shows correct.

But sadly in the Android app I have still the same problem.
On open it does not show the correct colors.

Ildar_Gabdullin · September 5, 2023, 8:28am

Mmmm, have no Android. Try clearing a cache on a companion app.