Yeah itās in the code just before the end, but I omitted the parts with the icon referring to the key frames as it didnāt work. Dw if itās too difficult! Thanks!
The āinputā was already provided. If you unable to see/understand it & yet react in a such rude way - surely I will not bother)))
1 Like
Hello everyone, being a newbie in the world of theme creation I am doing a little research, the cards on my Dashboard are modified with mushroom and card-mod everything is good to adjust to the pixel, but I am facing a problem , on the tree of theme codes for my map configuration which are 99% identical I would like to change the map configuration to theme to lighten the Dashboard code, I thank you in advance if you can help me gentlemen the coders even just a bit that would help me a lot Iāve been looking for several days, Iāve been testing things but without success. Iāll give you one of my cards as an example
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.le_salon
icon: mdi:sofa
icon_color: |-
{% if is_state('light.le_salon', 'on') %}
#FFAE0080
{% else %}
#0000
{% endif %}
primary: Salon
secondary: >-
{{ states('sensor.thermometre_salon_temperature') }}Ā°C/{{
states('sensor.thermometre_salon_humidity') }}%
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
background-color: #00000090;
width: 44%;
border-radius: 5px 5px 5px 5px;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -155px;
background-color: #00000090;
width: 78%;
border-radius: 5px 5px 5px 5px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
ha-card {
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: light.le_salon
state: 'on'
chip:
type: template
entity: light.le_salon
tap_action:
action: none
icon: mdi:ceiling-light
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: media_player.samsung_7_series_65
state: 'on'
chip:
type: template
entity: media_player.samsung_7_series_65
icon: mdi:play-pause
icon_color: |-
{% if is_state('media_player.samsung_7_series_65', 'on') %}
orange
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: alarm_control_panel.alarmo
state: armed_away
chip:
type: alarm-control-panel
entity: alarm_control_panel.alarmo
tap_action:
action: none
content_info: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 85%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin: auto;
background-image: url(https://i.ibb.co/NjM7Dd6/salon.png);
background-size: cover;
background-position: center;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:silverware-variant
icon_color: >-
{% if is_state('light.la_salle_a_manger', 'on') or
is_state('switch.prise_connectee_mystrom', 'on') or
is_state('switch.prise_salle_a_manger', 'on') %}
#FFAE0080
{% else %}
#0000
{% endif %}
primary: Salle a manger
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
badge_icon: |+
badge_color: |+
entity: light.la_salle_a_manger
secondary: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
background-color: #00000090;
width: 110%;
border-radius: 5px 5px 5px 5px;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -155px;
border-radius: 5px 5px 5px 5px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
ha-card {
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: light.la_salle_a_manger
state: 'on'
chip:
type: template
entity: light.la_salle_a_manger
tap_action:
action: none
icon: mdi:ceiling-light
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: switch.prise_connectee_mystrom
state: 'on'
chip:
type: template
entity: switch.prise_connectee_mystrom
tap_action:
action: none
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
icon: mdi:power-socket-eu
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: switch.prise_salle_a_manger
state: 'on'
chip:
type: template
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
icon: mdi:power-socket-eu
entity: switch.prise_salle_a_manger
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 85%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
background-image: url(https://i.ibb.co/rmk15p2/salle-a-manger.png);
background-size: cover;
background-position: center;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.cuisine
icon: mdi:pot-steam
icon_color: |
{% if is_state('light.cuisine', 'on') %}
#FFAE0080
{% else %}
#0000
{% endif %}
primary: Cuisine
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
badge_icon: |+
badge_color: |+
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
background-color: #00000090;
width: 55%;
border-radius: 5px 5px 5px 5px;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -155px;
border-radius: 5px 5px 5px 5px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
ha-card {
background: none;
}
secondary: ''
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: light.cuisine
state: 'on'
chip:
type: template
entity: light.cuisine
tap_action:
action: none
icon: mdi:vanity-light
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: light.plan_de_travail
state: 'on'
chip:
type: template
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
entity: light.plan_de_travail
icon: mdi:vanity-light
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 85%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
background-image: url(https://i.ibb.co/19NXD2Z/cuisine.png);
background-size: cover;
background-position: center;
}
- type: custom:popup-card
entity: light.le_salon
dismissable: true
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.le_salon
show_brightness_control: true
use_light_color: true
show_color_control: false
collapsible_controls: true
icon: mdi:ceiling-light
show_color_temp_control: true
- type: custom:mushroom-alarm-control-panel-card
states:
- armed_away
- armed_night
entity: alarm_control_panel.alarmo
- type: custom:mushroom-media-player-card
entity: media_player.samsung_7_series_65
name: tƩlƩ salon
size: normal
title: La salon
- type: custom:popup-card
entity: light.la_salle_a_manger
dismissable: true
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.la_salle_a_manger
show_brightness_control: true
use_light_color: true
show_color_control: false
name: ' La salle a manger'
collapsible_controls: true
icon: mdi:ceiling-light
show_color_temp_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: switch.prise_salle_a_manger
icon: mdi:power-socket-fr
name: Prise salle Ć manger
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: switch.prise_connectee_mystrom
icon: mdi:power-socket-fr
name: Prise mystrom
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
title: La salle a manger
- type: custom:popup-card
entity: light.cuisine
dismissable: true
card:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.cuisine
show_brightness_control: true
use_light_color: true
show_color_control: false
name: ' La cuisine'
collapsible_controls: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.plan_de_travail
show_brightness_control: true
use_light_color: true
show_color_control: false
name: ' Le plan de travail'
collapsible_controls: true
show_color_temp_control: true
title: La cuisine
Can anybody help me out with this, please?
I am unable to make this work 
And I cannot find any other solution to text_box contents that are too long for the field
I had this code working fine in a mushroom template card, but after the latest update I canāt change the color or the font size. I have been searching but could not find a solution.
Any help, please?
card_mod:
style: |
ha-card {
--primary-text-color: white;
--secondary-text-color: white;
--title-font-size: 30px;
--subtitle-font-size: 15px:
}
There were a few changes with the 3.4.1 update and you had a colon vs a semi-colon.
card_mod:
style: |
ha-card {
--card-primary-color: white !important;
--card-secondary-color: white !important;;
--title-font-size: 30px;
--subtitle-font-size: 15px;
}
check out this topic for direct Mushroom card info.
1 Like
@xlyralycanx I like your theme. I added a simple fan animation to the theme. I thought it may help you address your formatting and get your animation working.
Test Theme:
modes:
dark:
sidebar-background-color: '#090e3b'
scrollbar-thumb-color: 'var(primary-color)'
app-header-background-color: '#090e3b'
app-header-edit-background-color: 'var(--app-header-background-color)'
app-header-text-color: '#99eeff'
card-background-color: '#090e3b'
primary-text-color: '#99eeff'
accent-color: '#cc7000'
light:
sidebar-background-color: '#99eeff'
scrollbar-thumb-color: 'var(primary-color)'
app-header-background-color: '#99eeff'
app-header-edit-background-color: 'var(--app-header-background-color)'
card-background-color: '#99eeff'
text-primary-color: '#000000'
ha-card-border-color: 'var(--card-background-color)'
state-switch-active-color: '#008000'
state-binary_sensor-active-color: '#008000'
card-mod-theme: Test Theme
card-mod-sidebar-yaml: |
.: |
#.menu .title {
# font-family: Dancing Script;
}
#a[data-panel='panel'] paper-icon-item .item-text {
# font-family: Dancing Script;
#font-size: 26px;
}
#.spacer {
# background: center / cover url("/local/media/images/christmasdecor.png");
}
a[data-panel='dashboard-home'] paper-icon-item ha-icon {
color: #cc7000 !important;
}
a[data-panel='dashboard-home'] paper-icon-item .item-text {
color: #cc7000;
}
a[data-panel='status-page'] paper-icon-item ha-icon {
color: #000080 !important;
}
a[data-panel='status-page'] paper-icon-item .item-text {
#color: #000080;
}
a[data-panel='todo'] paper-icon-item ha-svg-icon {
color: #000080 !important;
}
a[data-panel='todo'] paper-icon-item .item-text {
color: #000080;
}
a[data-panel='calendar'] paper-icon-item ha-svg-icon {
color: #cc7000 !important;
}
a[data-panel='calendar'] paper-icon-item .item-text {
color: #cc7000;
}
#a[data-panel='map'] paper-icon-item ha-svg-icon {
# color: #000080 !important;
#}
#a[data-panel='map'] paper-icon-item .item-text {
#color: #000080;
#}
#a[data-panel='history'] paper-icon-item ha-svg-icon {
#color: #cc7000 !important;
#}
#a[data-panel='history'] paper-icon-item .item-text {
#color: #cc7000;
#}
a[data-panel='core_configurator'] paper-icon-item ha-icon {
color: #cc7000 !important;
}
a[data-panel='core_configurator'] paper-icon-item .item-text {
color: #cc7000;
}
a[data-panel='hacs'] paper-icon-item ha-icon {
color: #cc7000 !important;
}
a[data-panel='hacs'] paper-icon-item .item-text {
color: #cc7000;
}
#a[data-panel='media-browser'] paper-icon-item ha-svg-icon {
#color: #000080 !important;
#}
#a[data-panel='media-browser'] paper-icon-item .item-text {
#color: #000080;
#}
a[data-panel='developer-tools'] paper-icon-item ha-svg-icon {
color: #cc7000 !important;
}
a[data-panel='developer-tools'] paper-icon-item .item-text {
color: #cc7000;
}
#a[data-panel='config'] paper-icon-item ha-svg-icon {
#color: #000080 !important;
#}
#a[data-panel='config'] paper-icon-item .item-text {
#color: #000080;
#}
.notifications-container paper-icon-item ha-svg-icon {
color: #cc7000;
}
.notifications-container paper-icon-item .item-text {
color: #cc7000;
}
#a[data-panel='panel'] paper-icon-item .item-text {
#color: #000080;
#}
card-mod-card: |
ha-card {
border: none !important;
background-color: none !important;
--mdc-icon-size: 26px;
--shape-color: none !important;
--title-font-weight: 200;
--card-primary-font-weight:300;
--title-font-size: 16px;
--title-padding: 12px 12px 4px;
border-radius: 4px !important;
box-shadow: none !important;
--card-secondary-line-height: 11px !important;
--card-secondary-font-size: 11px !important;
--mush-icon-symbol-size: 38px;
--control-height: 36px;
}
.: |
:host {
border-radius: 4px !important;
--rgb-primary-text-color: none !important;
}
card-mod-row-yaml: |
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@keyframes spinr {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
state-badge {
{% if config.entity.startswith('fan.') and is_state('sensor.fan_direction', 'forward') %}
animation: spin 3s infinite linear, coloring 8s linear infinite alternate;
{% else %}
animation: spinr 3s infinite linear, coloring 8s linear infinite alternate;
{% endif %}
}
@keyframes coloring {
0% {
color: red;
}
17% {
color: orange;
}
34% {
color: yellow;
}
51% {
color: green;
}
68% {
color: lightblue;
}
85% {
color: blue;
}
100% {
color: violet;
}
}
Here is one sidebar icon spinning
Test Theme:
modes:
dark:
sidebar-background-color: '#090e3b'
scrollbar-thumb-color: 'var(primary-color)'
app-header-background-color: '#090e3b'
app-header-edit-background-color: 'var(--app-header-background-color)'
app-header-text-color: '#99eeff'
card-background-color: '#090e3b'
primary-text-color: '#99eeff'
accent-color: '#cc7000'
light:
sidebar-background-color: '#99eeff'
scrollbar-thumb-color: 'var(primary-color)'
app-header-background-color: '#99eeff'
app-header-edit-background-color: 'var(--app-header-background-color)'
card-background-color: '#99eeff'
text-primary-color: '#000000'
ha-card-border-color: 'var(--card-background-color)'
state-switch-active-color: '#008000'
state-binary_sensor-active-color: '#008000'
card-mod-theme: Test Theme
card-mod-sidebar-yaml: |
.: |
a[data-panel='hacs'] paper-icon-item ha-icon {
color: #cc7000 !important;
animation: spin 3s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Hello everyone,
Please correct me if Iām in the wrong spot for this question!!
I recently updated Card Mod to the latest version, which didnāt break anything except for one single area where Iām highlighting the 'Real Feel" temperature.
For some reason, the āJustify-Contentā area is VERY squished, and I canāt seem to figure out how to adjust it so it shows and fills the whole area.
If I modify the HTML and make the āJustify-Contentā 50px, it looks great! But it is defaulting to 20px, and I canāt seem to edit this from the Card_Mod configurationsā¦
Below is my YAML for the card:
card:
square: false
columns: 1
type: grid
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:weather-card
entity: weather.home
forecast: false
details: false
current: true
card_mod:
style: |
ha-card {
background: none;
border: none;
--font-size: 10px;
text-align: left;
}
- type: custom:mushroom-template-card
fill_container: true
primary: '{{ states(''sensor.home_realfeel_temperature'') }} Ā°C'
secondary: Real Feel
card_mod:
style: |
ha-card {
--card-primary-font-size: 50px;
--card-secondary-font-size: 15px;
--card-primary-line-height, 50px;
background: none;
border: none;
text-align: center;
}
layout:
grid-template-columns: 55% auto
grid-template-rows: auto
Also below is a screenshot of the card with the issue, as well as some of the HTML for visibility.
Any help would be greatly appreciated! Many of you are much smarter than I, so Iām hoping someone here knows the solution!
You have a typo
--card-primary-line-height, 50px;
should be
--card-primary-line-height: 50px;
1 Like
Could anyone advise on how to hide/remove the three stacked lines as seen below from the top left of the Lovelace dashboard? Could this be achieved using Card-mod?
Solution of customizing this button was posted here.
Here is how to find it:
huge card-mod thread ā 1st post ā link at the bottom ā themes ā sidebar
Now try to hide this button with ādisplay: noneā.
Oh manā¦i canāt believe this whole thing was a simple typoā¦
Thank you so much for catching this for me!! You have cured my headache!
Thanks
Given that a try & unfortunately it doesnāt seem to work. Unless Iām missing something.
card-mod-root-yaml: |
.: |
.header .toolbar .action-items {
display: none;
}
Iām using this dashboard on a tablet. So donāt want users to be able to get to other parts of HA that they shouldnāt via the menu. So by removing this it just gives access to only what they need.
Can you see a difference?
Question from a card-mod newbie with hardly any CSS knowledge:
Situation
Iāve combined a mushroom cover card and a mushroom template card (used as a switch) in a vertical stack to ease controlling a cover in the house, e.g. on the balcony.
the switch is used to enable/disable the automation controlling the cover depending on time, sun, temperature, ā¦
currently itās not clearly visible that the two cards belong to each other, since the vertical stack has no border, but the two single cards have one.
Goal
I would like to have a border around the vertical stack and remove the border from the single cards.
How could card_mod help here?
Code
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.rollladen_balkon_og
name: Balkon-OG
show_position_control: false
show_buttons_control: true
double_tap_action:
action: none
hold_action:
action: none
- type: custom:mushroom-template-card
primary: Automatik
secondary: |-
{% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
ein
{% else %}
aus
{% endif %}
icon: |-
{% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
mdi:window-shutter-auto
{% else %}
mdi:window-shutter
{% endif %}
hold_action:
action: none
tap_action:
action: toggle
double_tap_action:
action: none
entity: automation.rollladen_balkon_og_cca
icon_color: |-
{% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
green
{% else %}
grey
{% endif %}
Iād switch to stack-in-card and use the following code. I removed the individual card borders with:
card_mod:
style: |
ha-card {
border: none !important;
}
type: custom:stack-in-card
cards:
- type: custom:mushroom-cover-card
entity: cover.rollladen_balkon_og
name: Balkon-OG
show_position_control: false
show_buttons_control: true
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: Automatik
secondary: |-
{% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
ein
{% else %}
aus
{% endif %}
icon: |-
{% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
mdi:window-shutter-auto
{% else %}
mdi:window-shutter
{% endif %}
hold_action:
action: none
tap_action:
action: toggle
double_tap_action:
action: none
entity: automation.rollladen_balkon_og_cca
icon_color: |-
{% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
green
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
}
Hi,
I have just updated core HA from 2024.1.6 to 2024.2.2 and noticed there is now a pencil icon where the overflow (3 dots) menu button was. This now takes you directly into edit mode rather than a submenu to enter edit mode.
I was using code from the Theme cookbook to hide the overflow menu and show a clock in its place.
This now only works if you are in edit mode which makes it rather pointless.
Here is an example from before 2024.2.2 with the card mod code in my theme.
And this is how it looks in 2024.2.2
And this is how it looks in 2024.2.2 in edit mode
Here is my card-mode theme yaml.
card-mod-root-yaml: |
.: |
ha-button-menu {
color: transparent !important;
}
ha-button-menu::before {
content: "{{states('sensor.local_time')}}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
font-size: 18px;
top: 25px;
white-space: nowrap;
}
Using the browser inspector I can see that the element ha-button-menu does not now exist in the non edit view. It now looks as if it is mwc-icon-button[title="Edit Dashboard"] but I cannot get it to work in my card-mod theme.
I have searched this topic, the all changes post for 2024.2.x and the 2024.2.x release notes but havenāt had any hits.
Anybody else notice the pencil icon change? I would appreciate any help to get this functionality back.
Replying to myself in case anyone is interested in my solution.
On further inspection, I found that the width of the browser window affected the elements that are displayed.
So for a wide window the pencil icon is displayed and when clicked takes you directly into edit mode.
When the window is narrow the overflow icon is displayed (3 dots) and when clicked shows the overflow menu.
So for a narrow window or when in edit mode, my old card-mod theme code works.
But for a wide window in 2024.2.x it doesnāt.
Here is my modified card-mod theme code to cater for both scenarios.
card-mod-root-yaml: |
.: |
/* this hides the pencil icon & replaces it with the time when browser window is wide */
ha-icon-button[data-selector="EDIT_DASHBOARD"] {
color: transparent !important;
}
ha-icon-button[data-selector="EDIT_DASHBOARD"]::after {
content: "{{states('sensor.local_time')}}";
color: var(--text-primary-color);
visibility: visible;
position: absolute;
font-size: 18px;
top: 10px;
right: 18px;
white-space: nowrap;
}
/* this hides the overflow icon & replaces it with the time when browser window is narrow or in edit mode */
ha-button-menu {
color: transparent !important;
}
ha-button-menu::before {
content: "{{states('sensor.local_time')}}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
font-size: 18px;
top: 25px;
white-space: nowrap;
}
Note I got the element name wrong in my original post.
It is ha-icon-button[data-selector="EDIT_DASHBOARD"]
By changing the data-selector to āSEARCHā or āASSISTā would hide the search icon or the voice assist icon respectively.
For example:
/* uncomment this to hide the search icon
ha-icon-button[data-selector="SEARCH"] {
display: none !important;
}
*/
UPDATE:
For this to work Kiosk Mode has to be installed via HACS (Frontend)
1 Like
Hi all - I have several cards on one of my dashboards that use card_mod to change the color of the text and icon. Everything is working great - almost. This bit of code is working flawlessly with no issues:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states.sensor.msm_wx_dana_ia_temp.state | int < 32 %}
lightblue
{% elif states.sensor.msm_wx_dana_ia_temp.state | int < 55 %}
yellow
{% elif states.sensor.msm_wx_dana_ia_temp.state | int < 90 %}
lightgreen
{% else %}
red
{% endif %}
}
With this configuration, the temperature display changes appropriately as the outside temperature changes. So building on that, I decided to do the same for the entity card that reports the status of my NAS. Here is the code that I wrote:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states.sensor.macnas01_status.state == 'good' %}
lightgreen
{% else %}
red
{% endif %}
}
This passes muster in YAML configuration checkers, but it does not return the results I expect. In fact, it returns nothing at all. The text and icon remain the same at all times. Checking the logs, I see this:
Error while processing template: Template<template=(:host { --paper-item-icon-color: {% if states.sensor.macnas01_status.state == āgoodā} lightgreen {% else %} red {% endif %} } ha-card { color: {% if states.sensor.macnas01_status.state == āgoodā} lightgreen {% else %} red {% endif %} })
and
jinja2.exceptions.TemplateSyntaxError: unexpected ā}ā
Looking at the code, every { is matched with a } - there are 4 of each.
What am I overlooking?
Sean