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?
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