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

[Mariusthvdb (Marius)]

Found the paddings were not very productive, so tried the margin-top

I’ve set it to this now:

      - type: media-control
#         visibility:
#           - condition: state
#             entity: media_player.symfonisk
#             state_not: unavailable
        entity: media_player.symfonisk
        card_mod:
          style: |
            ha-card {
              height: {{'48px !important' if is_state(config.entity,'unavailable')}};
              font-size: 18px;
            }

            .background.off {
              filter: unset !important;
            }
            .player {
              margin-top: -4px;
            }

which is gettin very close, if not exactly right…

@VietNgoc

card_mod: 
  style: |
    ha-card {
      max-height: 48px !important;
      height: 100%;
      display: flex;
      align-items: center;
    }

that would be awesome , and yes, I did try to set it all on the ha-card element before. Unfortunately this is the result of that:

[Spaceranger (M)]

How do I wrap text in a dashboard card displaying the content of a text helper? For the life of me it refuses.

[VietNgoc (Ngoc John)]

@Mariusthvdb

that would be awesome , and yes, I did try to set it all on the ha-card element before. Unfortunately this is the result of that:

Manipulate only the content that is visible. Other elements are empty

type: media-control
entity: media_player.browse
card_mod:
  style: | 
    ha-card .player {
      height: 48px;
      justify-content: center;
    }

[Mariusthvdb (Marius)]

@VietNgoc

Other elements are empty

            ha-card .player {
              height: 48px;
              justify-content: center;
            }

nice, nice… though the 3 dots are not centered …
like with this:

            .player {
              margin-top: -4px;
            }

[VietNgoc (Ngoc John)]

@Mariusthvdb

            .player {
              margin-top: -4px;
            }

icon already has size 48px as header, but the .more-info class for the icon is indented 4px from the top. This will fit exactly including padding for the icon.

type: media-control
entity: media_player.browse
card_mod:
  style: |
    ha-card .player {
      height: 48px;
      justify-content: center;
    }
    .more-info {
      top: 0 !important;
    }

[Ildar_Gabdullin]

@Spaceranger

How do I wrap text in a dashboard card displaying the content of a text helper? For the life of me it refuses.

Suggest you to name this card & post a code of your latest attempt.

[bycippy]

is possible change color, based on multiple states of the same entity.

card_mod:
  style: |
    ha-card {
      background: {{ '#443EF4' if is_state('alarm_control_panel.alarmo', 'armed_home') else '#367202' }};

I would like to add (alarm_away) and (triggered) as well, with their respective colors

[Ildar_Gabdullin]

card_mod:
  style: |
    ha-card {
      {% if ... -%}
        background: ...;
      {%- elif ... -%}
        background: ...;
      {%- elif ... -%}
        background: ...;
      {%- else -%}
        background: ...;
      {%- endif %}
    }

or for some cases - smth like:

      {% set mapper = {
                       'value_1': 'red',
                       'value_2': 'green',
                       'value_3': 'blue'
                      } -%}  
      {%- set VALUE = states(...) -%}
      {%- set COLOR = mapper[VALUE] if VALUE in mapper else 'yellow' -%}
      background: {{COLOR}};
    }

[Mariusthvdb (Marius)]

you can get smart and use the theme variable…

            {% set state = states(config.card.entity) %}
            .badge {
              border: 2px solid var(--state-alarm_control_panel-{{state}}-color) !important;
            }

ofc this is but an example form another config, use the variable template inside your own card mod

that is, if you want to use those colors… if you want your own set of colors, do as Ildar says
or adjust the theme colors in your theme and have them coherently system wide

[Ildar_Gabdullin]

Yes, I am keep forgetting about standard colors for some domains/classes…

[Mariusthvdb (Marius)]

playing around with those variables:

    state-alarm_control_panel-armed_away-color: var(--red-color)
    state-alarm_control_panel-armed_custom_bypass-color: var(--warning-color)
    state-alarm_control_panel-armed_home-color: var(--warning-color)
    state-alarm_control_panel-armed_night-color: var(--red-color)
    state-alarm_control_panel-armed_vacation-color: var(--warning-color)
    state-alarm_control_panel-arming-color: var(--warning-color)
    state-alarm_control_panel-disarmed-color: var(--success-color)
    state-alarm_control_panel-disarming-color: var(--info-color)
    state-alarm_control_panel-pending-color: var(--orange-color)
    state-alarm_control_panel-triggered-color: var(--alert-color)

note I did shuffle some of the warning and alerting colors.
success, info, warning and alert are also built in colors, unless your theme modifies them. See eg Markdown card - Home Assistant for those

[bycippy]

I’m definitely getting the synthesis wrong. I tried like this

card_mod:
  style: |
    ha-card {
      {% if is_state('alarm_control_panel.alarmo', 'armed_home') -%}
        background: '#443EF4';
      {%- elif is_state('alarm_control_panel.alarmo', 'armed_away') -%}
        background: '#FE9900';
      {%- elif is_state('alarm_control_panel.alarmo', 'triggered') -%}
        background: '#D20103';
      {%- else -%}
        background: '#367202';
      {%- endif %}
    }

[bycippy]

thanks for the kindness, but i don’t understand where to use that code. Instead of the background: ?

[Mariusthvdb (Marius)]

@bycippy

where to use that code. Instead of the background:

well, not instead, but yes, in that same template mod:

card_mod:
  style: |
    ha-card {
      {% set state = states(config.entity) %}
      background: var(--state-alarm_control_panel-{{state}}-color);
    }

if the entity of your card is the alarm_panel

if it isnt, simple replace the state setter and add the alarm_control_panel.alarmo in there

card_mod:
  style: |
    ha-card {
      {% set state = states('alarm_control_panel.alarmo') %}
      background: var(--state-alarm_control_panel-{{state}}-color);
    }

try that template in your dev tools template and check if its returning a correct output:

[Ildar_Gabdullin]

@bycippy

I’m definitely getting the synthesis wrong

As it was suggested - use Dev tools → Template for clearing out templating errors. (although my eyes do not see any errors here)
Also, try

background: #123456;

i.e. w/o quotes.

[bycippy]

yes, is work fine.
thanks

[bycippy]

in the dev panel, only the code work fine.

card_mod:
  style: |
    ha-card {
      {% if is_state('alarm_control_panel.alarmo', 'armed_home') -%}
        background: '#443EF4';
      {%- elif is_state('alarm_control_panel.alarmo', 'armed_away') -%}
        background: '#FE9900';
      {%- elif is_state('alarm_control_panel.alarmo', 'triggered') -%}
        background: '#D20103';
      {%- else -%}
        background: '#367202';
      {%- endif %}
    }

in the card but it stops working. I attach the whole code

type: custom:expander-card
gap: ""
padding: ""
clear: false
clear-children: false
title: "     ------ ! ! ----- Allarme ------ ! ! ----- "
overlay-margin: 2em
child-padding: ""
button-background: transparent
cards:
  - type: custom:alarmo-card
    entity: alarm_control_panel.alarmo
  - type: alarm-panel
    entity: alarm_control_panel.ezviz_alarm
card_mod:
  style: |
    ha-card {
      {% if is_state('alarm_control_panel.alarmo', 'armed_home') -%}
        background: '#443EF4';
      {%- elif is_state('alarm_control_panel.alarmo', 'armed_away') -%}
        background: '#FE9900';
      {%- elif is_state('alarm_control_panel.alarmo', 'triggered') -%}
        background: '#D20103';
      {%- else -%}
        background: '#367202';
      {%- endif %}
    }
```}

[VietNgoc (Ngoc John)]

@bycippy

button-background: transparent

I’d try removing this😅

[bycippy]

tried with and without, for correctness I attached all the code

[Ildar_Gabdullin]

@bycippy

in the card but it stops working

Erm, a card-mod code from Card_A is not obliged to work with Card_B.
I never tested “custom:expander-card”, can say nothing about it.