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.
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
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;
}
![num2](https://community-assets.home-assistant.io/original/3X/3/5/3561367b89915424299d54319fbf58fdf3962e26.png)
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.