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

[Mariusthvdb (Marius)]

aarghh, had hoped to be able to do with mod-card in Arganto style…

and the config.entity, do we have another variable here too (like the other day in the row entity)?

          hui-generic-entity-row {
            {% set alert = states(config.row.entity)|int(0) %}
            --card-mod-icon:
              mdi:{{'shield-check' if alert == 0 else 'alert'}};
            --card-mod-icon-color:
              var(--{{'ok' if alert == 0 else 'alert'}}-color);
          }

looking for the badge entity…

[arganto]

@Mariusthvdb

would you know how to set the background of the badge?

e.g. (short way via variables)

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  show_name: false
  show_state: true
  show_icon: true
  entity: sensor.processor_use_percent
  color: amber
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          --mdc-icon-size : 50px;
        }
    .: |
      hui-entity-badge {
        --ha-card-background: red;
      }

[Ildar_Gabdullin]

Erm, what is a difference? Either use mod-card, or apply card-mod directly.
Also, with a hack you can use themes with “card-mod-badge”:

test_badge:
  card-mod-theme: test_badge
  card-mod-badge-yaml: |
    ha-badge $: |
      span.label {
        color: magenta;
      }
      .badge {
        background-color: lightblue !important;
        border: 2px solid red !important;
      }
    .: |
      :host {
        --primary-color: green;
      }
      state-display {
        color: blue;
      }

[Ildar_Gabdullin]

@Mariusthvdb

nd the config.entity, do we have another variable here too (like the other day in the row entity)?

Ofc:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  show_name: true
  show_state: true
  show_icon: true
  entity: input_boolean.test_boolean
  name: xxxx
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          {% if is_state(config.card.entity,'on') -%}
          --mdc-icon-size: 28px;
          {%- else -%}
          --mdc-icon-size: 8px;
          {%- endif %}
        }          

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

config.card.entity

bingo! thx

      style:
        hui-entity-badge:
          $: |
            ha-state-icon {
              --mdc-icon-size: 28px;
              color: {{'var(--success-color)' if states(config.card.entity)|int(0) < 24
                       else 'var(--error-color)'}};
            }

is what I was after
getting better now…

only looking for the border element now

on that same .badge element

ehrm…

    .: |
       hui-entity-badge {
        --ha-card-background: {{'var(--success-color)'
          if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
        border: 2px solid red;
       }

how peculiar

adding:

    .: |
       ha-card {
         border: 2px solid red;
         border-radius: 24px;
       }

seems to work, but I had hoped to find the element so that I dont have to also set the border radius again

       ha-card {
         border: 2px solid purple;
         border-radius: 24px;
         --ha-card-background: green;
         --primary-text-color: white;
         --icon-primary-color: black;
       }

all seem to work, and even --card-mod-icon-color: black; for that matter

[Mariusthvdb (Marius)]

a summary post, commented mods also work, but I’ve moved all except icon size to the generic ha-card, mainly because it is so much easier.

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.vandaag
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          --mdc-icon-size: 28px;
          /*color: {{'var(--warning-color)'
            if is_state('binary_sensor.werkdag','on')}};*/
        }
        state-display {
          font-size: 24px;
          /*color: {{'var(--warning-color)' if is_state('binary_sensor.werkdag','on')}};*/
        }
    .: |
       /*hui-entity-badge {
        --ha-card-background: {{'var(--success-color)'
          if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
       }*/

       ha-card {
         border: 2px solid {{'var(--success-color)' if
                             is_state('binary_sensor.werkdag','off') else
                             'var(--error-color)'}};
         border-radius: 24px;
         --ha-card-background: gray;
         --primary-text-color: white;
         --card-mod-icon-color: {{'var(--success-color)' if
                             is_state('binary_sensor.werkdag','off') else
                             'var(--error-color)'}}; /*--icon-primary-color:*/
       }

but the border isnt right yet. Note the difference here:

the orange is set on the ha-card with the above card-mod, and the red inner border is set in Inspector, on the .badge element.

that would be my preference, because right now the oranges makes the card size go out of sync with others, and also has a different box-shadow

[Mariusthvdb (Marius)]

separate post for this:
because of the card_mod (with mod-card, idk) there is an ugly effect on reload of the view.

in my main theme I have a ha-card-border-radius: 0.

recently ha-badge-border-radius was added to the styles of the badges, and that’s great, because we can set the radius in our themes now.

I have ha-badge-border-radius: 24px in my main theme.

any badge in the dashboard that has any mod-card/card-mod set (and even without any mod itself), shows the squared border-radius 0 for a moment, and then loads the actual styling.

left 2 badges have a mod, the most right badge has not…

btw, same happens with the new type: heading when card-mod is set:

Check the Host system info

[arganto]

@Ildar_Gabdullin

card-mod-badge-yaml:

From where is this? And do you see a difference to address from there and not - as “standard” - from card-mod-view-yaml?

  card-mod-view-yaml: |
    hui-sections-view:
      $:
        hui-view-badges:
          $:
            hui-entity-badge:
              $:
                .: |
                  ha-state-icon {
                    --mdc-icon-size : 24px;
                  }              
                ha-badge:
                  $: |
                    .content {
                      font-size: 14px !important;
                    }

[Ildar_Gabdullin]

@arganto

From where is this?

This is a standard card-mod-themes thing.

@arganto

And do you see a difference to address from there and not - as “standard” - from card-mod-view-yaml?

Sorry, could you elaborate?

[arganto]

O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above.

[benm7 (Ben M)]

Did you ever get a reply or solution for this?

[GTunney]

Nope I just learnt to live with it.

I might log it officially on github.

[Mariusthvdb (Marius)]

ok so this might be a bit of a challenge, if at all possible

I like my card headers to show like

or

and with some conditional colors:

Ive configured a card_mod theme class with:

        ha-card.class-header-margin .card-header {
          background: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

I found my way to do this with apexcharts-card, using:

card_mod:
  style: |
    .wrapper div#header {
       background: var(--background-color-off);
       padding: 12px;
    }
    .wrapper div#header div#header__title {
      font-weight: 400;
      font-size: 20px;
      color: var(--text-color-off);
    }

a local mod in a card can be like

style:
  $: |
    .card-header {
       background: var(--background-color-off);
       font-weight: 400 !important;
       font-size: 20px !important;
       color: var(--text-color-off) !important;
       padding: 0px 12px !important;
       margin: 0px 0px 16px 0px !important;
     }
  .: |
    .card-header ha-icon-button {
      --card-mod-icon-color: var(--primary-color);
      {{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
    }

the apexchart mod works fine with a simple header without states:

however, when states are shown, like here:

my mod has this effect:

the issue is obvious: the states are in the header and are inside the margins/paddings…

would there be an obvious way to exclude those?

the only other way I could fix this would be to not show the header in the apex, and add it inside a stack/entities with a custom:button-card…

eg

type: custom:mod-card
card_mod: !include /config/dashboard/card_mods/stack_card_gap.yaml
card:
  type: vertical-stack
  cards:
    - type: heading
      card_mod:
        class: class-section-heading
      heading: Energie verbruik
      heading_style: title
      tap_action:
        action: navigate
        navigation_path: /ui-data/energie
    - type: custom:apexcharts-card

Functional, though awfully convoluted as you can see, so, for this challenge, I’d like to try the mod on the apex charts-card itself, and keep the card config to just the apexcharts with a mod

please have a look?

[Mariusthvdb (Marius)]

expanding the card_mod options for the new badge:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.meteoalarm_brabant_headline
visibility:
  - condition: state
    entity: binary_sensor.meteoalarm_brabant
    state: 'on'
card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          --mdc-icon-size: 24px;
          color: {{states('sensor.weer_alarm_kleur')}};
          --card-mod-icon: {{states('sensor.meteoalarm_icon')}};
        }
    .: |
       ha-card {
         border: 2px solid {{states('sensor.weer_alarm_kleur')}};
         border-radius: 24px;
       }

--card-mod-icon also works on the ha-state-icon

alerting the meteoalarm color a bit more:

card_mod:
  style:
    hui-entity-badge:
      $: |
        ha-state-icon {
          --mdc-icon-size: 24px;
          --card-mod-icon: {{states('sensor.meteoalarm_icon')}};
        }
    .: |
       hui-entity-badge {
        --ha-card-background: {{states('sensor.weer_alarm_kleur')}}
       }
       ha-card {
         border: 2px solid var(--primary-color);
         border-radius: 24px;
         animation: blink 2s ease infinite;
       }
        @keyframes blink {
          50% {opacity: 0.2;}
        }

[Ildar_Gabdullin]

Well, I am not using apexcharts.
Give me a SHORT example of this card to play with.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Give me a SHORT example of this card to play with.

haha, yes, well, that is the thing, no such thing as a short apexcharts card…

the show_states: true option. makes the states show in the header. maybe cut a few of them would make it shorter

type: custom:apexcharts-card
header:
  title: Apexcharts
  show: true
  show_states: true
series:
  - entity: sensor.luchtvochtigheid_woonkamer
  - entity: sensor.temperatuur_woonkamer

suppose this could work for testing purposes

[Ildar_Gabdullin]

I checked this.
The “states” thing is a part of a “header”.
Do not see obvious simple ways to colorize a “header” except “states”.
Ofc there are ways like “do not style the header, style the title” - but this needs playing with many properties → not worth it.
Suggest to use a separate header card…

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Suggest to use a separate header card…

check, that was my solution too. either way, it’s a lot of hassle really.

If not for the dynamic options of card-mod (templates) , I would consider doing away with all of those headers.
it is starting to be a burden on the frontend, especially with the modding of the badges now.
Views need a load and then settle, let all card-mods do their job, before ready for user…

[ausfas]

(post deleted by author)

[madjetey (Michael)]

Can anyone guide me on setting colors for light & dark mode? I’m missing a step or 2. Got it to work according to instructions above but not getting consistent results. Modifying the Metro theme but the background-color reference I created for off is (finally) behaving itself, on isn’t registering consistently at all. Using element inspector sometimes the color doesn’t change to the reference selected for on without reloading the page. If I color the card directly in yaml, the on color stays loaded in off mode for light or dark.

Example of the problem

One set of lights:

type: custom:vertical-stack-in-card
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: markdown
        content: |
          ### Master Bedroom
        card_mod:
          style: |
            ha-card {
              height: 100%;
              width: 250%
            }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: switch.security_booth_lights_l1
        icon: mdi:lightbulb-group
        show_name: false
        show_icon: true
        color_type: card
        aspect_ratio: 1/1
        styles:
          grid:
            - grid-template-areas: "\"i\" \"n\" \"s\""
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
          img_cell:
            - align-self: center
            - text-align: start
          name:
            - justify-self: center
            - font-weight: normal
          state:
            - justify-self: start
        state:
          - value: "off"
            styles:
              card:
                - color: SlateGrey
                - background-color: var(--switch-button-off-color) !important;
          - value: "on"
            styles:
              card:
                - color: White
                - background-color: var(--switch-button-on-color) !important;
      - type: custom:button-card
        color_type: blank-card
      - type: custom:button-card
        color_type: blank-card
      - type: custom:button-card
        entity: switch.security_booth_lights_l2
        icon: mdi:television-classic
        show_name: false
        show_icon: true
        color: auto
        color_type: card
        aspect_ratio: 1/1
        styles:
          grid:
            - grid-template-areas: "\"i\" \"n\" \"s\""
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
          img_cell:
            - align-self: center
            - text-align: start
          name:
            - justify-self: center
            - font-weight: normal
          state:
            - justify-self: start
        state:
          - value: "off"
            styles:
              card:
                - color: SlateGrey
                - background-color: var(--switch-button-off-color) !important;
          - value: "on"
            styles:
              card:
                - color: White
                - background-color: var(--switch-button-on-color) !important;
      - type: custom:button-card
        entity: switch.security_booth_lights_l3
        icon: mdi:air-conditioner
        show_name: false
        show_icon: true
        color: auto
        color_type: card
        aspect_ratio: 1/1
        styles:
          grid:
            - grid-template-areas: "\"i\" \"n\" \"s\""
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
          img_cell:
            - align-self: center
            - text-align: start
          name:
            - justify-self: center
            - font-weight: normal
          state:
            - justify-self: start
        state:
          - value: "off"
            styles:
              card:
                - color: SlateGrey
                - background-color: var(--switch-button-off-color) !important;
          - value: "on"
            styles:
              card:
                - color: White
                - background-color: var(--switch-button-on-color) !important;
view_layout:
  position: sidebar
card_mod:
  style: |
    ha-card {
     background: transparent !important;
     margin-top: 0px;
     #margin-left: 15px;
     #max-width: 450px;
    }

Relevant part of theme yaml

light:
  lovelace-background: var(--background-image)
  background-image: "center / cover no-repeat fixed url('/local/Metro_day.svg')"
  switch-button-off-color: "rgba(255,255,255,.55)"
  switch-button-on-color: "rgba(255,193,7,.75)"
dark:
  lovelace-background: var(--background-image)
  background-image: "center / cover no-repeat fixed url('/local/Metro_night.svg')"
  switch-button-off-color: "rgba(0,0,0,.55)"
  switch-button-on-color: "rgba(255,193,7,.75)"