Cannot say for sure, not using this card(((
Trying to do this now, this goes in the theme file right? Also how do I select the tab I want the icon on specifically? Thanks.
Addressed by a tabās label:
aria-label='badge_in_tab'
Yes.
See more detailed examples here or in Github how card-mod is used in themes.
Does card_mod not affect iframe?
Trying to remove the header but itās not working.
type: custom:mod-card
card_mod:
style: |
.mdc-top-app-bar {
display: none !important;
}
card:
type: iframe
url: >-
/media-browser/browser/app%2Cmedia-source%3A%2F%2Fnest/
aspect_ratio: 150%
If you are asking about modding iframe card - then you are asking in a wrong thread.
Go to card-mod thread.
But I guess this about modding a subviewās header, right?
Then why the iframe here in your code?
Did latest update (2023.10.0) āmessed upā card-mod-root-yaml ā¦ again ? , or is it just my installation ?
- Fixed by renaming card-mod-root-yaml TO card-mod-root
- and card-mod-sidebar-yaml TO card-mod-sidebar
mhhh, weird
And now i see core-2023.10.1 released ā¦ guess it should be āsafeā , in this matter
Oh right this is the themeās card-mod oops.
Also no Iām trying to put the media page in a iframe card on one of my dashboards, not a subview, Im trying to remove the header inside the media page in the iframe cuz I donāt need that to show on the card. Nothing to do with a subview, its the iframe card.
Hi guys,
Iām new one in HA ecosystem. Now Iām building my home heating system with automation.
I have a variable with a ālight.ā type. I want to show itās status āON or OFFā in lovelance as a Glance element.
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.
Is there a way to remove all actions from card with card-mod?
Please help, someone who can.
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 %};
}
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
Moved to other topic
Hi guys!
I am currently redesigning my entire dashboard using card-mod to change the look of all the cards.
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?
But the documentation stated that you could combine the two styling methodsā¦
Has anyone got an idea why this is happening?
All the best
David
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?
thx
Hi, what is the correct notation for this pleaseā¦
This works:
This works too:
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?
Excelent! Like always.
Thank you Ildar!
Yes, .mush is my class.
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.
This mod will add it to the minimized sidebar too:
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)
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?
Finally, the following CSS code should be added to the button:
I havenāt been with HA that long. Thanks a lot.
BR
What is a āconversational buttonā?
Post a screenshot.
If you mean āAssistā - it does not have that ālabelā.
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.
However, I donāt know what to add to my theme.
This is what I tried:
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?