I just found out that it isnāt a problem in card-mod, but in the calendar card itself. My apologies.
Has anyone had any luck getting blur backdrop-filters to work with the three dots menu in the header? i got them working great with everything else [card mod theme below], but i canāt seem to get it working for this particular menu even applying what seem like the appropriate settings directly from developer tools in my browser. spent hours yesterday messing around in the css/developer tools thing in my browser. i found the right elements (under mdc-menu-surface) and all ā I can change the color and opacity, but canāt get blur to work.
and i donāt even necessarily need it to blur the entire rest of the page like it does when i open more info menus and such ā if i could even just blur the background of the menu itself (note how you can still see the x behind the menu in the screenshot quite clearly) that would be great.
weird thing is i do see a slight change when i add backdrop-filter: blur(20px) inside of developer tools - but it doesnāt seem to actually blur, it just sort of changes the opacity a bit.
hereās my theme yaml that seems to be working for blur on the other elements (pop-ups, edit windows, more info, etc.). (I know thereās some redundancy and probably some outdated variable names, but donāt think thatās the issue)
mdc-theme-surface: rgba(25,15,40,.5)
mdc-theme-text-icon-on-background: white
backdrop-filter: blur(15px)
dialog-backdrop-filter: blur(15px)
-webkit-dialog-backdrop-filter: blur(15px)
-webkit-backdrop-filter: blur(15px)
-moz-backdrop-filter: blur(15px);
-o-backdrop-filter: blur(15px);
-ms-backdrop-filter: blur(15px);
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: var(--background-blur-color)
card-mod-theme: mytheme
card-mod-root: |
.header {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
-moz-backdrop-filter: blur(15px);
-o-backdrop-filter: blur(15px);
-ms-backdrop-filter: blur(15px);
}
.header::before {
box-shadow: none;
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
-moz-backdrop-filter: blur(15px);
-o-backdrop-filter: blur(15px);
-ms-backdrop-filter: blur(15px);
background: var(--background-blur-color);
}
.mdc-dialog .mdc-dialog__container div.selector {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
could be that blur just canāt possibly be made to work with this particular menu, but iām hoping i wrong. i swear i had it working momentarily like one time, but then developer tools jumped to some arbitrary location and i could never find the setting againā¦itās driving me crazy
Post deleted by author.
No, I posted my findings hoping someone with more experience could help me out. Iām stuck for now, lacking the CSS skills to properly traverse the DOM and understand it.
Iām trying to change the icon color of a binary_sensor in a glace card but I canāt get there. I can change the color of the text and i can change the icon but i can change the color of the icon (based on state being āonā).
Any help would be appreciated!
-
This thread is about THEMES - āhow to style all cards in my setupā. Suggest you to start with āhow to style THIS particular cardā; and it is discussed in a dedicated thread. Check the 1st post ā link at the bottom ā styles for Glance card.
-
For binary_sensors with a defined device_type a colored icon is already supported āout-of-boxā. Default colors may be changed by a user inside a custom theme. So, for these binary_sensors coloring may be done w/o card-mod. Moreover:
ā it may be done not only for binary_sensor with a device_class - it may be done for a binary_sensor w/o a device_class;
ā and even for ANY domain - if you specify a corr. variable (for instance, some āsensorā may only have states āniceā, āuglyā, āgorgeousā - and you may define a variable for each state to specify a color).
I was able to move the tabs to the bottom of my screen and center them horizontally using a combination of Navbar Position and the following in my theme:
card-mod-theme: Mushroom Shadow
card-mod-root-yaml: |
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
Canāt figure out how to increase the height of the tabs though. If I try
card-mod-root-yaml: |
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
height: 110%
}
It seems something is happening but the active tab indicator gets hidden, but the height of the tabs doesnāt change. Any ideas?
Hiding a āsearchā button
There were some solutions to achieve this, but seems that some of them (at lest what I have seen) are not working.
Here is a way for 2023.8.
It supports mobile clients which may have a āSearchā menu item.
card-mod-root-yaml: |
.: |
.header .toolbar .action-items:not(:has(ha-icon-button[slot="actionItems"])):not(:has(.exit-edit-mode)) ha-button-menu mwc-list-item:nth-of-type(1) {
display: none;
}
.header .toolbar .action-items > ha-icon-button[slot="actionItems"]:nth-child(1) {
display: none;
}
BTW, a āsearchā button is still available in āSettingsāā¦(and no way to hide it by card-mod-theme)
1 Like
And this is how to hide all buttons & menu (if anyone really needs this):
card-mod-root-yaml: |
.: |
.header .toolbar .action-items {
display: none;
}
Hi IIdar, how can i change the āflex: 0 1 0%;ā in below ādiv idā i want āflex: 1 1 0%;ā
I tried with flex-grow 1; , but it still dont bite 
I currently have this in my theme:
card-mod-root-yaml: |
.: |
.toolbar {
background-color: transparent !important;
}
.toolbar div.main-title {
display: flex;
flex-grow: 0;
}
card-mod-sidebar-yaml: |
.: |
a:hover paper-icon-item ha-icon {
color: #87bf50 !important;
}
a:hover paper-icon-item .item-text{
#87bf50;
}
a:hover paper-icon-item {
background: #7b7d80;
}
EDIT: i ātemporaryā fixed it in the header-card.js
how do I flash the border of a button card on click?
thank you.
"Sidebar" view: allow to scroll āmainā area w/o scrolling a sidebar
Currently in a āSidebar viewā the whole page is scrolling down if needed.
This mod allows to scroll the āmain areaā independently of a āsidebar areaā.
Available only if the āmain areaā is NOT in one column with the āsidebar areaā.
This is mainly useful for tablets (ofc for desktops as well).
Tested on 1920x1200 desktop, iPad Air 2, iPhone 5S (real devices).
Here captured gifs (emulator in Chrome):
card-mod-view-yaml: |
hui-sidebar-view:
$: |
.container div#main {
max-height: calc(100vh - var(--header-height) - 4px);
overflow-y: auto;
}
@media (max-width: 760px) {
.container div#main {
max-height: unset;
overflow-y: unset;
}
}
PR was proposed as well:
3 Likes
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?