Sorted, thanks. Not quite the solution you posted, although Iām sure that would work too. What didnāt help was that I was using the wrong :host.
Hereās the working code:
card_mod: null
style: >
{% if is_state('input_boolean.default_battery_storage_mode_correct' , 'on' ) %}
:host { --mdc-select-fill-color: green;}
{% else %}
:host { --mdc-select-fill-color: red; }
{% endif %}
Has anyone modified their expander card with card-mod, particularly the title size and color?
could anyone help me with this? I want to put a background color in green when certain input boolean is true, but itās not working:
type: gauge
entity: sensor.mysensor
name: name
card_mod:
style: |
ha-card[state='on'] {
{% if is_state('input_boolean.mybool', 'on') %}
--ha-card-background: #30bf51;
{% endif %}
}
also tried:
type: gauge
entity: sensor.mysensor
name: name
card_mod: null
style: |
{% if is_state('input_boolean.mybool' , 'on' ) %}
:host {ha-card: green;}
{% else %}
:host {ha-card: red; }
{% endif %}
This is my current attempt sans any advice or input from the community. It does not work ā¦ I know Iām not getting it but, at least for me, Iām not finding it that intuitive what to call or how.
- type: thermostat
entity: climate.dining_room_minisplit_f
card_mod:
style: |
ha-card
.content
.temperature {
display: "{{ states("sensor.dining_room_minisplit_f_current_temperature") }}" !important;
}
Any input yet?
With new version 2023.4 comes new styling issues.
I canāt understand how to get the right CSS selector 
stack-in-card is back with some borders and I know how to correct it using the dev console but impossible to get the right card_mod syntax 
To remove the lines, I change the border-style to none
Can someone please help me?
type: custom:stack-in-card
direction: vertical
cards:
- ...
- ...
- ...
card_mod:
style: |
ha-card: {
border-style: none;
}
is not working ā¦
I would like to customize the card header font-size and the header line-height of the ācustom:power-flow-cardā.
type: custom:power-flow-card
title: Power Flow now
min_flow_rate: 3
max_flow_rate: 10
watt_threshold: 7800
kw_decimals: 3
w_decimals: 0
entities:
battery: sensor.battery_charge_discharge_power
battery_charge: sensor.battery_state_of_capacity
grid: sensor.power_meter_active_power
solar: sensor.inverter_input_power
inverted_entities: grid,battery
card_mod:
style: |
ha-card {
width: 360px;
height: 360px;
}
.card-header {
color: red;
font-size: 10px;
line-height: 10px;
padding: 0px;
}
The styling for the ha-card is working but not for the card-header.
Any idea how to manage?
As you can see, the header is in the shadow-root. So you must address it via $. You will find this above in the thread with several examples.
this is for card-mod-theme really, but since you mention the header in the Shadow root now, please have a look how I should change a class to adapt to that?
.: |
ha-card.class-header-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
is my current class, and we now need to use:
card_mod:
style:
$: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
must be a simple change but I didnt fix it yet, and it killed everything else 
please have a look how I should adapt the class?
Wrote a new issue on the not changing view icons, now we have 3.2.2 which is a complete rebuild:
we can still go back to a slightly modified 3.1.4 (I have it done and works ok, btw, also fixing the Shadow root mods in the .cardheader) but I really dont want to, and hope the card can be updated to bring back that functionality once again
The following is working - Thanks!
card_mod:
style:
$: |
.card-header {
font-size: 14px !important;
line-height: 0px !important;
padding-left: 14px !important;
padding-top: 18px !important;
}
.: |
ha-card {
width: 360px;
height: 380px;
}
I figured out how to make the icon in custom:mushroom-entity-card to spin.
code:
type: custom:mushroom-entity-card
entity: input_boolean.test_switch_card
card_mod:
style: |
mushroom-shape-icon {
{% if states('input_boolean.test_switch_card') == 'on' %}
--card-mod-icon: mdi:lamps;
--shape-animation: spin 1.5s linear infinite;
{% else %}
--card-mod-icon: mdi:lamps-outline;
--shape-animation: spin 1.5s linear;
{% endif %}
}
more info: github link
feel free to add it to your list of example card-mod.
Hi,
I was using card mod configuration in theme, in order to move the header to the bottom. Seems to be broken after upgrading to 2023.04.
Any suggestion for the solution?
It appears app-header has been deprecated when using the element inspector. Itās now split into two elements which are .header and .toolbar.
You could try renaming app-header in your card-mod-theme to .header e.g.
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 480px) {
app-header {
display: none;
opacity: 0;
}
}
now becomes
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 480px) {
.header {
display: none;
opacity: 0;
}
}
It semi-working for me using this method, but a consequence of it (at least in my config) is I am unable to actually get the header to fully display ānoneā - this just removes the action buttons but leaves the header there. It also seems to prevent the sidebar from being opened on mobile devices when swiping from left to right.
However for your application of just moving it, rather than hiding it, might work.
I was able to fix that, using above suggestion for replacing āapp-headerā with ā.headerā, āapp-toolbarā with ā.toolbarā, and some more adjustments.
Here is my full theme configuration, in case anyone want to compare.
This fix unfortunately isnāt working for me
card-mod-root: |
/* ___________ Bottom tabbar ___________ */
.header {
top: auto;
bottom: 0;
transform: translate3d(0px, 0px, 0px) !important;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
-moz-backdrop-filter: blur(50px);
-o-backdrop-filter: blur(50px);
-ms-backdrop-filter: blur(50px);
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
.header::before {
box-shadow: none;
height: 20px;
bottom: -20px;
}
.toolbar {
height: 80px !important;
padding: 4px 8px 20px 8px;
background-color: rgba(0,0,0,0) !important;
}
.header div[sticky] {
margin: -20px 0 20px 0 !important;
transform: none !important;
}
ha-tabs, ha-menu-button, ha-button-menu {
color: var(--contrast20);
}
ha-tabs, paper-tabs {
--paper-tabs-selection-bar-color: none !important;
}
paper-tab {
color: var(--contrast10);
border-radius: 16px;
}
paper-tab.iron-selected {
color: var(--contrast20);
}
ends up just blurring my whole homescreen and leaving the toolbar at the top of the page. Admittedly, Iām not amazing at CSS so I could be really borking this.
Please discuss these card-mod-theme questions in a corresponding thread.
Hey,
I thought this is card mod thread.
Better to check first:
Sadly some card-mod stuff changed as well with 2023.4, in my case none of thesticky code works anymore. I used this to create a sticky header bar (horizontal-stack) with icons in it, but now the sticky part doesnāt work anymore:
</s> <s>type: custom:mod-card</s> <s>card_mod:</s> <s> style: |</s> <s> ha-card {</s> <s> --ha-card-background: var(--primary-color) !important; </s> <s> height: 40px !important;</s> <s> background: var(--primary-color) !important;</s> <s> border-radius: 0px !important;</s> <s> -webkit-box-shadow: var(--ha-card-box-shadow); </s> <s> -moz-box-shadow: var(--ha-card-box-shadow); </s> <s> box-shadow: var(--ha-card-box-shadow); </s> <s> } </s> <s> .card-content {</s> <s> padding: 0</s> <s> } </s> <s> :host {</s> <s> z-index: 999;</s> <s> position: sticky !important;</s> <s> position: -webkit-sticky !important;</s> <s> top: 0;</s> <s> } </s> <s>
Edit: sticky element was broken due to Kiosk Mode module. I always used to hide my header with card-mod theme. However, since that was broken I decided to try the new Kiosk Mode at teh same time as when I upgraded everything else. Disabling Kiosk Mode, fixes sticky cards again.
not sure if I see what that does, but why not simply use that stack without any card_mod? I have a horizontal stack as menu bar on all of my views as is
edit
wait, it does this: How To Create a Sticky Element ?
that Is cool now I want that too, mine scroll away indeedā¦