Cant seem to get custom card icon color to work right

Configuration Frontend
1

so i have custom card colors 3 colors
on off and unavailable

im using TPlink switchs and plugs
im finding it will change Blue for Else as long as the device is on or off but not unavailable…

now if i have a device thats unavaliable its supposed to turn Blue… but it doesnt it defaults to green.
but it will work if i change off to offf and then it turns blue… if its detectable…

is there something else i need to configure… or is it a bug or a glitch or something

ha1
ha11425×1033 40.3 KB

my card code is

type: entities
entities:
 
  - entity: sensor.b_modem_state
    name: Modem State
    icon: 'mdi:laptop'
    options: null
    style: |
      :host {
      --paper-item-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'offf' %}
        green
      {% else %}
        blue
      {% endif %}
      ;
      }  
  - entity: sensor.h_hot_water_tank_state
    name: House Hot Water Tank
    icon: 'mdi:water'
    options: null
    style: |
      :host {
      --paper-item-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'off' %}
        green
      {% else %}
        blue
      {% endif %}
      ;
      }   
  - entity: sensor.h_hot_water_tank_state
    name: House Hot Water Tank
    icon: 'mdi:water'
    options: null
    style: |
      :host {
      --paper-item-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'offf' %}
        green
      {% else %}
        blue
      {% endif %}
      ;
      }   
  - entity: sensor.b_outdoor_plug1_state
    name: outdoor plug 1
    icon: 'mdi:water'
    options: null
    style: |
      :host {
      --paper-item-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'off' %}
        red
      {% else %}
        blue
      {% endif %}
      ;
      }   
  - entity: sensor.b_outdoor_plug2_state
    name: outdoor plug 2
    icon: 'mdi:water'
    options: null
    style: |
      :host {
      --paper-item-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'offf' %}
        red
      {% else %}
        blue
      {% endif %}
      ;
      }   
  - entity: sensor.h_sauna_pump_state
    name: Sauna Pump state
    icon: 'mdi:water'
    options: null
    style: |
      :host {
      --paper-item-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'offf' %}
        red
      {% else %}
        blue
      {% endif %}
      ;
      }   
theme: christmas
title: Status
state_color: false
show_header_toggle: false

my sensor.yaml is

      h_sauna_pump_state:
        friendly_name: "Sauna Pump Status"
        value_template: "{{ states('switch.h_sauna_pump') }}"
        
      b_outdoor_plug1_state:
        friendly_name: "Plug1 Status"
        value_template: "{{ states('switch.outdoor_plug_1') }}"   
      b_outdoor_plug2_state:
        friendly_name: "Plug2 Status"
        value_template: "{{ states('switch.outdoor_plug_2') }}"

      h_hot_water_tank_state:
        friendly_name: "House Hot Water Tank Status"
        value_template: "{{ states('switch.h_hot_water_tank_switch') }}"
  ########################
  ### Modem Power Plug ###
  ########################
      b_modem_state:
        friendly_name: "Modem"
        value_template: "{{ states('switch.b_building_light') }}"

so not sure what else i need to add or look for… if there is a doc’s i need to read please send me to the right docs to figure the issue

2

Typo:

{% elif states(config.entity) == 'offf' %}`
                                   ^^^
3

nope wasnt typo i did that on purpose like i said
guess my dyslexia didnt explain it right

i stated Available AKA ON/OFF items work fine for Color reason u think its a typo it shows it as Unavailable so turns blue

i stated the the glich a bug etc or i need extra code
when an Actual Device is Actually Unavailable… as you can see Outdoor Plug 1 2 and Sauna Pump
are physically Unavailable… not Faked… you can see They are GREEN… not BLUE like they are supposed to be

so i wanted to know how do i fix it so it actually works… is there another Code to add in there.

as it Only works IF you fake a “unavailable” state it Should be
yellow = On
green = off
Blue = unavailable

but you can see it doesnt work… it only works when the Device is actually connected and you just fake the “other” or “unavailable” by changing “off” to “offf”

but when you actually unplug a Wifi Plug and let it goto “unavailable” state then it goes to green … and it goes green not by “off” i cant change it… so green over write s the Blue color

is there another card color statement i need to add to force it to stay blue since {% else %} does nothing it gets over written

you can see i also tried to do “unavailable” as red and it still forces it as green

4

Yeah sorry, I skipped ahead and missed that you did that deliberately.

I can’t access github at the moment, does card-mod support jinja templates?

I thought it was javascript templates but I could be wrong.

5

i dont know anything about this stuff… you guys are smarter then me…

i just try and get stuck and try to get help on here i still new at this stuff been using it since christmas and i still cant wrap my head around this stuff… so you know more then me… i cant even figure how to fix my remote_rpi_gpio or figure out this node red people talk about how is greater…

so i dont even understand templates 100% i still learning
sorry about that… i just noticed i couldnt get the blue state to work

i know i can get blue on a button-card? this works blue if it goes off line but the other one doesnt

cards:
  - type: 'custom:button-card'
    color_type: card
    icon: 'mdi:pump'
    name: Sauna Pump<br>Offline
    entity: switch.h_sauna_pump
    tap_action:
      action: toggle
    styles:
      card:
        - font-size: 20px
        - height: 150px
        - width: 145px
        - color_type: card
        - color: 'rgb(255,255,255)'
    state:
      - value: 'off'
        name: Sauna Pump <br>Off
        color: 'rgb(255, 0, 0)'
      - value: 'on'
        name: Sauna Pump <br>On
        color: 'rgb(0, 128, 0)'
      - value: unavailable
        name: Sauna Pump <br>Offline
        color: 'rgb(0, 0, 128)'

i struggle trying to figure this stuff out… i havent got a hang on it yet… i still working
and my dislexia doesnt help. and learning disability… as the docs dont help me with my issues or i dont see it in there what i looking for so i get confused…
one day ill be smart like you guys

but ya i dunno i figure the code i got help from a different user needed extra code if it actually goes offline

i been trying to trouble shoot and go through HA docs and see what i did wrong …

6

Go to the card-mod github page and look at the templating examples in the documentation. From a quick search here on the forum it does appear to use JavaScript instead of jinja.

7

ok i think i doing something wrong? and i dont know what jinja is nore how to tell between it and js…
so trying to follow the examples i do those before but didnt work… maybe you can tell me what i doing wrong
i tried this way but didnt work

  - entity: sensor.h_sauna_pump_state
    name: Sauna Pump
    icon: 'mdi:pump'
    card_mod:
      style: |
        :host {
        --paper-item-icon-color: 
        {% if states(config.entity) == 'on' %} 
          yellow
        {% elif states(config.entity) == 'off' %}
          red
        {% else %}
          blue
        {% endif %}
        ;
        }

i tried this way but didnt work

  - entity: sensor.h_sauna_pump_state
    name: Sauna Pump
    icon: 'mdi:pump'
    card_mod:
      style: |
        :host {
        --paper-item-icon-color: 
        {% if states(config.entity) == 'on' %} 
          yellow
        {% elif states(config.entity) == 'off' %}
          red
        {% else %}
        ha-card {
          --ha-card-background: teal;
          color: var(--primary-color);
        }
        {% endif %}
        ;
        }

what i doing wrong?
from there website it says
" NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen , but not e.g. conditional , entity_filter , vertical-stack , horizontal-stack , grid ."

does that mean it cant do conditional? like on off unavailable is that why its it cant detect unavailiable? or how should the code be written…
i just trial and error copying in different places in the if statements
as i dont 100% understand it… so i just guessing

8

@tom_l i couldnt find info from the page
i posted a bug but i really cant tell if its a bug or not nore if they help me since apparently that home assistant card mod page isnt a help page for card mod for home assistant.

so i not sure how to fix this… as i stuck in middle…
between is it a bug who can help me and if this is a javascript then how do i convert this code to javascript from jinja

i no better and more frustrated i tell ya lol take a break from it

9

so the guy got back to me on the card-mod github

and said unavailable icons probably use a paper color… which all this doesnt make sense

so if
–card-mod-icon-color
–paper-item-icon-color

doesnt work… and if these 2 things arent card-mod variables
what would be the fix?

10

It is not a bug. You are using jinja templates in card-mod and it only accepts JavaScript templates.

I can’t teach you javascript, as I barely scrape by using the available documentation, which I do not currently have access to. All I can suggest is that you search the forum and Google for help with JavaScript. Or wait patently and someone else may be able to help.

Also please see point 16 here.

11

ok i think i figure it out
–card-mod-icon-color:

tried different ways

1 Like