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)
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
Add double quotes around good. Use double quotes for non-interger states.
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states.sensor.macnas01_status.state == "good" %}
lightgreen
{% else %}
red
{% endif %}
}
Thank you for the suggestion! That did not work, unfortunately. The log also shows the same error.
Sean
I tested it and it worked for me. What card are you applying it to that doesnāt work?
An entity card:
- type: entity
entity: sensor.macnas01_status
name: NAS Health
Seems like it should work for me too. Thatās why Iām struggling so hard with this.
Sean
Does it work if itās a stand alone card? Change the eni
type: entity
entity: sensor.macnas01_status
icon: mdi:mushroom
name: NAS Health
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states.sensor.macnas01_status.state == "good" %}
lightgreen
{% else %}
red
{% endif %}
}
Try this as wellā¦
type: entity
entity: sensor.macnas01_status
icon: mdi:mushroom
name: NAS Health
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states('sensor.macnas01_status') == "good" %}
lightgreen
{% else %}
red
{% endif %}
}
I apologize, Iām not sure what you mean as a āstand-aloneā card. Right now, itās an entity card that doesnāt do anything else but show the health of the NAS. Yes, itās in a grid with several other cards, but that one entity - NAS Health - doesnāt share anything with any other card or sensor. Iāll try your suggestions nowā¦
Your code started with a - so I knew it had to be part of a card with other entities. Being in a grid with a larger card means it could simply be an indention issue.
A standalone card to me means just one entity.
Ah! I get what youāre saying. Actuallyā¦ yes, when I go to a different dashboard and set that up as one card by itself, it does indeed work. So - perhaps it might be an indention issue then? I know, indention issues cause a ton of problems. Now if thatās the case, I have to figure out exactly WHERE that indention issue falls.
If you want to message me the code to the card if itās large, I can take a look too.
OK - Iāll do that, if you donāt mind. Iām looking squarely at the cards that work for my weather, same type of code. Frustrating.
A single misplaced } can cause everything after it to not work.
HUGE shout-out to LiQuid_cOOled!
Working through the problem together, the fix was found and itās smooth sailing again.
Couldnāt have done it without you!