🔹 Card-mod - Super-charge your themes!

I am experiencing a strange behaviour for my entities cards.

When I have an entities card with my climate entities, the card is not themed properly for the climate entities with state “unknown” (you can see becaue temperature is “0” instead of the minimum 4.5).

Can anybody think of a reason why?
As soon as entities are no longer in state “unknown”, the mod works again.

hm… maybe, someone can give me a short hint, what’s wrong with this mod?

cards:
  - type: tile
    entity: lock.eingang_treppenhaus_caina_locked_all
    vertical: true
    name: Beidseitig
    card_mod:
      style: |
        ha-card {
          {% if is_state('config.entity', 'locked') %}
            --tile-color:var(--red-color) !important;
          {% elif is_state('config.entity', 'unlocking') %}
            --tile-color:var(--amber-color) !important;
          {% elif is_state('config.entity', 'locking') %}
            --tile-color:var(--amber-color) !important;
          {% elif is_state('config.entity', 'unlocked') %}
            --tile-color:var(--green-color) !important;
          {% endif %}
        }

the LOCK should be shown in green when unlocked - and red, when it is locked.
The template itself is working as expected, based on the template editor:

          {% if is_state('lock.eingang_treppenhaus_caina_locked_all', 'locked') %}
            --tile-color:var(--red-color) !important;
          {% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'unlocking' or 'locking') %}
            --tile-color:var(--amber-color) !important;
          {% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'locking') %}
            --tile-color:var(--amber-color) !important;
          {% elif is_state('lock.eingang_treppenhaus_caina_locked_all', 'unlocked') %}
            --tile-color:var(--green-color) !important;
          {% endif %}

RESULT
--tile-color:var(--green-color) !important;

when switching the lock, the color will be set to amber, as expected - but the state locked / unlocked are switched…
grafik
grafik
grafik
grafik

with the card mod, I want to overwrite the current theme-settings for the LOCK states, which are set like this:

  state-lock-jammed-color: '#DA1A32' # Ruby
  state-lock-locked-color: var(--green-color) #'#4CAF50' # Green
  state-lock-pending-color: var(--amber-color) # Orange
  state-lock-unlocked-color: var(--red-color) #'#F44336' # Red

how could anyone, if you dont show the mod you are trying to use?

It seemed like a quite general problem, but of course happy to show the mod :slight_smile:

      card-mod-row: |
        hui-generic-entity-row {
          {% if "script" in config.entity -%}
            color: white;
            --mdc-theme-primary: rgba(255,255,255,1);
          {% elif "climate" in config.entity and state_attr(config.entity, "temperature") and state_attr(config.entity, "temperature") > 4.5 -%}
            color: white;
          {% elif states(config.entity) == "on" -%}
            color: white;
          {% elif states(config.entity) == "off" -%}
            color: grey;
            font-style: italic;
          {% elif states(config.entity) == "unavailable" -%}
            color: dimgrey;
            font-style: italic;
          {% else -%}
          {% endif -%}            
          height: 2em;
        }

As you can see, none of the state conditions are met,so the minimum should be the changed spacing. But that is not applied either.

first of all, as I posted somewhere above, I would not recommend doing these complex templates on any available row in your HA frontend… it will be very costly.

simply create 2 mods for script and climate, and apply those in the dashboard cards. It will be much cleaner, cheaper for the system, and more robust. it would require 1 time mod in an auto-entities card on those domains…

but, if you still would want to make life difficult ;-), Id suggest taking it step by step.
first, take out the template and create a fixed mod for lets say a script entity. see if it works. for both the color and the font-style individually. or the height for that matter.

then, 1 step further, template the state for that script entity and see if things still work. If yes, then open up the template for the various domains.

btw it seems that the order in your template is incorrect, and the on/off should be nested inside the script (unless your also trying to mod things on climate being on/off)

honestly, again, why make it so difficult, while you simply use the theme colors HA provides natively? Do you really want to color all the names, instead of the icons?

1 Like

why not simply use other state-colors in your theme (since you apparently already use those, that would be most robust and supported from core)

Thank you for your thoughts :slight_smile:

I am styling all entities cards no matter how they are created or what they contain. Even slider-entity-rows.

I wanted to reduce the spacing between rows and I wanted to change color and style of the entity name, the icon and the state. The combination gives perfect visible distinction between entity states.

The alternative would have been to style all entities cards manually depnending on what the content is. That is more work and more code per card that I find less convenient to alter due to the way the editor looks on mobile devices.

I have not noticed any system lags. Of course I am not checking the loads as such ao cannot comment if the cpu usage haa increased or not. But I observed no impact so far.

It also seems irrelevant which part of the code I remove as every single part is working. I can see it working on all my different cards.
Only if I restart HA and the climate state is “unknown” the card is not modded. As soon as the state is no longer unknown, the mods work.

Hey,
thanks - sorry … I really forgot to mention, that I need the themed color schemas for other lock entities :slight_smile:

by default, the schema is correct - unlocked should be red, because then it needs my attention (house, car-door, etc)…

But for other cases, like the cat flap, the “default” and normal state should be unlocked.

btw: I got it working by replacing the config.entity with the actual entities name, like I’ve used it in the template section.
I don’t really see why it did not work here - but in all other cases where I change the tiles color by using config.entity:thinking:

:frowning: …seems like card-mod v3.4.0, broke both sidebar-yaml and root-yaml in Theme

yes so it seems, I’ve opened an issue for that, see 3.4.0 breaks mods on card-mod-sidebar-yaml: ? · Issue #330 · thomasloven/lovelace-card-mod · GitHub

1 Like

and release 3.4.1 fixes the sidebar mods. thanks Thomas!

1 Like

Can I use card-mod to hide a single view from the header (so not the sidebar, but the header that shows my views)

Just hide the corr. button.

I want the custom button card (the icon)aligned on the right.
How can I achieve this with card mod ?

Hi, having a bit of trouble with an addon I wrote called card-alexa-alarms-timers. The way it’s written, it redraws the whole card every second. This is causing a flickering effect that wasn’t there a few weeks ago, so we think it might be due to the 3.4.0 or 3.4.1 update. My github for the addon is here: GitHub - Kethlak/card-alexa-alarms-timers: Card for Alexa Timers and Alarms

I am using a theme file for displaying this on my device, and the part of it that uses card-mod looks like this:

dark-theme:
  card-mod-theme: dark-theme
  card-mod-root: |
    * {
        background-color: #000000;
        color: #ffffff;
    }
    app-header {
        background-color: #660000;
    }
  card-mod-card: |
    ha-card.alexa-timers *, ha-card.alexa-alarms *, ha-card.alexa-alarms-timers * {
      font-size: 60px;
      line-height: 80px;
      transition: none !important;
    }
    ha-card.card-printer * {
        text-align: center;
        font-size: 60px;
        line-height: 80px;
        transition: none !important;
    }
    ha-card * {
        background-color: #000000;
        transition: none !important;
        border: 0 none;
    }
    ha-card {
        border: 0 none;
    }

Is this syntax still valid? Am I doing something wrong? The transition section was added to prevent the whole thing from resizing every second. Maybe there’s a better way to handle that?

Hey guys.
I tried to resize the moon icon. It’s an image from a template sensor. How can I resize it (same size as the other icons)?

Is ist a state badge?

@Faecon Can you post your code? It’s helps me debug faster. :bug:

… and use the right topic. I feel, that it is not related to a theme.

title: "Home"
path: "home"
cards:
  - type: 'custom:button-card'
    template: card_title
    name: ""

###################
## CHIPSbovenaan ##
###################  


    ###################
    ## weer          ##
    ###################  

  - type: 'custom:button-card'
    template: card_title
    name: ""

  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: chip_temperature
        variables:
          ulm_chip_temperature_outside: sensor.outdoor_temperature
          ulm_chip_temperature_inside: sensor.indoor_temperature
          ulm_chip_temperature_weather: weather.forecast_home
        tap_action:
          action: navigate
          navigation_path: weer

    ###################
    ## zonnepanelen  ##
    ###################  

      - type: 'custom:button-card'
        template: chip_mdi_icon_state
        variables:
          ulm_chip_mdi_icon_state_entity: sensor.p1_meter_5c2faf04a1f2_active_power
          ulm_chip_mdi_icon_state_icon: mdi:lightning-bolt-circle
        styles:
          icon:
            - color: >
                [[[ 
                  let state =  states['sensor.p1_meter_5c2faf04a1f2_active_power'].state
                  if(parseFloat(state) > 0 ){
                    return 'rgb(200, 62, 77)' }
                  return 'rgb(244, 184, 96)'
                ]]] 
        tap_action:
          action: navigate
          navigation_path: zonnepanelen          

    ###################
    ## gas           ##
    ###################  

      - type: "custom:button-card"
        template: chip_mdi_icon_state
        variables:
          ulm_chip_mdi_icon_state_entity: sensor.propaanprijs
          ulm_chip_mdi_icon_state_icon: mdi:gas-burner
        styles:
          icon:
            - color: rgb(128, 223, 255)
        tap_action:
          action: navigate
          navigation_path: propaan   

    ###################
    ## allesuit      ##
    ###################  

      - type: 'custom:button-card'
        template: chip_navigate
        variables:
          ulm_chip_navigate_path: onoff
          ulm_chip_navigate_icon: mdi:radiobox-indeterminate-variant
          ulm_chip_navigate_icon_color : rgb(255, 255, 255)

I am also not sure it is theme related or card-mod related :face_with_raised_eyebrow:

i was thinking of adding "alignment: end " on the last chip, but that does not work

I’ve mixed a lot of card types with each other and had alignment issues. I’ll give it a look.