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ā¦
Yes, it sticks it at the top and stays there when your scroll the page. In my setup I have hidden the HA header bar completely (which thankfully works with new released Kiosk Mode module). And then I use my own statusbar that sticks to the top of my screen.
And at the bottom of my screen I created another horizontal stack with button-cards, to use as the navigation bar to each tab. Which uses bottom variable, making it stick at the bottom.
For that you need mod-card, otherwise you canāt make a stack card sticky as you know. This has worked for me since ever I used it like 2 years ago. But since the latest HA update, it doesnāt work anymore. Seeing as how sticky is just a CSS variable, I think we just need to use a different path in card-mod.
nice, I never had that, and it indeed seems very useful. I do still use the main view icons in the header bar, but have a dashboard menu stack, so I can always have a direct link to those, without having to slide I the menu from the left. We all have our use case
would be great if we could fine the correct element again.
As for the icon change, with has been broken since 3.1.5ā¦ or maybe I need another element for that too?
I think there are more stuff going on with card-mod, I also noticed this line in console You may not be getting optimal performance out of card-mod. while I do have it loaded as a front_end plugin. There is a github ticket for here as well: Performance warning is always showing on 2023.4.0b5 Ā· Issue #267 Ā· thomasloven/lovelace-card-mod (github.com)
I wonder if the performance notice is just a bug that it says that, or it actually isnāt loaded properly as a front_end module anymore for better performance.
Edit: @Mariusthvdb 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.
Btw, I see this warning even if a view w/o card-mod styles is open.
Win+Chrome.
yes. I am back to using my edited 3.1.4 + fix ā¦ see: 3.2.2 does not change icon in views via card-mod-theme Ā· Issue #268 Ā· thomasloven/lovelace-card-mod Ā· GitHub
still seeing the warning, but at least all my icons change as they should (and my header classes work )
btw, the only change there was the original:
querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")
hack as we found in the #beta, so not any further change after that
Using global macros
HA 2023.4 introduced Macros feature which may also be used for card-mod.
Consider this simple case:
ā some CO2 value is displayed in many places on cards of different types;
ā you want to colorize this info dependingly on the value (like āgreen if < 500 ppm, ā¦ā).
Note: a similar output for an icon may be achieved by Custom UI.
Earlier we had to repeat same logic for every card.
Now we can use a global macro like this simple one:
{% macro test_color_co2(input_COLOR_CO2) -%}
{%- if input_COLOR_CO2 | int <= 500 -%}
color: green !important;
{%- elif input_COLOR_CO2 | int <= ... -%}
color: orange !important;
{%- elif input_COLOR_CO2 | int <= ... -%}
color: red !important;
{%- else -%}
color: magenta !important;
{%- endif -%}
{%- endmacro %}
Then this macro is used for every card:
- type: entities
entities:
- entity: sensor.xiaomi_cg_1_co2
card_mod:
style: |
:host {
{% from 'test_macro.jinja' import test_color_co2 -%}
{{ test_color_co2(states(config.entity)) }}
}
...
- type: entity
entity: sensor.xiaomi_cg_1_co2
card_mod:
style: |
.info {
{% from 'test_macro.jinja' import test_color_co2 -%}
{{ test_color_co2(states(config.entity)) }}
}
...
- type: button
entity: sensor.xiaomi_cg_1_co2
show_name: true
show_icon: false
show_state: true
card_mod:
style: |
.state {
{% from 'test_macro.jinja' import test_color_co2 -%}
{{ test_color_co2(states(config.entity)) }}
}
This simple example demonstrates how a complex logic may be defined in one place and then used in many places.
Been experimenting with that same feature yes! Very nice, thanks for the write up Ildar.
My main usage would be the power sensors coloring along with their wattage
I do have a worry though, since this is all Jinja templates. They are evaluated in the backend. Server side. First of all, that might not be good for the efficiency . Secondly, if used heavily , I wonder if this wonāt slowdown the Frontend.
Ofc it wonāt make a difference if you already had these templates in many cards, and now only change to this import.
However, adding this to a new dashboardā¦ I am truly worried/interestedā¦.
One specific ask: personally I would only have these macros spit out the color, and keep the key word color: inside the card_mod style. This way you can easily see what your are doing without going to the templates folder and check
Sure, but imagine a more complex case: you need to style more than one property. In the simplest case like described above - yes, your alternative seems to be more descriptive.