A tip. If you happen to have card-tools installed, you can type cardTools.lovelace.config into your browser console to see what lovelace_gen actually generates.
Well, that is very useful!
I created the simplest view I could that uses this āproblemā card.
The console returns this for the style:
style: "#states {āµ padding: 0px 16px;āµ}āµ:host {āµ --paper-item-icon-color:āµ {% set zone = " 1 " %} āµ āµ {% if states('timer.irrigation_zone' ~ zone ~ '_timer') == 'idle' %}āµ var(--paper-item-icon-color)āµ {% else %}āµ var(--paper-item-icon-active-color)āµ {% endif %}āµ āµ ;āµ}āµ"
-
I thought maybe those leading and trailing spaces might be the problem but using
trimdidnāt help:
{% raw %} {% set zone = {% endraw %} "{{ zone }}" {% raw %} | trim %} {% endraw %} -
In any case , I might be using it incorrectly but no matter what I do, I cannot get it to show anything other than
{% set zone = " 1 " %}
Even if I hard code something else or pass it a differentlovelace_genvariable. The console seems āstuckā in some way. Is there a way to refresh the console?
I realise this is all getting a bit esoteric so understand if you donāt want to delve into it any further.
But if you do have any further hintsā¦
For reference here is my exact config:
style: |
#states {
padding: 0px 16px;
}
:host {
--paper-item-icon-color:
{% raw %} {% set zone = {% endraw %} "{{ zone }}" {% raw %} | trim %} {% endraw %}
{% raw %}
{% if states('timer.irrigation_zone' ~ zone ~ '_timer') == 'idle' %}
var(--paper-item-icon-color)
{% else %}
var(--paper-item-icon-active-color)
{% endif %}
{% endraw %}
;
}
Just in case anyone is following this and caresā¦
I revisited it and got it working with a simple restructuring.
:host {
{% raw %}
{% set id = {% endraw %} {{ id }} {% raw %} %}
{% if is_state('timer.my_timer' ~ id, 'active') %}
--paper-item-icon-color: var(--paper-item-icon-active-color);
{% endif %}
{% endraw %}
;
}
What am I missing here?
Iām trying to build a touch panel that covers the whole viewport but fails. Still getting a vertical scrollbar after trying to fix it with mod-card
views:
- icon: 'mdi:lightbulb-on'
panel: true
path: home_menu
title: Home Menu
badges: []
cards:
- type: 'custom:mod-card'
style: |
ha-card {
height: calc(100vh - 120px);
width: auto;
}
card:
cards:
- cards:
- image: >-
https://i.pinimg.com/originals/cc/a8/ea/cca8ea85707cf5a89087e2d50518fb1e.jpg
tap_action:
action: navigate
navigation_path: /lovelace/hallway_view
type: picture
- image: >-
https://imagineerremodeling.com/wp-content/uploads/2016/12/Fantastis-Shabby-Chic-Bathroom-Ideas-in-House-Remodel-Ideas-With-Shabby-Chic-Bathroom-Ideas-256x256.jpg
tap_action:
action: navigate
navigation_path: /lovelace/bathroom_view
type: picture
- image: >-
https://i.pinimg.com/474x/2f/15/89/2f1589e121b20aa7200fd409c4e9391e.jpg
tap_action:
action: navigate
navigation_path: /lovelace/livingroom_view
type: picture
type: horizontal-stack
- cards:
- image: >-
https://cdn131.picsart.com/320540697272201.jpg?type=webp&to=crop&r=256
tap_action:
action: navigate
navigation_path: /lovelace/bedroom_view
type: picture
- image: >-
https://imagineerremodeling.com/wp-content/uploads/2017/10/Kitchen-256x256.jpg
tap_action:
action: navigate
navigation_path: /lovelace/kitchen_view
type: picture
- image: >-
https://i.pinimg.com/originals/1e/e8/fe/1ee8fe4c8d40f29179736fc0c6361251.jpg
tap_action:
action: navigate
navigation_path: /lovelace/hobbyroom_view
type: picture
type: horizontal-stack
type: vertical-stack
good morning thereās a problem with 107.1 version of HA and card-mod?I have a problem with picture eglance, with 106 work perfectly this is my configuration:
- type: custom:mod-card
style: |
ha-card {
background: rgba(0, 0, 0, 0.7);
border-radius: 25px;
border: solid 3px rgb(255,32,122);
color: rgb(255, 32, 122);
--paper-item-icon-color: rgb(255, 32, 122);
}
card:
type: picture-glance
title: Magic Mirror
entities:
- switch.magic_mirror
- switch.standby
state_image:
"on": /local/magicmirror.jpg
"off": /local/magicmirroroff.jpg
entity: switch.magic_mirror
visit this
ok thanks this is a workaround momentaryā¦but i think the problem is in the custom component, itās true?i think he need updating?
Hello,
Iāve been experimenting with customizing cards for a while now. Card-Mod is a very nice and useful plugin. recently i have set a dark theme and some icons are now less readable. Iām trying to change the icon color but with no luck yet.
How can i change the color of these icons?
Here is the code and a preview of the card:
card:
columns: 3
show_name: true
type: glance
filter:
include:
- entity_id: sensor.avalex_pmd
- entity_id: sensor.avalex_gft
- entity_id: sensor.avalex_papier
sort:
attribute: Sort-date
method: attribute
numeric: true
type: 'custom:auto-entities'
Hi
Trying hard to change the font size, margin, padding of an input_datetime element. I wonder if anyone could shed some hint on how to achieve my goal. I would like to reduce the size to better fit my phone screen (see image). Anyone did something similar ??
entities:
- entity: input_datetime.modetect_l0_sdb
icon: 'mdi:motion-sensor'
name: Salle de bain sous-sol
secondary_info: last-changed
TIA
I have similar setup. You donāt need your input_datetimes to be editable, do you?
If you donāt, donāt expose them in fronted. If you really need to, wrap them in template_sensors.
To sum it up: donāt think you need all the information in one place (provided you show that last_changed) especially on a small screen so change your UI design.
Hereās what I have as a main card
and this is a conditional card I display when Debug is enabled (as you can see, no input_datetimes, theyāre all in HA only).
Hope that helps.
@thomasloven Iāve recently started using card-mod and would be grateful if you could explain me something.
I want to hide entityās state badge. I can do that when my entity is in Entities card:
type: entities
entities:
- entity: automation.ventilation_1st_floor_bathroom_extractor_fan_turn_on_by_humdity_threshold
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
but it doesnāt work if my entity is inside fold-entity-row:
type: entities
entities:
- type: custom:fold-entity-row
open: true
head:
type: section
label: test
entities:
- entity: automation.ventilation_1st_floor_bathroom_extractor_fan_turn_on_by_humdity_threshold
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
What am I doing wrong here?
Are you using the latest versions of both?
fold-entity-row: 1.0.1 (btw, you use numbers instead of 1.0.1 on Github - tough)
card-mod has no version in console but file size is the same as the latest release.
Important message
Since this is popping up more and more here, in discord and on github let me make a clarification to everyone:
Do not use mod-card unless absolutely necessary.
mod-card is the final, all-other-options-exhausted, Iām-about-to-cry-it-must-be-possible-somehow, last resort if nothing else works.
The first line under the āUsageā seciton of the readme states
This is not a new card. Instead it changes the way pretty much any other card works .
That means it should not be used as a card, I.e. if you write type: followed by anything other than the type of the card you actually want to display youāre likely doing it wrong.
Of course, mod-card wouldnāt exist unless there were some cases where it was in fact needed. However, while the list in the readme says āamong otherā, itās actually pretty darn exhaustive.
And even for the cards in that list, itās not necessary most of the time, and not in the way that you think (mod-card is for things like adding a border around an entire stack of cards. If you want to mod the cards in the stack - donāt use mod-card.)
Do not use mod-card unless absolutely necessary.
3 Likes
I donāt really know if it is OK to ask here for advice about styling something very specific but honestly, when else can we do at the moment except prettify our UI?
So,
Thanks to the guidance from @thomasloven a few posts up I donāt have a problem with the template side of things but I canāt find what element I need to use in style to change the icon based on the state of an input boolean. Can anyone help please?
Itās a custom:multiple-entity-row
It is in an entities card which is in turn in a vertical stack
Iām successfully changing the icon colour with this, so the template will be similar:
style: |
:host {
{% raw %}
{% set schedule = {% endraw %} {{ schedule }} {% raw %} %}
{% if states('input_boolean.heating_downstairs_schedule' ~ schedule ~ '_active') == 'on' %}
--paper-item-icon-color: rgb(255, 165, 0);
{% elif states(config.entity) == 'on' %}
--paper-item-icon-color: var(--accent-color);
{% else %}
color: var(--secondary-text-color);
--paper-item-icon-color: var(--secondary-text-color);
{% endif %}
{% endraw %}
;
}
Are you trying to change the icon itself, i.e. what symbol is displayed?
That canāt be done with card-mod, Iām afraid.
I was yes,
But never mind.
could you describe us your goal?
Yes, I want the āŖ mark to go down