Hi guys,
Iām new one in HA ecosystem. Now Iām building my home heating system with automation.
How can I remove all actions from this card? So it could only show the status of the variable. I donāt need tap or hold action on this element.
For this card I use this code:
- show_name: false
show_icon: true
show_state: true
type: glance
entities:
- entity: light.tz3000_u3oupgdy_ts0004_light
state_color: true
title: Status of Heater
style: |
ha-card {
background: {% if is_state('light.tz3000_u3oupgdy_ts0004_light', 'on') %}
rgba(150, 120, 0, 1)
{% else %}
rgba(100, 20, 0, 1)
{% endif %};
}
josephny
October 13, 2023, 1:27pm
1484
Iām trying ā really. I must just not be too sharp.
I have a lovelace with the following code and Iām trying to set a theme so all the 20+ cards have the same look.
The first card in the list has the card-mod properties that work, but I just canāt get a theme working.
views:
- title: Home
type: custom:layout-card
layout_type: grid
layout:
card-mod-theme: borderless-theme
grid-template-columns: 20% 20% 20% 20% 20%
grid-template-rows: auto
column-widths: 100%
width: 300
card_margin: 3px 1px
columns: 5
max_cols: 5
reflow: true
cards:
- type: gauge
entity: sensor.125_1st_floor_temperature
name: 125 1st Fl
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
padding: 0px !important;
}
- type: gauge
entity: sensor.125_2nd_floor_temperature
name: 125 2nd Fl
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.371_1st_floor_temperature
name: 371 1st Fl
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.371_2nd_floor_temperature
name: 371 2nd Fl
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.371_hydronic_temperature
name: 371 Hydronic
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.carmine_temperature
name: Carmine
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001829f81_temperature
name: Eddie
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.76_temperature
name: 76
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_10013932b1_temperature
name: 629
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.630_temperature
name: 630
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001dabf2f_temperature
name: 630 Water
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.1st_floor_room_temperature
name: 255 1st Fl
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.2nd_floor_east_room_temperature
name: 255 2nd Fl East
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.2nd_floor_west_room_temperature
name: 255 2nd Fl West
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.3rd_floor_room_temperature
name: 255 3rd Fl
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.well_ecobee_temperature
name: Well
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001392bce_temperature
name: White
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001392bd9_temperature
name: Purple THR316
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_100139390d_temperature
name: Blue Closet
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_100139392c_temperature
name: White Water
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001829f54_temperature
name: Green
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001dabe7c_temperature
name: Blue THR316
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.sonoff_1001393418_temperature
name: Purple Water
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
- type: gauge
entity: sensor.shop_temperature
needle: true
min: 30
max: 100
segments:
- from: 0
color: '#37aadb'
- from: 60
color: '#16ab90'
- from: 74
color: '#ab1616'
I created a folder /config/themes
and a file in that folders called: borderless-theme
The contents of that file, and how to invoke the theme from the lovelace code above is where I get lost.
Can someone please help?
Thank you!
/moved question to mainthread
Hi guys!
One example is that all the cards are getting a āglassā background and a new border-radius, these changes are made in the theme using:
card-mod-theme: homeplus
card-mod-card: |
ha-card {
background: rgba( 28, 28, 18, 0.5 );
backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
border: 0px;
border-radius: 18px;
}
This works like a charm, but since I added this code, ALL the card mod styling for individual cards stopped working.
For example: A specific card should have a larger font-size, which I added to the card using:
card_mod:
style: |
ha-card {
font-size: 3rem;
font-weight: bold;
background-color: rgba(0,0,0,0) !important;
border: 0px;
margin-top: 4rem;
}
But no matter what I try the card mod used on individual cards is getting ignored once there is any card mod in the configuration file.
I also removed all the card mod code from the theme file and once I did that all the other card mod started to work again.
Could it be that you need to decide between styling using the theme file ore styling one card at a time?
Has anyone got an idea why this is happening?
All the best
as the browser_mod custom resource seems to really bug 2023.11, Iāve disabled that for now, and Frontend seems much more robust. browser_mod slows the Frontend in 2023.11 up to being completely unresponsive Ā· Issue #652 Ā· thomasloven/hass-browser_mod Ā· GitHub
I really m miss my custom titles though, which now defaulted to Home Assistantā¦
do we have a card_mod way maybe to set that sidebar menu title?
I still have an ancient custom card by Maykar doing that, but before I try that, would think the modern card_mod resource to be more reliable.
Maykars card is still working, needs a small adaptation to use the ha-drawer, but other than that points to:
const sidebar = document
.querySelector("home-assistant")
.shadowRoot.querySelector("home-assistant-main")
.shadowRoot.querySelector("ha-drawer")
.querySelector("ha-sidebar");
const title = sidebar.shadowRoot.querySelector("div.title");
and yes, it works.
since I have some other sidebar mods in place, made by Ildar I tried adding this
card-mod-sidebar-yaml: |
.: |
.menu .title {
content: 'custom title';
}
or as template, like the other mods:
card-mod-sidebar-yaml: |
.: |
.menu .title {
content: "{{'custom title'}}";
}
but it wont overwrite the Home Assistant.
Please have a look how to proceed?
matata
November 12, 2023, 1:12pm
1491
Hi, what is the correct notation for this pleaseā¦
But together not working:
card-mod-card-yaml: |
template-entity-row.mush:
$:
state-badge:
$: |
ha-state-icon
{
position: relative;
top: -1px;
}
template-entity-row.mush:
$: |
state-badge {
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
margin: 0 15px;
--mdc-icon-size: 22px;
}
Can you help me please?
Absolutely untested:
template-entity-row:
$:
state-badge:
$: |
ha-state-icon {
...
}
.: |
state-badge {
...
}
and have no idea what āmushā is, is it a custom class you define for particular card?
matata
November 12, 2023, 2:14pm
1493
Excelent! Like always.
1 Like
Adding badges to a sidebar
Some time ago I described how to customize a sidebar - particularly how to add a badge:
Here a badge (a red circle with some number) was shown in an expanded sidebar.
code
card-mod-sidebar-yaml: |
.: |
a[data-panel='lovelace-security'] paper-icon-item {
{% if is_state('input_boolean.test_boolean','off') %}
{% set COLOR = 'var(--theme-security-off)' %}
{% set ICON = 'mdi:shield-off' %}
{% else %}
{% if states('input_number.test_security_number_of_issues')|float(default=0) > 0 %}
{% set COLOR = 'var(--theme-security-issues)' %}
{% set ICON = 'mdi:shield-alert' %}
{% else %}
{% set COLOR = 'var(--theme-security-on)' %}
{% set ICON = 'mdi:shield-check' %}
{% endif %}
{% endif %}
--sidebar-text-color: {{COLOR}};
--sidebar-selected-text-color: {{COLOR}};
--sidebar-selected-icon-color: {{COLOR}};
--sidebar-icon-color: {{COLOR}};
--card-mod-icon: {{ICON}};
}
:host(:not([expanded])) a[data-panel='lovelace-security'] paper-icon-item ha-icon:after {
{% set NUMBER_OF_ISSUES = states('input_number.test_security_number_of_issues')|float(default=0) %}
{% if is_state('input_boolean.test_boolean','on') and NUMBER_OF_ISSUES > 0 %}
content: "{{NUMBER_OF_ISSUES|round(0)}}";
font-size: 0.65em;
font-weight: 400;
left: 26px;
bottom: 14px;
position: absolute;
min-width: 21px;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid var(--sidebar-background-color); /* needed if an icon's color = same as a badge's color */
background-color: var(--theme-security-issues);
line-height: 20px;
text-align: center;
color: var(--text-accent-color, var(--text-primary-color));
{% endif %}
}
a[data-panel='lovelace-security'] paper-icon-item .item-text:after {
{% set NUMBER_OF_ISSUES = states('input_number.test_security_number_of_issues')|float(default=0) %}
{% if is_state('input_boolean.test_boolean','on') and NUMBER_OF_ISSUES > 0 %}
content: "{{NUMBER_OF_ISSUES|round(0)}}";
{% if NUMBER_OF_ISSUES < 10 %}
font-size: 14px;
padding: 0px 6px;
{% elif NUMBER_OF_ISSUES >= 10 and NUMBER_OF_ISSUES < 100 %}
font-size: 11px;
padding: 0px 4px;
{% elif NUMBER_OF_ISSUES >= 100 and NUMBER_OF_ISSUES < 1000 %}
font-size: 8px;
padding: 0px 3px;
{% else %}
font-size: 6px;
padding: 0px 2px;
{% endif %}
font-weight: 400;
left: calc(var(--app-drawer-width,248px) - 42px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
background-color: var(--theme-security-issues);
line-height: 20px;
text-align: center;
color: var(--text-accent-color, var(--text-primary-color));
{% endif %}
}
theme-security-on: rgb(76,175,80)
theme-security-issues: red
theme-security-off: var(--amber-color)
4 Likes
R_A_L_F
December 3, 2023, 1:38pm
1496
Hello,
I use the Whats App theme and would like to hide the conversation button in this theme?
According to the browser it is the following button:
I have added the following code at the end of the theme. However, this has no effect:
card-mod-theme: whatsapp_theme
card-mod-root-yaml: |
.mwc-icon-button[label="Start conversation"] {
display: none !important;
}
This is how it currently looks:
.....
paper-toast-color: var(--primary-text-color)
mdc-linear-progress-buffer-color: rgba(0,0,0,0.2)
data-table-background-color: var(--wa-bg-2)
card-mod-theme: whatsapp_theme
card-mod-root-yaml: |
.mwc-icon-button[label="Start conversation"] {
display: none !important;
}
What am I doing wrong?
I havenāt been with HA that long. Thanks a lot.
What is a āconversational buttonā?
Nitram
December 4, 2023, 3:33pm
1498
I would like to restyle the tile card globally, so that primary and secondary text are more readable, by setting the font-width of them. I can do this with one card:
On the left side, the default. On the right, after using card-mod.
This is how I change this:
entity: lock.achterdeur
tap_action:
action: toggle
card_mod:
style:
ha-tile-info$: |
.info .primary {
font-weight: 900;
letter-spacing: 0px;
}
.info .secondary {
font-weight: 700;
}
All this is well and good, but I want to change my theme, so that ALL tile cardsā text is styled this way.
card-mod-card-yaml: |
"ha-tile-info$": |
.info .primary {
font-weight: 700;
letter-spacing: 0px;
}
.info .secondary {
font-weight: 500;
}
This is the browser source I try to āreachā:
I probably misunderstand the concept somehow, but can anybody shed a light on this, please?
R_A_L_F
December 4, 2023, 7:05pm
1499
I use the Lovelace UI in IOBroker. GitHub - ioBroker/ioBroker.lovelace: Visualization with Lovelace-UI
card-mod-theme: THEMENAME
card-mod-root: |
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label="Start conversation"] {
display: none;
}
But unfortunately that no longer works.
R_A_L_F:
microphone
I do not see this button.
Anyway, try apply a method used to hide a āSearchā button.
in a search to be as efficient with global card-mods, I was looking at the examples in the card-mod documentation, especially in the card-mod-themes cookbook section.
however, what is mentioned in those docs wont work for me unfortunately. I cant make a valid class out of this
style: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
}
I have this as an include, and use it on a binary entiy like
- entity: binary_sensor.washer_active
card_mod: !include /path/to/card_mods/active_icon.yaml
and it works very fine. Ofc, this is per entity, and Id love to set it on lets say all binary_sensors.
canāt we do that with card_mod_theme under card-mod-row: | ?
something like:
theme-mods:
card-mod-row: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
{% if state_attr(config.entity,'device_class') == 'running' %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
{% endif %}
}
edit
heck we canā¦ this does kick in now on my ārunningā binaries (Iāve set my threshold binary sensors to use that class, but they were showing play/stop icons, which I believe is a wrong choice for the class, because my washing machine is not a radio, and thus hope to PR that.
Seasonās Greetings!!
Just wondering if anyone has been able to animate a sidebar iconās color - I couldnāt figure it out. Best attempt was this:
@keyframes rgb1 {
0%, 49% {
color: lime;
}
50%, 100% {
color: red;
}
}
a[data-panel='config'] paper-icon-item ha-svg-icon {
animation: rgb1 5s linear infinite;
}
I also removed the āha-svg-iconā, added !important to everythingā¦ An opacity animation works and the item-text can use the color animation but I canāt get the icons to do the same.
Thanks!!
card mod thread ā 1st post ā link at the bottom ā themes ā sidebar
You should define a path based on a REAL situation, not randomly.
Faecon
December 27, 2023, 10:04am
1505
Can I use card mod to correct the font ?
The wrrong font is in the custom:time-picker-card, other cards are custom:mushroom-template-card
