Hi,
I am trying to rotate an icon 90º,
with this code:
I made this other code:
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: xxxcc
styles:
'--paper-item-icon-transform': rotate(-90deg)
But of course it is not working, It is an icon in one of the entities in a ‘custom:multiple-entity-row’ (see the post I am replying to)
That’s because those variables aren’t just applying those values, they’re defined by the framework.
Also this is not related to Card-mod ("styles" is a property for "multiple-entity-row").
Yo used that in the Prost I was mentioning before and I thought I could use something like that to rotate it. How can I rotate it?
Entities card:
type: vertical-stack
title: Icon
cards:
- type: entities
entities:
- entity: sensor.cleargrass_1_co2
name: Colored (sensor)
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.cleargrass_1_co2
name: Colored (sensor)
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(20deg);
}
- entity: input_boolean.test_boolean
name: Colored (input_boolean)
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(-20deg);
}
- type: entities
title: Common styling (full path)
style:
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(-45deg);
}
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_1_co2
multiple-entity-row:
type: vertical-stack
title: Colored icons (diff colors)
cards:
- type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.yandex_time_home_ildar
style:
hui-generic-entity-row:
'div.entity:nth-child(2) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
transform: rotate(180deg);
}
'div.entity:nth-child(4) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(45deg);
}
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
transform: rotate(-45deg);
}
entities:
- entity: sensor.yandex_time_home_ildar
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: sensor.yandex_time_home_ildar
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
tap_action:
action: url
url_path: xxxcc
name: Colored all icons
unit: ''
icon: 'mdi:car'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
now that might be the one reason to move from custom-ui to card-mod… Ive never been able to find a way to rotate the icons, or use any of the mdi icon helper_classes in custom-ui javascript, though it should somehow at least theoretically be possible…
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:
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:
"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;
}
