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

[godfreym29]

I’ve worked out how to change the text, but just can’t fathom how to conditionally change the text colour…

type: entities
entities:
  - entity: input_number.heating_lounge_target_temperature
    name: Lounge Target Temperature
    icon: mdi:sofa
  - entity: input_boolean.heating_lounge_boost
    type: custom:multiple-entity-row
    name: Lounge Boost
    toggle: true
    state_color: true
    card_mod:
      style: |
        .entities-row div.entity:nth-child(1) div::before {
          color: orange;
          content: {%if is_state('switch.lounge_neo_standby','on') -%} "test on\A" {%- else -%} "test off\A" {%- endif %};
          line-height: var(--mdc-typography-body1-line-height, 1.5rem);
        }
        .entities-row div.entity:nth-child(1) div {
          color: transparent;
          line-height: 0px;
        }
    entities:
      - entity: switch.lounge_neo_standby
        name: Standby
      - entity: input_datetime.heating_lounge_boost_start
        name: start
      - entity: input_datetime.heating_lounge_boost_stop
        name: stop

[jeroenvdd89 (Jeroen)]

Hi lads,
I’ve tried to vertically align the content of my mushroomcar, but i can’t seem to do it:

type: custom:mushroom-template-card
primary: Spot
secondary: ''
icon: mdi:spotlight
entity: light.eetkamer_spot_midden
layout_options:
  grid_columns: 1
  grid_rows: 1
layout: vertical
fill_container: true
card_mod:
  style: |
    {% if is_state(config.entity,'on') %}
     :host {
       --ha-card-background: var(--blue-grey-color);
     }
    {% endif %}
    ha-card{
      border-radius: 0px;
      min-height:220px;
      vertical-align: middle;
      --card-primary-font-size: 46px !important;
      --card-primary-line-height: 46px !important;
    }
    mushroom-shape-icon {
        --icon-size: 90px;
    }

this strangly enough looks like this:

is there a way to lower the icon and text to the center?

[Mariusthvdb (Marius)]

fwiw, Ive added that exact yaml to my test dashboard, and it scrolls along unfortunately…

[jimz011 (Jim)]

@Mariusthvdb please check out this thread and try again.

position: sticky doesn't work

Someone had the same problem and tried my second code and it worked for him. Maybe it will help you.

[Mariusthvdb (Marius)]

yeah, well, tbh, I only tried this for testing purposes.

I’ve added your second yaml suggestion

@jimz011

- type: custom:layout-card
  cards:
    - type: markdown
      card_mod:
        style: |
          :host {
            position: sticky;
            top: 0;
            z-index: 1;
          }
      content: IS STICKY

only to try what you reported, and unfortunately that did not work in my regular view.

I cant use the config in the link with the stack-in-card:

type: custom:mod-card
card_mod:
  style: |
    :host {
      position: sticky;
      top: 0;
      z-index: 1;
    }
card:
  type: custom:stack-in-card
  cards: []

because I don’t use that custom card. For me personally, no need to start using it for the Sticky

as a matter of fact, I am also hoping to be able to delete the layout-card, in my quest to use as few custom cards as possible.

I moved to single cards masonry (default), or sections where possible, only using the layout card in those views where core track cards have unexplained gaps… or on views where I need the background to fill the full desktop view and show beyond the actual section space.

[jmfargas]

Does anybody know how to create a rule with card-mod to change the input[type=“range”] for a custom:slider-entity-row ? I need to add “pointer-events: none;”
This is the code I need to add with card-mod:

  card_mod:
    style: |
      input[type="range"] {
        pointer-events: none;
      }

But I don’t know where and how to add it…
Many thanks

[Mariusthvdb (Marius)]

so I didnt notice this before, but somehow the card_mod styling to this sensor entity is Not applied when I use the entity in a conditional row, when the styling is completely correct as a regular entity

Was this already noticed, and do we have a reason?

entities:
  - entity: sensor.gdacs_alerts
    card_mod:
      style: |
        :host {
          {% set alert = states(config.entity)|int(0) %}
          --card-mod-icon:
            {{'mdi:shield-check' if alert == 0 else 'mdi:alert'}};
          --card-mod-icon-color:
            {{'var(--ok-color)' if alert == 0 else 'var(--alert-color)'}};
        }
  - type: conditional
    conditions:
      - entity: binary_sensor.gdacs_alerts
        state: 'off'
    row:
      entity: sensor.gdacs_alerts
      card_mod:
        style: |
          :host {
            {% set alert = states(config.entity)|int(0) %}
            --card-mod-icon:
              {{'mdi:shield-check' if alert == 0 else 'mdi:alert'}};
            --card-mod-icon-color:
              {{'var(--ok-color)' if alert == 0 else 'var(--alert-color)'}};
          }

[Ildar_Gabdullin]

Marius, styles should be set for the conditional row, not for the inner row.

[Mariusthvdb (Marius)]

right, I found this now:

Card-mod - Add css styles to any lovelace card

Conditional row inside Entities card: Do not use ":host" here. type: vertical-stack cards: - type: entities entities: - input_boolean.test_boolean - type: entities entities: - sun.sun - type: conditional conditions: - entity: input_boolean.test_boolean state: 'on' row: entity: sun.sun icon: 'mdi:desk-lamp' name: Nählicht Lampe style: hui-simple-entity-row$: | hui-gene…

sorry, should have looked that up first…

update

however… I can make color: red work so that proves the right structure, but when doing:

  - type: conditional
    conditions:
      - entity: binary_sensor.gdacs_alerts
        state: 'off'
    row:
      entity: sensor.gdacs_alerts
    card_mod:
      style:
        hui-sensor-entity-row $: |
          hui-generic-entity-row {
            --card-mod-icon:
              {% set alert = states(config.entity)|int(0) %}
              {{'mdi:shield-check' if alert == 0 else 'mdi:alert'}};
            --card-mod-icon-color:
              {% set alert = states(config.entity)|int(0) %}
              {{'var(--ok-color)' if alert == 0 else 'var(--alert-color)'}};
          }

the card-mod-icon and -color are not effective.

needs more research…

so given Styles may NOT be applied to Conditional row/element · Issue #201 · thomasloven/lovelace-card-mod · GitHub my templates would seem fine. However, Ive found the config.entity is not seen but the conditional row apparently, and need to change to the actual entity hard coded:

  - type: conditional
    conditions:
      - entity: binary_sensor.gdacs_alerts
        state: 'off'
    row:
      entity: sensor.gdacs_alerts
    card_mod:
      style:
        hui-sensor-entity-row $: |
          hui-generic-entity-row {
            --card-mod-icon:
              {% set alert = states('sensor.gdacs_alerts')|int(0) %}
              {{'mdi:shield-check' if alert == 0 else 'mdi:alert'}};
            --card-mod-icon-color:
              {% set alert = states('sensor.gdacs_alerts')|int(0) %}
              {{'var(--ok-color)' if alert == 0 else 'var(--alert-color)'}};
          }

to get the icon and icon-color to change as I want them

made it a bit shorter with:

    card_mod:
      style:
        hui-sensor-entity-row $: |
          hui-generic-entity-row {
            {% set alert = states('sensor.gdacs_alerts')|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);
          }

too bad that config.,entity cant be used there, but if that is what it takes…

[Ildar_Gabdullin]

@Mariusthvdb

Ive found the config.entity is not seen but the conditional row apparently

config.row.entity

[svkoch]

color: {% if is_state('switch.lounge_neo_standby','on') %} green {% else %} red {% endif %} !important;

I think that should work

[sebbaT]

try this:

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.test-light-dimmer
    card_mod:
      style:
        ha-slider$: |
          div.container > input {
            pointer-events: none;
          }

[Mariusthvdb (Marius)]

would you believe after all these years, Ive never known about that…
was this ever mentioned in this thread at all?
might be worth an addition to your main post on the conditional row

for reference and completeness:

type: entities
title: Mod regular entity and same entity in a conditional row
entities:
  - entity: sensor.gdacs_alerts
    card_mod:
      style: |
        :host {
          {% set alert = states(config.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);
        }

  - type: conditional
    conditions:
      - entity: binary_sensor.gdacs_alerts
        state: 'on'
    row:
      entity: sensor.gdacs_alerts
    card_mod:
      style:
        hui-sensor-entity-row $: |
          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);
          }

[s_ockey (Steve)]

Looking for some assistance. I have used card mod on other dashboard but can’t get it working as desired with glance card. I am trying to reduce the white space to condense the height of the card. Here is the yaml and card showing no impact. Where am I going wrong?

[Mariusthvdb (Marius)]

not sure this will be the cause (didnt check the main post on Glance card), but its !important

[jmfargas]

@sebbaT Many thanks for your suggestion, unfortunately it doesn’t work ?
I’m not an expert at all about styles nor HASS, sorry. The following is a screen capture of the google Chrome inspector:

If I manually add “pointer-events: none;” as a declaration inside the input[type=“range”]{} it works…
I tried the following code, but it doesn’t work either:

        card_mod:
          style:
            ha-slider $: |
              div.container > input[type="range"] {
                pointer-events: none;
              }

Many thanks!

[sebbaT]

You need to have the custom:slider-entity-row within an entities card, or use custom:mod-card:

Within an Entities Card:

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.test-light-dimmer
    card_mod:
      style:
        ha-slider$: |
          div.container > input {
            pointer-events: none;
          }

Within Mod Card:

type: custom:mod-card
card:
  type: custom:slider-entity-row
  entity: light.test-light-dimmer
card_mod:
  style:
    slider-entity-row$:
      ha-slider$: |
        div.container > input {
          pointer-events: none;
        }

[f-zappa]

I need a hint - how to animate the icon within a tile card? I found a lot of examples for mushroom cards but not for the “vanilla” home assistant tile card.

[s_ockey (Steve)]

Thanks. I’ve tried removing the “important” but it hasn’t changed anything.

[Mariusthvdb (Marius)]

my post was not directed to removing the important, but instead, adding the ! and use !important.

Having said that, did you check the main post on styling the margins on the Glance cards in Ildars overview?