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

[Lainol]

@Ildar_Gabdullin

Why do you put it here?
It is misplaced.

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]

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:

1. By defining CSS properties for some PARTICULAR element (“direct access way”) - and you need to specify a PATH to this element.
2. 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:

1. Provide STATIC (w/o “if”) styles for elements.
2. 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]

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]

@Lainol

border-color: {% if is_state('person.lainol','home') %} lime; {% else %} orange; 
 {% endif %};

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 (Christian)]

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

[lovelace-card-mod] Badge color issue

Same issue with moded Icons/badges

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]

@chrisonline

to the problem from this thread

Be kind to describe the problem here.

[chrisonline (Christian)]

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]

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 (Christian)]

@Ildar_Gabdullin

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.

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 (Christian)]

@Ildar_Gabdullin

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

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]

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

[LuisFRP (Luis)]

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]

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 (Chris Warne)]

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]

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]

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]

@GERRYGOMEZ

someone knows how I can delete

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 (David Inwood)]

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.

[izzet]

Has anyone been able to extend their mobile background image up to the top of the phone where bat% and time is?

Here is my current setup and would like to extend the background up to the very top:

I’ve tried messing with the current code but wasn’t able to achieve my goal.

  card-mod-root: |
    .header {
      display: none;
    }
    #view {
      padding: 0 !important;
      height: 100vh !important;
    }

Thanks for the help in advance

EDIT: Ive found this site that fix the problem but I’m not sure how to implement it with card mod.

Make Your PWAs Look Handsome on iOS

[dimitri.landerloos]

Hi its been a little bit, but since i am working on a guide for styling the tile card with card mod i figured i would give you a response.

it is unfortunately not possible to change the icons for most of the tile cards (any that have a feature) as they all use svg icons. card mod cant change these as far as i know @Ildar_Gabdullin may be able to confirm, or provide some insight on this. i have certainly been unable to do this.

you can however change the colors of the states like this (of coure pick your own colors )

Code

card_mod:
  style:
    hui-tile-features$:
      hui-alarm-modes-tile-feature$:
        ha-control-select$: |
          #option-armed_home {
            --control-select-color: blue;
          }
          #option-armed_away {
            --control-select-color: red;
          }
          #option-armed_night {
            --control-select-color: lightblue;
          }
          #option-armed_vacation {
            --control-select-color: yellow;
          }
          #option-armed_custom_bypass {
            --control-select-color: orange;
          }
          #option-disarmed {
            --control-select-color: black;
          }
    ha-tile-icon$: |
      ha-svg-icon {
        {% if states(config.entity) == 'armed_home' %}
          color: blue !important;
        {% elif states(config.entity) == 'armed_away' %}
          color: red !important;
        {% elif states(config.entity) == 'armed_night' %}
          color: lightblue !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          color: yellow !important;
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          color: orange !important;
        {% elif states(config.entity) == 'disarmed' %}
          color: black !important;
        {% endif %}
      }
      .shape::before {
        {% if states(config.entity) == 'armed_home' %}
          background-color: blue !important;
        {% elif states(config.entity) == 'armed_away' %}
          background-color: red !important;
        {% elif states(config.entity) == 'armed_night' %}
          background-color: lightblue !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          background-color: yellow !important;
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          background-color: orange !important;
        {% elif states(config.entity) == 'disarmed' %}
          background-color: black !important;
        {% endif %}
      }

I have only shown the 3 states because that is all my alarm panel supports right now, but all are included in the code

in the meantime if you are interested you can check out my mushroom card mod guide here. there are some overlaps on how things are styled in those and in the tile card. below

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …