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

[rhysb (Rhys)]

You could try dynamically adjusting the font size based on the text length like this:

--card-secondary-font-size: calc(1em / {{ state_attr(config.entity, ''forecast'')[0].detailed_description | length / 10 }} + 1em);

Adjust the divisor and + 1em to suite. The + 1em is used as a minimum size.

Adding a Chip to the Climate Card can be done like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.office_air_conditioner
    show_temperature_control: true
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - dry
      - fan_only
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.rhys_office_sensor_temperature
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: var(--spacing);
          right: var(--spacing);
          --chip-box-shadow: none;
          --chip-background: rgba(var(--rgb-disabled), 0.2);
        }

[arganto]

@Mariusthvdb

but that doesnt catch the multiline indicator though.

ofc it does. If you paste and test the whole string, which you want to ingest and should work afterwards in html and not only the template. So everything after the style: |

[Mariusthvdb (Marius)]

What I meant was that dev templates doesn’t care about the indicator and just shows the correct output.

I just never realized upfront that card_mod templates don’t require ( and fail even when using) the multi line indicator…

and yet, it still isnt very obvious on all spots, consider this card_mod_theme template:

      /* Optionally set a replacement template text. */
      ha-button-menu::before {
        content: "{% if is_state('input_boolean.menu_options_template','on') %}{{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C{% endif %}";
        color: var(--app-header-text-color);
        visibility: visible;
        position: relative;
        top: 24px;
        white-space: nowrap;
      }

which I can not use in this syntax (with or without quotes):

      /* Optionally set a replacement template text. */
      ha-button-menu::before {
        content: "{% if is_state('input_boolean.menu_options_template','on') %}
                  {{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C
                  {% endif %}";
        color: var(--app-header-text-color);
        visibility: visible;
        position: relative;
        top: 24px;
        white-space: nowrap;
      }

and, because of readability have made that into:

      /* Optionally set a replacement template text. */
      ha-button-menu::before {
        content: "{{states('sensor.custom_header_template')}}";
        color: var(--app-header-text-color);
        visibility: visible;
        position: relative;
        top: 24px;
        white-space: nowrap;
      }

with an external template sensor…

which in itself is an exception, because I do this all the time in the rest of my card_mod_theme:

      /* Set the toolbar background. */
      app-header, app-toolbar {
        background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
                       if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        color: var(--text-primary-color);
      }

so, there is no ‘ofc’ …

[Mariusthvdb (Marius)]

would you know if we have a ‘light’ color to use on Tile card? In below template Ive copied what I do on custom:button-card var(--button-card-light-color, but that obviously does not work, so it uses the default now. Id love to use the light color.

          card_mod:
            style: |
              ha-card {
                border-top: {{'0.5rem solid var(--button-card-light-color, var(--icon-color-on))'
                               if is_state(config.entity,'on') else 'none'}};
                background: {{'var(--background-color-off)' if is_state(config.entity,'off')
                  else 'var(--background-color-on)' }};

                --primary-text-color: {{'var(--background-color-on)' if is_state(config.entity,'off')
                  else 'var(--background-color-off)' }};
              }

what’s remarkable, is that this border heightens the tile card with that section, where it doesnt do that on button-card.
So, Id need a styling to set that border inside the Tile, and not add it, and mess with the grid:

[arganto]

@Mariusthvdb

What I meant was that dev templates doesn’t care about the indicator and just shows the correct output.

No, it shows the output, how is ingested via card_mod. And if the output contains wrong css, then it will not work in card_mod either.

So the ofc was right.

Same in your other examples.

Background:

• card_mod is ingesting plain text as is, including linebreaks etc.
• Same in developer tools. I shows the output as is plain text, including linebreaks.
• So it is 1:1 the plain text which you define in card_mod is igested as css styles in html.
• linebreaks ans spaces are at 99% cases not important in css definition in most places, so

color: red;

color:
   red   ;

will result in the same result. Either it comes from card_mod or if you would write css or html in a text editor.

So if you test everything what you want to ingest via card_mod, so everything behind style, either inline or via multi line indicator

card_mod will 1:1 ingest the output

So not only test your template, but everything of your text you want to ingest. And if this inculdes wrong css, then you have the error. And this is here the >

In your other example

it will ingest 1:1 the output

And as in example before, this is wrong css, because here the 1% case. content string does not allow linebreaks.

So you cannot use it in this syntax, because its output is wrong css. So no special case or exception. Always the same. plain text with linebreaks is ingested 1:1. And is this is wrong css, it will not work as in your cases. And you can see this better (ofc ) if you test your whole style and not only your templates. This was ofc the only thing I advised.

[Ildar_Gabdullin]

In short, css code must be like:

property: value; property: value;

[Mariusthvdb (Marius)]

hehe, I must ingest/digest this properly…

yet consider this:

the card_mod(_theme) templates use the pipe | multiline indicator. And as such I believed they should strip all whitespace. But, in fact they keep them… We need explicit {{-
white space strippers.
yet it does Not behave the same in all places.

But, as I try to understand, I believe we should try and output a single line;

        content: "{% if is_state('input_boolean.menu_options_template','on') %}
                 {{-states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C
                 {%- endif -%}";

and as you can see below, Ive also tested that without quotes:

which it wont accept. changing that to:

      /* Optionally set a replacement template text. */
      ha-button-menu::before {
        content: "{% if is_state('input_boolean.menu_options_template','on') %}
                 {{-states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C
                 {%- endif -%}";
        color: var(--app-header-text-color);
        visibility: visible;
        position: relative;
        top: 24px;
        white-space: nowrap;
      }

does in fact work, (the whitespace strippers do the work here) so that type of spacing indeed is the essence.

Ill be more alert for this type of precision in the outputted strings.

thanks for the explanation.

[Ildar_Gabdullin]

The syntax for “content” property must be:

content: “some string which may include \A characters”;

so it must have quotes.
Any jinjia templates are resolved before injecting a style into an element, so output is same.

[MarkTwerking]

Mr. Gabdullin, much respect for your work. My problem is this: I am trying to make a multiple-entity-row with at least three input_boolean entities. I want color of the name of each entity to be dynamic, depending on its state.
I have managed to set a color for all the elements on the card and the information on this forum has been a great help. And yes i’ve read your post about template-entity-row and card-mod. But I just can’t get it to work

type: entities
entities:

• type: custom:multiple-entity-row
  entity: input_boolean.climate_a1_off
  styles:
  color: purple
  style: |
  .entities-row div.entity:nth-child(1) span {
  color: green;
  }
  .entities-row div.entity:nth-child(2) span {
  color: green;
  }
  .entities-row div.entity:nth-child(3) span {
  color: green;
  }
  :host {
  color: orange;
  }
  entities:
  • entity: input_boolean.climate_fanr_on_off
    name: true
    styles:
    color: purple
    text-align: center
  • entity: input_boolean.climate_fanl_on_off
    name: kk hh
    styles:
    color: purple
    text-align: center
    name: Colored secondary_info
    unit: ‘’
    icon: mdi:account
    toggle: false
    show_state: true
    state_header: lll
    secondary_info: last-changed

[MarkTwerking]

type: entities
entities:

• type: custom:multiple-entity-row
  entity: input_boolean.climate_a1_off
  style: |
  .entities-row div.entity:nth-child(1) span {
  color: orange;
  }
  .entities-row div.entity:nth-child(2) span {
  color: red;
  }
  .entities-row div.entity:nth-child(3) span {
  color: cyan;
  }
  :host {
  color: pink;
  }
  hui-generic-entity-row:
  $:
  .info.pointer:
  .secondary: |
  ha-relative-time {
  color: yellow !important;
  }
  entities:
  • entity: input_boolean.climate_a1_off
    name: jjj
    styles:
    color: purple
    text-align: center
  • entity: input_boolean.climate_fanr_on_off
    name: true
    styles:
    color: yellow
    text-align: center
  • entity: input_boolean.climate_fanl_on_off
    name: kk hh
    styles:
    color: green
    text-align: center
    name: Colored secondary_info
    unit: ‘’
    icon: mdi:account
    toggle: false
    show_state: false
    state_header: ‘’
    secondary_info: last-changed

Can you help me out?

[Ildar_Gabdullin]

Hello!
Right now I have a very limited access to a PC.
Will try to check your post anyway.
First - make a proper formatting for the posted code (use a corr. button on a post toolbar) - otherwise it is not easy to analyze what you coded.

[MarkTwerking]

Ok. I will do that.

[rhysb (Rhys)]

Yes, there is --state-light-on-color and --state-light-active-color.

For the border-top, try something like this:

card_mod:
  style: |
    ha-card {
      border-top: 0.5rem solid;
      {{ 'border-top-color: var(--state-light-active-color);' if is_state(config.entity, 'on') }}
    }

[Mariusthvdb (Marius)]

arghh, that I should have overlooked that… so sorry

getting better indeed (though it does not show as the same color in button-card:

as you can see, it even doesnt look identical to itself

still, thats is progress and fine for now.

my next question quest is getting the tile to be squared (its in a squared grid after all , and Ive asked in a issue to fox that…)

setting aspect-ratio: 1 does help, but then it simply cuts-off, and doesnt resize, again, like custom:button-card does

would we have the tools to change the in-card margins/paddings, so we can have a squared tile, showing both primary and secondary info line?

wondering if I might not be better off adding an icon background on my button cards… have to look int the tile what they do for that and set the color acordingly

the latter seems to be colored like, and complies with what Rhys posted on the mushroom:

        styles:
          icon:
#             - filter: drop-shadow(0 0 12px var(--button-card-light-color))
            - background: >
                [[[ var color = entity.attributes.rgb_color;
                    return (entity.state === 'on') ?
                    'rgba(' + color + ',0.2)' : 'none'; ]]]

but I need to get the circular shape

btw, the state-light-active-color (or the on variant) dont translate the color at all so it seems… hence the color difference I already noticed,. have a look at this:

this uses the --state-light-active-color,where using --state-light-on-color doesnt work, and falls back to my set default.

border-top: {{'0.5rem solid var(--state-light-active-color, var(--icon-color-on))' if is_state(config.entity,'on') else 'none'}};

[reypm]

I am trying to style an icon but I am unable to get it done. I have read the docs several times and checked here but still do not get how to pick the right element. Having the following HTML:

I am trying to style that icon you see there but what I have tried does not work for me:

  - type: custom:minimalistic-area-card
    title: Office
    area: office
    tap_action:
      action: navigate
      navigation_path: /home-dashboard/office
    entities:
      - fan.office
      - light.office
    card_mod:
      style: |
        ha-state-icon$: | {
          color: red;
          }

not sure if my root element is ha-state-icon or ha-svg-icon but I have tried both and none works, I am still seeing the icon white instead of red.

What I am missing?

[parautenbach (Pieter Rautenbach)]

Isn’t it the same where yours is just the “shorthand” version?

card_mod:
  style:
    ha-markdown $:
      ha-markdown-element: |

vs

        card_mod:
          style:
            ha-markdown:
              $:
                ha-markdown-element: |

Or am I missing something?

Either way, it doesn’t work. I’m going to try a few more things.

@Ildar_Gabdullin

Does this code work?
Shouldn’t you use “calc()” here?
I may be wrong.

It did – no need to use calc. Maybe this changes if I can get the rest of the styling applied.

@Ildar_Gabdullin

Also, I suggest you to define a “default” value:
var(--ha-card-border-radius, 4px)

Yeah, it’s in my custom.js.

[parautenbach (Pieter Rautenbach)]

@Mariusthvdb

Not so sure about that, Ive never used the ha-markdown-element: yet, but, just this day, no such thing as coincidence, I wondered if we could card_mod per section in a markdown card. Is that what this does?

I just meant that your post was the last one I could find related to anything to styling a markdown card at that point in time (not my problem per se), and that your post was before the big UI updates. This was just to say I search the forum as well as possible and couldn’t find anything useful to my query.

[Ildar_Gabdullin]

@parautenbach

Isn’t it the same where yours is just the “shorthand” version?

Should be, but it may have some glitches…
Earlier I noticed an issue with custom:hui-element card where these 2 notations caused diffrent results, and Thomas gave us an explanation.

[Ildar_Gabdullin]

@parautenbach

Either way, it doesn’t work. I’m going to try a few more things.

Post your latest version.

[AldoQ (Aldo Quispel)]

I’ve only started trying to style my dashboard with Card mod and a bit lost on something perhaps very basic. I’ve been trying to style the button card so that it fits with the Mushroom theme.

I managed to style two buttons using the following code:

show_name: true
show_icon: true
type: button
entity: automation.google_assistant_notification_dinnertime
icon: mdi:chef-hat
name: Koken
show_state: false
theme: Mushroom
hold_action:
  action: none
tap_action:
  action: call-service
  service: notify.google_assistant_sdk
  data:
    message: Kom je helpen koken?
  target: {}
icon_height: 40px
card_mod:
  style:
    ha-state-icon $ ha-icon $: |
      ha-svg-icon {
        color: #2196f3;
        background-color: #1c3447;
        width: 25px;
        height: 25px;
        padding: 10px;
        border: 0px solid blue;
        border-radius: 100%;
      }

This looks as such:

This is based on the great post by @Ildar_Gabdullin :

Card-mod - Add css styles to any lovelace card

[изображение]

code

type: entities entities: - type: button name: entity specified entity: input_boolean.test_boolean tap_action: action: none card_mod: style: ha-state-icon $ ha-icon $: | ha-svg-icon { color: magenta; } - type: button name: entity NOT specified tap_action: action: none card_mod: style: ha-state-icon $: | ha-svg-icon { color: cyan; }

Main post h…

What I cannot figure out is how to now style the rest of the card. I for example want to font-size to match the rest and not have “Koken” and “Etenstijd” to be that large. If I try and add a section like

ha-card {
      color: red;
    }

I do not see the text color change anymore (as it did before adding the css to change the button image).

What am I doing wrong?