Me too. Changed to ha-card instead 
Ok - so after about 2 days on this and reading through all the great examples above (thank you IIdar) I have hit a road block with styling my input_select dropbox positioning. As you can see from the below image itās start position is 1) too far to the left 2) too wide. I can manually change in the inspector (element.style fields) but I can not figure out how to do it in my code. Reading up on CSS I dont believe Element.style is something I can edit; however I can not seem to find the parent elements for these valuesā¦or what else determines them.
Any help would be greatly appreciated - Im learning CSS slowly so my code below may not be elegantā¦I have also cut out a lot of code to make it easier to post here so its only the positioning and size of the dropdown box that I need assistance with.
type: entities
show_header_toggle: false
entities:
- type: custom:hui-element
card_type: picture-elements
image: /local/images/hardware/YamahaAVR_stretch.png
elements:
- type: custom:hui-element
card_type: entities
entities:
- entity: input_select.speakerlist
card_mod:
style:
hui-generic-entity-row:
$:
ha-paper-dropdown-menu:
$:
paper-menu-button:
$:
iron-dropdown: |
:host {
position: static !important;
}
style:
top: 54%
left: 21%
width: 30%
height: 20%
card_mod:
style:
.: |
:host {
--mdc-icon-size: 17px;
--paper-font-subhead_-_line-height: 9px;
--paper-font-subhead_-_font-size: 9px;
--paper-item-min-height: 0px;
}
.card-content {
padding-top: 5px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 0px;
}
******* EDIT - worked it out finally *********
for some time this function has not been activated, until a few weeks ago when the water pump was on the fan icon was spinning flashing yellow now it no longer works.
card_mod:
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('sensor.stato_pompa', 'on') %}
animation: rotation 2s linear infinite;
color: yellow;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
You posted your card_mod code but have not mentioned where this code is used.
this is the complete card code, as explained until recently it worked well
- type: state-icon
entity: sensor.flusso
title: pompa
state_color: true
style:
top: 80%
left: 24%
border: 'solid 3px rgba(100,100,100,0.3)'
border-radius: 20px
color: 'white'
transform: 'translate(-50%, -50%) scale(0.7, 0.7)'
'--paper-item-icon-active-color': yellow
'--paper-item-icon-color': grey
'--grey-icon-height': 2vw
'--grey-icon-width': 2vw
card_mod:
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('sensor.stato_pompa', 'on') %}
animation: rotation 2s linear infinite;
color: yellow;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Scroll down to the example with animation for the state-icon
If smth stopped working - check the examples first. HA is changing, examples are being updated (usually).
AFAIK, this started with .11, so recently is a matter of definition. Double check from here as well.
1 Like
seems the new iif templates Templating - Home Assistant are a perfect fit for these card_mod templates:
card_mod:
style: |
ha-card {
--paper-item-icon-color:
{% if states(config.entity) == 'off' %}
yellow;
{% elif states(config.entity) == 'on' %}
green;
{% else %}
gray;
{% endif %}
}
can become:
card_mod:
style: |
ha-card {
--paper-item-icon-color: {{is_state(config.entity,'off')|iif('yellow','green','gray')}}
}
4 Likes
Hello.
First of all, thank you for this amazing work and for the community that are always supporting some doubts and helping some newbies like me.
My doubt, isā¦ I want to change the color of the text of the power, depending on the value.
Iām trying to figuring out how to change or to compare the value, since iām using a flex-table with include global sensors and not a specify value.
My code, and result for better undestanding.
So how, to change values inside column 2 and 3 depending or comparing values? Thanks.
1 Like
Hello, Is there a way to change the colour of the icon for the light entity, but at the same time prevent it from dimming?
I want to have basically the same behaviour as for the switches. I am really struggling with templateā¦
This was so easy in the pastā¦
Hi there, iām in need of some help. Im hoping that using Card-mod i can change the postion and size of the lock symbol in the ālove-lock-cardā. Is this possible and how? TIA
Regardsā¦Marc
Found an interesting example of this just now. Scaling the Logitech Media Server interface with the material UI causes the right side of the header, and the entire footer, to ādisappearā. Iām guessing that these elements donāt follow the scale and are still acting like the frame is 100,000px tall/wide
What did you test/tried until now?
As far as I can see, this is a quite simple css assigned to ha-state-icon, e.g.
color: rgb(255, 190, 87);
filter: brightness(74.6%);
and should be directly to set - without test.
using:
type: entities
title: Z-wave devices
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
}
.card-content {
max-height: 500px;
overflow-y: scroll;
}
entities:
- type: custom:decluttering-card
template: zwave_device
variables:
- name: Ikea hub
- id: ikea_hub
- type: custom:decluttering-card
template: zwave_device
variables:
- name: Stookhok
- id: stookhok
etc
etc
I get a beautifully scrolling list of all Zwave devices, in the style I have set throughout my config:
however, and this is a first, when scrolling that list, I can see the fold labels shine through my header:
@Ildar_Gabdullin since we have been discussing the new fold-entity-row today (which is employed here too), would you know how to mitigate this?
I can add a margin of 8px to the bottom the header, but then we see the top divider of the first foldā¦
btw if I carefully wiggle the mouse pointer, I can also see a horizontal scrollbarā¦
How can I reposition a whole entities card row to the right (āmargin-left: 20 px;ā for example)?
I want the entity icon to start where normally the text starts so move everything a bit to the right.
Other trick (Iām not aware of) would be to place an mdi icon within the text part of an entities card row - donāt think thatās possible.
I tried this:
type: picture-elements
image: /local/lovelace/Kitchen_blur.jpg
elements:
- type: state-label
entity: sensor.blank_blank
title: null
prefix: Kitchen
attribute: null
style:
transform: translate(0%,0%)
top: 70%
left: 2%
font-size: 1.4vw
color: white
text-shadow: 1px 1px 1px rgba(0,0,0,0.5)
- type: state-label
entity: climate.climate_kitchen
icon: mdi:radiator
prefix: 'š” '
suffix: 'Ā°C'
attribute: temperature
style:
transform: translate(0%,0%)
left: 2%
top: 81%
font-size: 0.9vw
color: rgb(190,190,190)
- type: state-icon
entity: light.cookinglights
icon: mdi:spotlight
style:
transform: translate(0%,0%)
top: 72%
right: 4%
'--paper-item-icon-color': white
'--paper-item-active-icon-color': yellow
When light goes on the icon changes to the colour reflecting its brightness and temperature, I really donāt like that. All I want is one colour for āonā and āoffā state.
type: vertical-stack
title: Left padding
cards:
- type: entities
entities: &ref_entities
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: entities
entities: *ref_entities
card_mod:
style: |
.card-content {
padding-left: 64px;
}
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
hui-generic-entity-row {
padding-left: 24px;
}
- entity: sun.sun
card_mod:
style: |
hui-generic-entity-row {
padding-left: 48px;
}
I do not know how to add an icon - but you can add an image:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content:before {
background: url("/local/images/Stan_small.png");
content: "----";
color: transparent;
background-size: cover;
}
Look at this card:
- type: entities
title: Header
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
.card-header {
background-color: rgba(255,0,0,0.2);
}
.card-content {
background-color: rgba(0,255,0,0.2);
}
It is clear that āheaderā & ācard-contentā areas are overlapping.
With āmargin-top: 0pxā they are not:
- type: entities
title: Header
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
.card-header {
background-color: rgba(255,0,0,0.2);
padding-top: 0px;
padding-bottom: 0px;
}
.card-content {
background-color: rgba(0,255,0,0.2);
margin-top: 0px;
overflow-y: scroll;
overflow-x: hidden;
max-height: 300px;
margin-bottom: 16px;
}
a yes, thats a nice variant too. It has the same effect as my margin in the header adding the 8px to the bottom.
However, because all of my entities are folds, the card shows the top divider. which is what I ws trying to prevent, and have it look like the first screenshot above
guess that cant be done