Is it possible, with card-mod to replace an icon with text? For example, for a cover entity, instead of having a blinds icon, I would prefer just to show text for the state, either āOpenā or āClosedā.
I donāt really want to have to create images of the text to use though.
Possible but cumbersome & have ātransitionā effects.
Check examples here with ā:after / :beforeā.
1 Like
Just wondering is it possible to edit the Subview title using card_mod, or is it done by the theme style.css?
may be, try ))
But not with a ānormalā card-mod for sure.
1 Like
I understand itās wrong, but the previous way did work. Iām just not sure how the new indents are supposed to work. Iāve guessed wrong about 50 times, canāt quite figure it out.
It used to be
style: |
ha-card {
...
}
In ver. 3.0 it was recommended to use
card_mod:
style: |
ha-card {
...
}
but the old notation in SOME cases continued to work.
Starting from 3.4 the old notation does not work.
For custom frontend modules you are right. No need for hui-elements.
But the standard ha-cards are not working without hui-elements.
like markdown, entitiesā¦
Iām trying to apply it to the badges at the top of Lovelace, not a card. This looks right to me, but no longer works to change them from the default Red. Thanks again!
card_mod:
style: |
ha-card {
--ha-card-background: teal;
color: var(--primary-color);
}
hui-element was made specially to wrap STANDARD cards.
1st post ā link at the bottom ā badges
I figured it out. Before I just had one entry for Cardmod at the top of the YAML, but now I need it on all my entities above Style.
Thanks!
Exactly. Thats why I asked how to style hui-elements because I cannot make it work to use the values thereā¦
Good, but you tried to use hui-element with a custom card. OK, case closed)
for the fun of it I was experimenting a bit with macros in custom_templates as a repository of card_mods.
As an alternative to using !include, or !secret.
Using that in auto-entities works really nicely:
filter:
include:
- entity_id: sensor.*_signal_strength
options:
card_mod: #!include /config/dashboard/card_mods/wifi_signal_strength.yaml
style: |
:host {
--card-mod-icon-color:
{% set signal = config.entity %}
{% from 'customize_macros.jinja' import signal_strength_color %}
{{signal_strength_color(signal)}}
}
and some of the template macro in custom_templates:
{%- macro signal_strength_color(entity_id) -%}
{%- set state = states(entity_id)|float(0) -%}
{%- if state >= -50 -%} darkgreen
{%- elif state >= -60 -%} green
{%- elif state >= -67 -%} lightgreen
{%- elif state >= -70 -%} gold
{%- elif state >= -80 -%} orange
{%- else -%} red
{%- endif -%}
{%- endmacro -%}
{%- macro battery_color(entity_id) -%}
{%- set state = states(entity_id)|float(0) -%}
{%- if state in ['unavailable','unknown'] -%} steelblue
{%- elif state > 75 -%} green
{%- elif state > 50 -%} gold
{%- elif state > 25 -%} orange
{%- elif state > 10 -%} brown
{%- else -%} red
{%- endif -%}
{%- endmacro -%}
nice.
1 Like
I donāt know if I am being unspecific or somehow we misunderstand each other.
Despite my mistake wrapping a custom card into hui-elements I am using it to make cards like markdown and entities work.
Would you be please so kind and help me with styling the hui-elements?
For example moving a vertical stack wrapped into hui-elements:
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: conditional
conditions:
- entity: update.rammelsau_dsm_update
state: 'on'
card:
type: custom:mushroom-template-card
primary: DSM Update
secondary: ''
icon: mdi:arrow-collapse-down
icon_color: yellow
badge_icon: mdi:exclamation-thick
badge_color: red
entity: update.rammelsau_dsm_update
card_mod:
style: |
:host {
--ha-card-border-width: 0px 3px 3px 0px;
--ha-card-border-color: #212121;
}
ha-card {
padding: 0px 0px 0px 0px !important;
}
- type: conditional
conditions:
- entity: update.home_assistant_core_update
state: 'on'
card:
type: custom:mushroom-template-card
primary: Home Assistant Core Update
secondary: ''
icon: mdi:arrow-collapse-down
entity: update.home_assistant_core_update
icon_color: yellow
badge_icon: mdi:exclamation-thick
badge_color: red
card_mod:
style: |
:host {
--ha-card-border-width: 0px 3px 3px 0px;
--ha-card-border-color: #212121;
}
ha-card {
padding: 0px 0px 0px 0px !important;
}
- type: conditional
conditions:
- entity: update.home_assistant_operating_system_update
state: 'on'
card:
type: custom:mushroom-template-card
primary: Home Assistant OS Update
secondary: ''
icon: mdi:arrow-collapse-down
entity: update.home_assistant_operating_system_update
icon_color: yellow
badge_icon: mdi:exclamation-thick
badge_color: red
card_mod:
style: |
:host {
--ha-card-border-width: 0px 3px 3px 0px;
--ha-card-border-color: #212121;
}
ha-card {
padding: 0px 0px 0px 0px !important;
}
I am not using mushrooms & cannot help with them.
For testing purpose replace them by a standard āentityā card. Then we may start looking.
Hi everyone
Can anyone help me using the code snippets above with the custom:numberbox-card
How do I switch the + and - buttons back to - and +
In the example above they reverse themselves and from a UX perspective are backwards
- type: section
label: Full width
- type: custom:numberbox-card
entity: input_number.test_parrots
icon: false
name: false
card_mod:
style: |
.body .cur-box {
display: grid;
grid-template-columns: 1fr 10fr 1fr;
place-items: center;
}
Consolidate your card mod to something like thisā¦
entity: update.rammelsau_dsm_update
card_mod:
style: |
ha-card {
border-width:0px 3px 3px 0px !important;
border-color: blue !important;
background: green !important;
padding: 0px 0px 0px 0px !important;
}
em vs px depends on your usecase.
Honestly most of the time for what we end up doing with card mod px is fine.
em is relative sized to the size of the font.
So 1.5em with a font size of 16px is 24px. Because 1.5em is just sayinf 150% of 16px.
Whilst px is static. We tend to want static with what we do in card mod.
But again, depends on the exact usecase.
Hereās my recent accomplishment with card_mod. It took me many hours of trying to re-learn the DOM navigation stuff but I persevered and succeeded. The battle was with icons and icon colors in the custom:multiple-entity-row element. The most time consuming for me was changing the icon_color in the secondary entity. The achievement was this layout which also utilizes the declutter-card and the card-mod card, both for my first time:
Lovelace raw config
** Edited to reflect recomended code by @Ildar_Gabdullin (post #5750)
** and use of |iif() by @Mariusthvdb (post #2671)
decluttering_templates:
iblinds:
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: '[[display_name]]'
alignment: center
- type: entities
entities:
- entity: cover.[[blind]]
type: custom:multiple-entity-row
name: ' '
show_state: false
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
--card-mod-icon:
{% if is_state('cover.[[blind]]','open') %} phu:blind-tilt-open;
{% elif is_state('cover.[[blind]]','closed') %} phu:blind-tilt-closed;
{% else %} mdi:help-circle;
{% endif %}
color:
{% if is_state(config.entity,'open') %} green;
{% elif is_state(config.entity,'closed')%} beige;
{% else %} red;
{% endif %}
}
.: |
div.entity:nth-child(2) state-badge {
{% set percentage = states(config.entities[0].entity)|int(0) %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
color: {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }};
}
entities:
- entity: sensor.[[blind]]_battery_level
name: Battery
unit: ' '
- entity: sensor.[[blind]]_battery_level
name: false
icon: true
show_header_toggle: false
state_color: false
card_mod:
class: inline-card
- type: custom:slider-button-card
slider:
direction: bottom-top
background: gradient
attribute: tilt
use_state_color: true
use_percentage_bg_opacity: true
toggle_on_click: false
show_track: true
force_square: false
invert: true
action_button:
mode: toggle
show: false
icon:
icon: ''
show: false
use_state_color: false
entity: cover.[[blind]]
show_state: true
compact: false
name: Living Room
show_name: false
- type: custom:slider-button-card
slider:
direction: left-right
background: gradient
use_state_color: false
use_percentage_bg_opacity: false
toggle_on_click: false
show_track: false
force_square: false
invert: false
icon:
show: false
entity: input_number.[[blind]]
show_state: true
compact: true
show_name: true
name: 'Preset:'
action_button:
show: false
Card stack 1
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Kitchen
alignment: center
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: iblinds
variables:
- blind: kitchen_blind_1
- display_name: Blind 1
- type: custom:decluttering-card
template: iblinds
variables:
- blind: kitchen_blind_2
- display_name: Blind 2
- type: custom:decluttering-card
template: iblinds
variables:
- blind: kitchen_blind_3
- display_name: Blind 3
view_layout:
column: 1
Card stack 2
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 66%;
flex: auto;
}
div#root > :last-child {
width: 33%;
flex: auto;
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Living Room
alignment: center
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: iblinds
variables:
- blind: living_room_blind
- display_name: Window
- type: custom:decluttering-card
template: iblinds
variables:
- blind: patio_door_blind
- display_name: Patio Door
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Master Bedroom
alignment: center
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: iblinds
variables:
- blind: bedroom_blind
- display_name: Window
view_layout:
column: 1
I also make use of the script python_script.set_state HACS add-on to override the state of my iBlinds horizontal tilt blinds:
Automation
alias: iBlinds State Update
description: ""
trigger:
- platform: state
entity_id:
- cover.kitchen_blind_1
- cover.kitchen_blind_2
- cover.kitchen_blind_3
attribute: current_tilt_position
- platform: state
entity_id:
- cover.kitchen_blind_1
- cover.kitchen_blind_2
- cover.kitchen_blind_3
to: unknown
condition: []
action:
- service: python_script.set_state
data:
entity_id: "{{ trigger.entity_id }}"
state: >-
{{ iif( 5 < state_attr(trigger.entity_id, 'current_tilt_position') <
95,'open', 'closed') }}
- service: saver.save_state
data:
entity_id: "{{ trigger.entity_id }}"
mode: parallel
and have similar code in my Home Assistant startup automation to override the state at startup.
Note: only three blinds are being overridden as the other three are older v2 blinds and I have those templated:
Blind templates
- platform: template
covers:
living_room_blind:
friendly_name: Living Room
unique_id: living-room-blind-template
value_template: '{{ iif (1 < state_attr("cover.living_room_blind_hidden","current_position")|int(0) < 99 , "open", "closed") }}'
tilt_template: '{{100 - (state_attr("cover.living_room_blind_hidden","current_position")|int(default=0)) }}'
set_cover_tilt_position:
service: cover.set_cover_position
data_template:
entity_id: cover.living_room_blind_hidden
position: '{{100 - tilt}}'
open_cover:
service: cover.set_cover_position
data_template:
entity_id: cover.living_room_blind_hidden
position: '{{100.0 - states("input_number.living_room_blind")|float(0)}}'
close_cover:
service: cover.set_cover_position
data_template:
entity_id: cover.living_room_blind_hidden
position: 100
icon_template: >-
{{ iif(this.state =='open','phu:blind-tilt-open','phu:blind-tilt-closed') }}
patio_door_blind:
friendly_name: Patio Door
unique_id: patio-door-blind-template
value_template: '{{ iif (1 < state_attr("cover.patio_door_blind_hidden","current_position")|int(0) < 99 , "open", "closed") }}'
tilt_template: '{{100 - (state_attr("cover.patio_door_blind_hidden","current_position")|int(default=0)) }}'
set_cover_tilt_position:
service: cover.set_cover_position
data_template:
entity_id: cover.patio_door_blind_hidden
position: '{{100 - tilt}}'
open_cover:
service: cover.set_cover_position
data_template:
entity_id: cover.patio_door_blind_hidden
position: '{{100.0 - states("input_number.patio_door_blind")|float(0)}}'
close_cover:
service: cover.set_cover_position
data_template:
entity_id: cover.patio_door_blind_hidden
position: 100
icon_template: >-
{{ iif(this.state =='open','phu:blind-tilt-open','phu:blind-tilt-closed') }}
bedroom_blind:
friendly_name: Bedroom
unique_id: bedroom-blind-template
value_template: '{{ iif (1 < state_attr("cover.bedroom_blind_hidden","current_position")|int(0) < 99 , "open", "closed") }}'
tilt_template: '{{100 - (state_attr("cover.bedroom_blind_hidden","current_position")|int(default=0)) }}'
set_cover_tilt_position:
service: cover.set_cover_position
data_template:
entity_id: cover.bedroom_blind_hidden
position: '{{100 - tilt}}'
open_cover:
service: cover.set_cover_position
data_template:
entity_id: cover.bedroom_blind_hidden
position: '{{100.0 - states("input_number.bedroom_blind")|float(0)}}'
close_cover:
service: cover.set_cover_position
data_template:
entity_id: cover.bedroom_blind_hidden
position: 100
icon_template: >-
{{ iif(this.state == 'open','phu:blind-tilt-open','phu:blind-tilt-closed') }}
1 Like