And the “rotated icon” is not the same as the “rotating icon”.
I am talking about helper classes
yes, so was I?
flipping the icon is easy in Lovelace, but not possible in custom-ui javascript using the helper class (as far as I have been able to establish)
thanks!
You were right, multiple entity row is able of doing this in a simpler way
worked out like this:
- type: 'custom:multiple-entity-row'
entities:
- entity: switch.sonoff_10xxxe2
toggle: true
icon: 'mdi:coach-lamp'
name: false
state_color: true
tap_action:
action: toggle
styles:
width: 40px
text-align: center
- entity: switch.sonoff_10xxxx2
toggle: true
icon: 'mdi:globe-light'
name: false
state_color: true
tap_action:
action: toggle
styles:
transform: rotate(180deg)
width: 40px
text-align: center
entity: switch.sonoff_10xxxx3
toggle: true
icon: 'mdi:grass'
name: Frente
show_state: false
Note that “multiple-entity-row::styles” can be used to rotate only a “secondary” entity’s icon, not a “primary” one.
1 Like
Hello,
card-mod stopped working for me a few weeks ago, when I updated from the 2.x release to 3.x
The logs give the following error:
ERROR (MainThread) [frontend.js.latest.202103026] https://smarthome.viknyaos.com:8321/hacsfiles/lovelace-card-mod/card-mod.js:1:1 Uncaught SyntaxError: Identifier 's' has already been declared
Fold-entity row and Lovelace swipe navigation also give the same error, subsitution “identifier ‘s’” as another single letter. (n, l, etc.)
Refreshing the page a dozen or so times will eventually lead to everything working, but then fail the next dozen times the page is loaded. So it’s not a consistent bug.
HomeAssistant version 2021.3.3
Side by side image below:
And my lovelace config:
background: center / cover no-repeat url("/local/background-15.gif") fixed
#swipe_nav:
#wrap: false
#animate: swipe
#prevent_default: true
#swipe_amount: 20
style: &disarmedStatusStyle |
ha-card {
background-color: rgba(0,255,0,1);
background-image: url("/local/cardbackK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 20pt;
text-align: center;
}
style: &armedStatusStyle |
ha-card {
background-color: rgba(255,0,0,1);
background-image: url("/local/cardbackK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 20pt;
text-align: center
}
style: &windowDoorOpenStatusStyle_auto-entities |
ha-card {
background-color: rgba(255,255,0,1);
background-image: url("/local/cardbackK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.card-header {
font-size: 20pt;
text-align: center;
}
style: &cardStyle |
ha-card {
background-image: url("/local/cardbackK.png");
border: solid 2px rgba(100,100,100,0.3);
background-color: rgba(50,50,50,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 3px 3px rgba(0,0,0,0.4);
color: #999999;
}
decluttering_templates:
scene-button:
card:
type: custom:button-card
label: '[[label]]'
lock:
enabled: true
unlock: hold
show_label: true
show_entity_picture: true
entity_picture: '[[entity_picture]]'
aspect_ratio: 1/1
color_type: card
color: rgba(50, 50, 50, 0)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.movie_mode
option: '[[option]]'
styles:
entity_picture:
- border-radius: 50%
- height: 100%
- width: 75%
label:
- font-size: 14x
card:
- box-shadow: none
state:
- operator: template
value: >
[[[
return states['input_select.movie_mode'].state == '[[option]]'
]]]
color: '#ffffcc'
styles:
label:
- color: '#000000'
light_button_toggle:
card:
type: entity-button
style: *cardStyle
entity: '[[entity]]'
tap_action:
action: toggle
light_button_more_info:
card:
type: entity-button
style: *cardStyle
entity: '[[entity]]'
tap_action:
action: more-info
aux_sensor_card_vertical:
card:
type: custom:button-card
entity: '[[entity]]'
icon: 'mdi:[[icon]]'
show_state: true
show_name: false
#show_icon: true
layout: icon_state
tap_action:
action: more-info
styles:
state:
- font-size: 20px
- color: '#999999'
card:
- padding: 0px 0px 0px 0px
style: |
ha-card {
background-color: rgba(50, 50, 50, 0);
box-shadow: 0px 0px;
}
temp_humidity_stack:
card:
type: entities
show_header_toggle: false
title: '[[title]]'
style: |
ha-card {
background-image: url("/local/cardbackK.png");
border: solid 2px rgba(100,100,100,0.3);
background-color: rgba(50,50,50,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 3px 3px rgba(0,0,0,0.4);
color: #999999;
padding: 0px 0px 0px 0px;
}
.card-header {
padding: 16px 16px 8px 16px;
}
entities:
- type: custom:hui-vertical-stack-card
cards:
- type: custom:decluttering-card
template: aux_sensor_card_vertical
variables:
- entity: '[[temperature]]'
- icon: thermometer
- type: custom:decluttering-card
template: aux_sensor_card_vertical
variables:
- entity: '[[humidity]]'
- icon: water-percent
alarm_sensor_status:
card:
type: custom:auto-entities
show_empty: false
card:
type: glance
title: "Alarm Sensors Detected:"
columns: 3
show_state: false
style: *windowDoorOpenStatusStyle_auto-entities
filter:
include:
- group: group.zigbee_alarm_sensors
state: "on"
options:
tap_action:
action: navigate
navigation_path: /lovelace/security/
- entity_id: binary_sensor.*z*
state: "on"
options:
tap_action:
action: navigate
navigation_path: /lovelace/security/
- entity_id: binary_sensor.refrigerator_door
state: "on"
alarm_status:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: alarm_control_panel.home
state: "disarmed"
card:
type: markdown
title:
content: System Disarmed
style: *disarmedStatusStyle
- type: conditional
conditions:
- entity: alarm_control_panel.home
state: "armed_away"
card:
type: markdown
title:
content: System Armed
style: *armedStatusStyle
views:
- title: Home
path: default_view
icon: mdi:home
badges: []
cards:
- type: custom:decluttering-card
template: alarm_status
- type: custom:decluttering-card
template: alarm_sensor_status
- type: horizontal-stack
cards:
- card: null
entities:
- entity: device_tracker.nicholas_phone_ping
- entity: device_tracker.pixel_3_xl
entity: group.nicholas_device_tracker
image: /local/njpic.png
state_filter:
not_home: grayscale(90%) blur(2px)
title: Nicholas
type: picture-glance
style: *cardStyle
- card: null
entities:
- entity: device_tracker.lesley_phone_ping
- entity: device_tracker.samsung_sm_g955u
entity: group.lesley_device_tracker
image: /local/lbpic.png
state_filter:
not_home: grayscale(90%) blur(2px)
title: Lesley
type: picture-glance
style: *cardStyle
- type: weather-forecast
entity: weather.dark_sky
name: Home
style: *cardStyle
show_forecast: false
- type: entities
style: *cardStyle
show_header_toggle: false
title: Volume
entities:
- type: 'custom:slider-entity-row'
entity: media_player.living_room_speaker
- type: 'custom:slider-entity-row'
entity: media_player.kitchen_speaker
- type: entities
style: *cardStyle
show_header_toggle: false
entities:
#- switch.nursery_humidifier
#- type: divider
- switch.bedroom_fan
- switch.nursery_humidifier_switch
- input_boolean.night_mode
- input_boolean.alarm_clock
- type: custom:time-picker-card
style: |
ha-card {
background-color: rgba(50,50,50,0.0);
color: #999999;
}
entity: input_datetime.wakeup_time
layout:
embedded: true
name: inside
align_controls: right
- type: custom:fold-entity-row
head:
type: section
label: Night Mode Options
entities:
- input_boolean.night_mode_nicholas_lamp
- input_boolean.night_mode_lesley_lamp
- input_boolean.night_mode_fan
- input_number.fan_delay
#- input_boolean.night_mode_tv_news
- input_boolean.night_mode_radio_news
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.lesley_lamp
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.nicholas_lamp
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.back_porch
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.square_standing_lamp_light
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.window_lamp
#- type: custom:decluttering-card
#$template: light_button_toggle
#variables:
#- entity: light.front_porch
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.laundry_room_light
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.kitchen_lights
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.coffee_table
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.mantle
- type: custom:gap-card
- type: custom:decluttering-card
template: light_button_toggle
variables:
- entity: light.nursery_lamp
- type: entities
title: Color Scenes
show_header_toggle: false
style: *cardStyle
entities:
- type: custom:hui-vertical-stack-card
cards:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: scene-button
show_entity_picture: false
variables:
- label: Reset
- option: Normal
- entity_picture: /local/scenes/off.jpg
- type: custom:decluttering-card
template: scene-button
variables:
- label: Watermelon
- entity_picture: /local/scenes/watermelon.gif
- option: Watermelon
- type: custom:decluttering-card
template: scene-button
variables:
- label: Blue & Red
- option: "Blue & Red"
- entity_picture: /local/scenes/blue_red.jpg
- type: custom:decluttering-card
template: scene-button
variables:
- label: Arctic
- option: Arctic
- entity_picture: /local/scenes/arctic.jpg
- title: Security
path: security
icon: mdi:shield-home
badges: []
cards:
- type: custom:decluttering-card
template: alarm_status
- type: entities
title: Actions
show_header_toggle: false
style: *cardStyle
entities:
- type: call-service
action_name: Disarm/Clear Alarm
icon: mdi:home
name: Disarm/Clear Alarm
service: alarm_control_panel.alarm_disarm
service_data:
entity_id: alarm_control_panel.home
- type: call-service
action_name: Arm Away
icon: mdi:security
name: Arm Away
service: script.turn_on
service_data:
entity_id: script.arm_away
- type: custom:logbook-card
entity: alarm_control_panel.home
title: Alarm History
style: *cardStyle
max_items: 4
state_map:
- label: Armed
value: armed_away
- label: Disarmed
value: disarmed
show:
duration: false
end_date: false
- type: vertical-stack
cards:
- type: custom:auto-entities
card:
type: entities
title: Alarm Sensors - ON
style: *cardStyle
show_header_toggle: false
#secondary_info: last-changed
filter:
include:
- group: group.zigbee_alarm_sensors
state: "on"
- entity_id: binary_sensor.*z*
state: "on"
- type: custom:auto-entities
card:
type: entities
title: Alarm Sensors - OFF
style: *cardStyle
show_header_toggle: false
filter:
include:
- group: group.zigbee_alarm_sensors
state: "off"
- entity_id: binary_sensor.*z*
state: "off"
- type: entities
title: Status
show_header_toggle: false
style: *cardStyle
entities:
- sensor.home_keypad
- type: call-service
action_name: "* Key"
icon: mdi:security
name: "* Key"
service: envisalink.alarm_keypress
service_data:
entity_id: alarm_control_panel.home
keypress: "*"
- sensor.ac_on_off
- sensor.battery_good_bad
- sensor.alarm_panel_trouble
- title: Cameras
path: cameras
badges: []
icon: mdi:camera
cards:
- type: vertical-stack
cards:
- type: picture-entity
camera_view: live
entity: camera.back_yard
show_state: false
show_name: false
- type: picture-entity
camera_view: live
entity: camera.front_yard
show_state: false
show_name: false
- type: picture-entity
camera_view: live
entity: camera.nursery
show_state: false
show_name: false
- type: picture-entity
camera_view: live
entity: camera.kennel
show_state: false
show_name: false
- title: Garden
path: garden
badges: []
icon: mdi:fruit-cherries
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
style: *cardStyle
entities:
- sensor.greenhouse_therm_temperature
show:
extrema: true
hours_to_show: 72
points_per_hour: 1
decimals: 1
- type: custom:mini-graph-card
style: *cardStyle
entities:
- sensor.greenhouse_therm_humidity
show:
extrema: true
hours_to_show: 72
points_per_hour: 1
decimals: 0
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
style: *cardStyle
entities:
- sensor.dark_sky_temperature
show:
extrema: true
hours_to_show: 72
points_per_hour: 1
decimals: 1
- type: custom:mini-graph-card
style: *cardStyle
entities:
- sensor.dark_sky_humidity
show:
extrema: true
hours_to_show: 72
points_per_hour: 1
decimals: 0
- type: picture-entity
camera_view: live
entity: camera.garden_cam
show_state: false
show_name: false
Which version?
The latest in HACS, 3.0.9
You should raise an issue.
as in, on github?
Yes, make an issue there.
Change the resource type from js to module.
One more reason to use card-mod - struggling with a clipped tooltip for "history-graph" card:
The problem appears when the
"history-graph" card is placed inside "custom:stack-in-card".
A possible reason of this clipping - CSS style "overflow: hidden" used for "custom:stack-in-card".
How to solve:
type: 'custom:stack-in-card'
style: |
ha-card {
overflow: visible !important;
}
cards:
- type: history-graph
title: tooltip + stack-in-card
entities:
- sun.sun
hours_to_show: 6
refresh_interval: 0
Update 14.01.25: do not observe the issue with a clipped tooltip of history-graph in HA 2025.1.
But for input_select the issue still persists:
type: custom:stack-in-card
cards:
- type: entities
entities:
- entity: input_select.test_value
More examples are described here.
I’m trying to make the word “Fan” not appear but I would like to still be able to adjust the distance between the fan icon and the buttons. Nothing I try seems to affect it. There is an “Off” button that is not shown.
I would also like to adjust the fan icon up a little to make it even with the buttons. I adjusted the size of the icon but I can’t move it.
Is anyone else having an issue with card-mod changes not being displayed in fully kiosk browser? Everything else appears and works but none of these changes show up. I cleared fully kiosk’s cache but that didn’t solve the issue.
The fan icon is not going to stay red. I was just testing. Eventually, I would like to have the icon rotate at different speeds depending on which button was pressed.
- type: entities
show_header_toggle: false
card_mod:
style:
'#states div':
fan-control-entity-row$:
hui-generic-entity-row$:
state-badge$:
ha-icon$: |
ha-svg-icon {
width: 48px;
height: 48px;
margin-bottom: 5px;
}
.: |
ha-icon { color: #fa051e; }
.: |
button.speed {
min-width: 48px;
height: 36px;
font-size: 14px !important;
}
.info {
display: none;
}
entities:
- entity: fan.master_bedroom_fan
name: Fan
type: 'custom:fan-control-entity-row'
I have also tried changing the name and with/without !important:
}
info.pointer.text-content {
margin-left: 30px !important;
}
and
'#info.pointer.text-content div' {
margin-left: 30px !important;
}
Any help is greatly appreciated.
hello, I would like to apply the css style to ha-icon and set the style to “display: inline;” to a ha-icon because the icon is bigger then the element state-badge when i landscape the iphone. i have try so many way but still fail. please somebody help me out.
floor_plan_button10:
element:
entity: '[[entity_1]]'
style:
'#root > hui-conditional-element > decluttering-card':
$: |
"#declutter-child":
$: |
"s#tate-badge":
$: |
ha-icon {
display: inline;
}
'#state-badge':
$: |
ha-icon {
display: inline;
}
height: 4vw
width: 4vw
max-width: 4vw
max-height: 4vw
display: inline-flex
align-self: start
text-align: start
margin-right: 0px
'--mdc-icon-size': 90%
transform-origin: left
'--paper-item-icon-color': darkgrey
align-items: center
background-color: 'rgba(255, 255, 255, 0.4)'
border-radius: 40%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
justify-content: center
left: 44%
top: 35%
position: absolute
tap_action:
action: toggle
hold_action:
action: fire-dom-event
haptic: success
browser_mod:
command: call-service
service: script.general_button_card_detail_popup
service_data:
deviceID: this
entity_1: input_boolean.ceiling_light
text-align: center
type: state-icon
card_mod:
style: |
"#root > hui-conditional-element > decluttering-card":
$: |
"#declutter-child":
$: |
state-badge > ha-icon {display: inline;}
"#state-badge":
$: |
ha-icon {
display: inline;
}
Why are you replying to that person?
Try playing around with position: relative.
Thank you KTibow. I was able to get the fan icon to move upwards using position: relative.
Do you happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything.
info.pointer.text-content
Has anyone else had an issue with mod-card changes not appearing in the fully kiosk browser? In the Fully Kiosk browser it looks like I didn’t do anything.
Edit; I found the solution to mod-card changes not showing. I use a Fire HD 10 to display Home Assistant lovelace. Once I updated the Fire OS from 7.3.1.2 to 7.3.1.8 I was able see the changes.
Hello, is it possible to color this image according to the stats?
- attribute: BMI
entity: bodymiscale.aurelien
image: /local/bodyscale/b_m_i.webp
name: IMC
style:
hui-image:
$: |
#image {
{% set imc = state_attr('bodymiscale.aurelien', 'BMI') | float %}
{% if 0 < imc < 18.4 %}color: blue;
{% elif 18.5 <= imc <= 25 %}color: green;
{% elif 25.1 <= imc <= 28 %}color: yelow;
{% elif 28.1 <= imc <= 32 %}color: orange;
{% else %}color: red;
{% endif %}
}
type: attribute
What do you see if you enter it into the template tab of HA devtools?
That’s an image. It doesn’t have a color attribute. Check out the css property filter, but remember that if you rotate around the color wheel starting from black, you’ll always end up at black.