Is it right to loose every card_mod addition if editing an entry via gui and visual editor?
In the second the VE opens the card_mod is on vacation to dev/null or so.
How to prevent it?
There is an open issue for this.
Hello together,
I would like to change the color of my blind icon to orange in case my blind is not āclosedā. Somehow I managed the code but it does not update once the status is changing, the color will stay even status changed. Only via browser refresh the color will change accordingly. Many thanks for support upfront!
My questions:
- In general: As I would like to change the icon color of all blinds in case not āclosedā is there a āsmarterā way to achieve this than using card-mod where I have to add this code in every place? Maybe via theme somehow centrally?
- If not and card-mod is the only available optionā¦ what Iām doing wrong as a status change will not change the icon color again?
My code
type: vertical-stack
title: RolllƤden
cards:
- type: custom:mushroom-cover-card
entity: cover.hausrollladen
tap_action:
action: more-info
double_tap_action:
action: toggle
show_position_control: false
show_buttons_control: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
:host {
{% if states('cover.hausrollladen')!='closed' %}
--card-mod-icon-color: orange;
{% endif %}
}
@RkcCorian There are two methods you can use. Keep the Mushroom template card with something similar to this:
type: vertical-stack
title: RolllƤden
cards:
- type: custom:mushroom-template-card
entity: cover.hausrollladen
icon: mdi:blinds-horizontal
primary: Your Device
secondary: |
{% if is_state(config.entity, 'open') %} Open
{% else %}
Closed
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: toggle
icon_color: >
{% if is_state(config.entity, 'open') %}
orange
{% else %}
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
or just use the Mushroom-Cover-Card like this:
- type: custom:mushroom-cover-card
entity: cover.pc_curtains
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
color: {% if is_state(config.entity, 'open') %} orange
{% else %}
{% endif %};
background: none !important;
}
ha-card {
background: none !important;
}
1 Like
Many thanks!!
1 Like
Thermostat Card: Disable More-Info and Slider
- type: thermostat
entity: climate.my_thermostat
card_mod:
style:
.: |
.more-info {
width: 0;
}
ha-state-control-climate-temperature$:
ha-control-circular-slider$: |
g#interaction {
display: none;
}
Before:
(āhandā style pointer indicating slider grab, and āmore infoā button available)
After:
(āarrowā style pointer indicating no slider grab, and āmore infoā button not present)
The plus and minus buttons still function with this configuration.
Enjoy
5 Likes
So at this update of card-mod I actually managed to read the memo!
And this time I did see the performance improvement recomondation to install as āfrontend moduleā 
so I added this:
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
Running both Yaml- and gui-dashboard
lovelace:
mode: storage
card-mod installed via HACS
have/had working configs before adding the frontend/extra-module, ,so how do I actually verify that my new setting works ??
- it seems to be quicker, but that might just be the placebo-effect that is tricking me (again?) ?
using Chrome on laptop, CompanionApp on Android and CATT to NestHub
#doveryay, no proveryay
Did you crop the images wrong? Both look the same to me. I am guessing you removed the info underneath the + and -, judging from your code.
Still have not figured out how to add information to the state in the slider-entity-row. Anybody have any idea what I can try?
Information is there. Maybe the state does not have enough room to show the info and I just thought I placed it incorrectly? No ideaā¦ weird and annoying not to get it to work -.-
or if overflow visible
but of course this then does not work properly in mobile view where width is limited
I hope that somebody can help me with this:
I would like to have the three dots in this picture, the icon, smaller.
Somehow I canāt find out how to make it smaller. This is the currect code of the todo list: (yes, itās a mess, but it works)
- type: todo-list
entity: todo.albert_heijn
card_mod:
style:
ha-textfield:
$: |
.mdc-text-field__input {
color: white !important;
}
.mdc-text-field {
--mdc-text-field-fill-color: transparent;
height: auto !important;
--text-field-padding: 0px 0px 5px 5px;
}
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.: |
ha-card {
--mdc-typography-subtitle1-font-size: 11px;
#background: #00A0E2;
background: url('/local/images/background_image/albert_heijn.png');
background-size: 100%;
box-shadow: none;
height: 242px !important;
width: 100%;
max-height: 242px; /* Set a maximum height for the card */
overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
@media (max-width: 767px) {
height: 180px; /* Adjusted height for mobile */
max-height: 180px; /* Set a maximum height for the card */
}
@media only screen and (min-device-width: 360px) and (max-device-width: 1440px) and (-webkit-min-device-pixel-ratio: 3) {
height: 205px;
max-height: 205px;
}
}
:host {
--mdc-checkbox-ripple-size: 20px;
#--mdc-checkbox-state-layer-size: 5px;
--mdc-text-field-idle-line-color: grey;
--mdc-text-field-hover-line-color: red;
--mdc-theme-primary: grey;
}
ha-checkbox {
padding-left: 12px;
}
::-webkit-scrollbar {
display: none;
}
ha-icon-button.reorderButton,
ha-icon-button.addButton {
display: none !important;
}
.checked {
margin: 0px 0px !important;
font-size: 11px;
}
.checked span {
visibility: hidden;
position: relative;
}
.checked span:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "Afgevinkt"
}
.divider {
display: none;
}
.header {
height: 10px;
font-size: 11px;
padding-left: 50px;
margin-top: 0px;
}
.header span {
visibility: hidden;
}
ha-check-list-item {
min-height: 15px !important;
}
div.header {
margin-top: 0px;
}
Hi Everyone,
I want to style the default thermostat, but I canāt figure out how. I tried tweaking the piece of code @Chriswak used for disabling the slider grab, but no luck.
If someone can point me in the right direction, for example, changing the slider color or removing the state (ex. idle) that would be great!
Iām trying to set the font size in a custom:bignumber-card but canāt seem to figure it out.
Iām able to change the font size in a standard Entity card using the following card_mod code but using the same on the bignumber card doesnāt work.
type: entity
entity: sensor.textpressuretrend
state_color: true
icon: none
card_mod:
style: |
.info .value {
font-size: 24px;
}
Iām guessing the ā.info .valueā is the problem as itās probably not pointing to the correct element within the bignumber card but I donāt know how to find the correct element.
What Iām attempting to do is reduce the font size but keep the card size the same as some others that are grouped together. One of the cards displays some text that sometimes has two lines so the size of the card grows to fit the text.
Iāve also tried using a standard Entity card by hiding the Header but then the text isnāt center aligned within the card and Iāve not been able to figure how to do that either.
Hi All, After a recent HA update as well as card_mod update, my dashboard has some layout issues. Spaces where there was none and backgrounds on instead of offā¦ any direction on where to start would be very much appreciated.
Before (ignore red line around tide times):
After:
1 Like
I have same issues with card mod after updated 
Without knowing the code, no one will be able to help. I expect missing card_mod lines according to the breaking changes.
@EdDickens Try messing with these card_mod: settings
- type: custom:bignumber-card
entity: sensor.basement_sensor
state_color: true
icon: none
card_mod:
style: |
ha-card {
--base-unit: 20px;
padding: calc(var(--base-unit)*2) calc(var(--base-unit)*1.0);
}
Can someone help me out with this question?
I initially started to ask this question on Discord but after a looooong time trying, I finally solved it myself.
Maybe someone else would like something like this, so here is the quesion:
Summary
I know I should know this, but I am still getting it wrong.
I have two style mods which work separately but my syntax for joining them is incorrect.
card_mod:
style:
hui-generic-entity-row $: |
.info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
and
card_mod:
style: |
.state::after {
content: "your string here";
margin-right: 10px;
color: red;
}
- But not sure how to join, because just pasting underneath will result in a broken card.
Adding $: | did not fix it either
card_mod:
style:
hui-generic-entity-row $: |
.info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
$: |
.state::after {
content: "your string here";
margin-right: 10px;
color: red;
}
This works for the state but breaks the hui-generic-entitiy-row
card_mod:
style: >-
hui-generic-entity-row $: |
.info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
.state::after {
content: "your string here";
margin-right: 10px;
color: red;
}
Does anybody know how to join the two correctly? Is it a problem with my usage of $: | or >- or something else?
The solution is
name: ' '
type: custom:slider-entity-row
card_mod:
style:
.: |
.state {
white-space: nowrap;
display: inline-block;
color: green;
}
.state::after {
content: {% if state_attr(config.entity,'current_temperature') != none %} "({{state_attr(config.entity,'current_temperature')}} Ā°C | {{state_attr(config.entity,'current_humidity')}} % | {{states(config.entity.replace('climate.', 'sensor.').replace('_climate', '_valve'))}} %)"{% endif %};
margin-right: 10px;
color: red;
}
hui-generic-entity-row $: |
.info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
.text-content::before {
content: "{{state_attr(config.entity,'friendly_name').replace('eQ-3', '').replace(' Climate', '')}}";
color: magenta
}
.text-content::after {
content: {% if state_attr(config.entity,'current_temperature') != none %} "({{state_attr(config.entity,'current_temperature')}} Ā°C | {{state_attr(config.entity,'current_humidity')}} % | {{states(config.entity.replace('climate.', 'sensor.').replace('_climate', '_valve'))}} %)"{% endif %};
font-size: 0.8em;
#vertical-align: sub;
color: yellow;
}
Which allows you to add all kinds of information.
I colored the different parts for you. Obviously it looks awfull with the colors. Plus of course use either the text-content or the state.
If you want to use the text-content I would recommend setting name: ' ' (notice the space, otherwise it will not do anything).
P.S.: Card is inside entities card and in my case inside auto-entities.
EDIT:
I ended up doing this (for now), which shows the current temperature behind the room name and the current valve position of the thermostat behind the target temperature.
Next todo would be to somehow make the name, the slider and the state a defined width. Mainly so the slider and state are all aligned, but I have not started on that yet.
If anybody knows how to achieve this, then I would appreciate the mod
1 Like
Thanks.
Looks like this is going to work. I just need to figure out the correct ratio between
ābase-unit and height to get the correct font size and keep it centered.
Maybe use em as unit instead of px? I find it useful because pixels are a bit less practical for mobile phones, tablets etc.
In my example above I used em and small value difference make nice (and consistent) visual changes.