Thank you for this Ildar! Iāve been trying to hide the Assist button for some time now and had given up until I saw your post. This worked perfect for hiding the Assist button as well.
hiding those menu items is super robust nowadays with the Kiosk-mode custom card. In fact, Ive removed all hide_xxx from my themes and have Kiosk mode take care of it.
its options are hugely expanded, and there is but 1 item it cant hide yet, (and I wont tell because you might not even be bothered by it 
)
anyways, install Kiosk mode and make the card_mod_themes more robust, but not having to take care of it anymore.
Its very actively developed currently so cant underdress its usefulness
Hello,
with the new energy panel color option. I realized that it is only the bars that change color, but not the sources.
I modified my theme to use card_mod and modify the source colors.
mushroom_noborder:
ha-card-border-width: 0
energy-grid-consumption-color-0: red
energy-grid-consumption-color-1: green
card-mod-theme: mushroom_noborder
card-mod-card: |
ha-card > div > div > table > tbody > tr:nth-child(1) >
td.mdc-data-table__cell.cell-bullet > div {
background: red !important;
}
ha-card > div > div > table > tbody > tr:nth-child(2) >
td.mdc-data-table__cell.cell-bullet > div {
background: green !important;
}
modes:
light: {}
dark: {}
1 Like
Helloā¦ pleaseā¦
This code work for me in card yaml
But, in theme not workig.
ā¦
What is wrong please?
card-mod-card-yaml
If I try *-yaml ā¦ styles not write in
because āha-card.xxxxx xxxx $:ā is a wrong syntax.
Thank you so muchā¦
Only round-slider$ on start works greatā¦ but how i select only thermostat card?
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.
1 Like
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