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

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.

LuisFRP · September 6, 2023, 3:44pm

You got any solution here? Finding the same problem and looking on how to decrease the todoist text.

type: custom:todoist-card
entity: sensor.to_do_list
show_completed: 0
show_header: true
use_quick_add: false
only_today_overdue: false
show_item_delete: false
card_mod:
  style: |
    ha-card {
      color: black;
      --ha-card-text-font-size: 50%;
    }

Can’t find the right convention to apply instead of text.

–ha-card-text-font-size: 50%;

onepointbrewing · September 7, 2023, 7:08am

Can anyone help me out on what Im doing wrong here???

Im trying to show a different background image based on a sensor state

cards:
  - type: custom:vertical-stack-in-card
    style: |
      ha-card {
       {% if (states("sensor.temp_error_state").state == "Online" %}
          border: solid 1px gray; 
          box-shadow: 5px 10px 10px  rgba(0,0,0,.4);
          background-image: url("/local/icons/cyan/online.png");
          background-position: center;
          background-size: cover; 
          background-repeat: no-repeat;
       {% elif (states("sensor.temp_error_state").state == "Offline" %}
          border: solid 1px red; 
          box-shadow: 5px 10px 10px  rgba(200,0,1);
          background-image: url("/local/icons/cyan/offline.png");
          background-position: center;
          background-size: cover; 
          background-repeat: no-repeat;
       {% endif %}
      }

Can you not cascade css styles this way???

reste_narquois · September 7, 2023, 7:21am

Try putting your code into Developer Tools > Template. It should highlight a couple of code errors:

{% if (states("sensor.temp_error_state").state == "Online" %}

you’ve opened a bracket pair without closing it
states("sensor.temp_error_state") is all you need to return the sensor state. Adding .state means you are looking for an attribute of the state called state, which is obviously meaningless. This would only be needed if you were using the more long-winded square brackets notation i.e. states["sensor.temp_error_state"].state

Hopefully correcting these will get you there.

onepointbrewing · September 7, 2023, 7:37am

Im stupid… (as usual)

fixed it myself

cards:
  - type: custom:vertical-stack-in-card
    style: |
      ha-card {
       {% if states("sensor.temp_error_state") == "Online" %}
          border: solid 1px gray; 
          box-shadow: 5px 10px 10px  rgba(0,0,0,.4);
          background-image: url("/local/icons/cyan/online.png");
          background-position: center;
          background-size: cover; 
          background-repeat: no-repeat;
       {% elif states("sensor.temp_error_state") == "Offline" %}
          border: solid 1px red; 
          box-shadow: 5px 10px 10px  rgba(200,0,1);
          background-image: url("/local/icons/cyan/offline.png");
          background-position: center;
          background-size: cover; 
          background-repeat: no-repeat;
       {% endif %}
      }

missing )) and no need for the .state

GERRYGOMEZ · September 7, 2023, 8:03pm

Hello, someone knows how I can delete the part of the title, it’s directly the name of the entity, but I can’t hide it on the card

arganto · September 8, 2023, 7:13am

Have a look in the dom on the right side. It is inside shadow root and not directly in ha-card. So you have to go one level deeper. Search for card-header in this thread. Asked and answered a lot of times.

DJI · September 10, 2023, 1:26pm

Does custom:canvas-gauge-card belong to the list of cards that can’t be modified with card-mod? I’m using it within a picture_elements card so I can see <ha-card class="type-picture-elements"> when I inspect the card, but not within this for the gauge itself. The line before </canvas-gauge-card> is <card-mod slot='none'> and I am able to get things inserted into this section but they have no effect on the card size (I’m trying to adjust its height in response to the pc or phone’s screen size, either by explicitly re-stating the gauge’s size or by scaling it).
My experimental card (much simplified) yaml:

type: picture-elements
image: /local/images/grid1280x1000.jpg
title: tide
elements:
  - type: custom:canvas-gauge-card
    entity: sensor.tide_high
    gauge:
      type: linear-gauge
      width: 150px
      height: 360px
      colorPlate: '#ffffff00'
      colorBar: '#fdf6ccff'
      colorBarProgress: '#c2e1b7ff'
      borderShadowWidth: 0
      colorBorderOuter: black
      colorBorderMiddle: '#ffffff00'
      colorBorderInner: '#ffffff00'
      colorBorderOuterEnd: '#ffffff00'
      colorBorderMiddleEnd: '#ffffff00'
      colorBorderInnerEnd: '#ffffff00'
      majorTicks: none
      strokeTicks: false
      animate: false
      barStrokeWidth: 0
      barBeginCircle: false
      valueBox: false
    style:
      left: 5%
      bottom: 0%
      transform: translate(0%,0%)
    card_mod:
      style: |
        :host { height: 625px; }
  - type: state-label
    entity: sensor.t_avg
    name: t avg
    style:
      left: 50%
    card_mod:
      style: |
        @media  (min-height: 700px)  {
          :host { top: 50%; color: red;}

        @media  (min-height: 800px)  {
          :host { top: 25%; color: blue;}
        }

The last entity is there just to prove that card-mod is installed & working and capable of responding to @media statements.