dcapslock
August 12, 2026, 7:54am
10060
Take out the style key. Not required in theme. Indent your template. Use config.entity variable in your template.
Finally, as the selector is a yaml key you need the <thing>-yaml variant. Since 2026.8.0, card-mod fails to load <thing>-yaml sections of the theme, so you will need to migrate to UIX . You will note I have used uix... in the theme, but UIX does work fine if you keep everything as card-mod...
peterdarkmode:
peter-icon-active: rgb(0, 255, 0)
peter-icon-inactive: rgb(0, 0, 255)
peter-icon-unavailable: rgb(255, 0, 0)
uix-theme: peterdarkmode
uix-card-yaml: |
mushroom-shape-icon$: >
{% if is_state(config.entity,'on') %}
.shape {
--shape-animation: ping 1s infinite;
}
@keyframes ping {
30% { box-shadow: 0 0 0 0 rgb(255,0,255); }
100% { box-shadow: 0 0 5px 10px transparent; }
}
{%- endif %}
Example (tested with UIX and 2026.8.1).
1 Like
dcapslock
August 12, 2026, 8:06am
10061
Few things to change:
Need to add style: key
Prepend is automatic if needed so can remove
As you are applying card_mod to the entity row
“div#states” not required
“hui-sensor-entity-row.type-entity $”: not required
type: entities
entities:
- entity: sensor.kitchen_co2
name: ' '
uix:
style:
hui-generic-entity-row $: |
.info.text-content {
display:none;
}
poudenes
August 12, 2026, 9:19am
10062
thank you for the solution!
1 Like
Dear Home Assistant friends, I’ve been trying for a while to set up energy flows—specifically, the yellow flow running from the solar panels to the inverter.
type: picture-elements
image: /local/images/home6.png
elements:
- type: state-label
entity: sensor.kwh_meter_vermogen
style:
top: 9%
left: 42.5%
transform: translate(-50%, -50%)
color: '#3c3c3c'
font-size: 22px
font-weight: bold
- type: custom:button-card
entity: sensor.kwh_meter_vermogen
triggers_update:
- sensor.kwh_meter_vermogen
- sensor.anker_solix_solarbank_max_ac_041_thuis_lading
- sensor.anker_solix_solarbank_max_ac_041_laadvermogen_van_de_batterij
- sensor.anker_solix_solarbank_max_ac_041_ontlaadvermogen_van_de_batterij
- sensor.anker_solix_solarbank_max_ac_041_afnemend_vermogen_van_het_net
- >-
sensor.anker_solix_solarbank_max_ac_041_teruggeleverd_vermogen_aan_het_net
show_name: false
show_icon: false
show_state: false
style:
top: 0
left: 0
width: 100%
height: 100%
transform: none
pointer-events: none
styles:
grid:
- grid-template-areas: '"energy_flow"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- width: 100%
- height: 100%
- padding: 0
- margin: 0
- background: transparent
- box-shadow: none
- border: none
- border-radius: 0
- overflow: visible
- pointer-events: none
custom_fields:
energy_flow:
- position: absolute
- inset: 0
- width: 100%
- height: 100%
- pointer-events: none
custom_fields:
energy_flow: |
[[[
const solar =
parseFloat(states['sensor.kwh_meter_vermogen']?.state) || 0;
const home =
parseFloat(states['sensor.anker_solix_solarbank_max_ac_041_thuis_lading']?.state) || 0;
const charge =
parseFloat(states['sensor.anker_solix_solarbank_max_ac_041_laadvermogen_van_de_batterij']?.state) || 0;
const discharge =
parseFloat(states['sensor.anker_solix_solarbank_max_ac_041_ontlaadvermogen_van_de_batterij']?.state) || 0;
const gridImport =
parseFloat(states['sensor.anker_solix_solarbank_max_ac_041_afnemend_vermogen_van_het_net']?.state) || 0;
const gridExport =
parseFloat(states['sensor.anker_solix_solarbank_max_ac_041_teruggeleverd_vermogen_aan_het_net']?.state) || 0;
// Minimale waarde waarbij de flow zichtbaar wordt
const MIN = 50;
// Actieve flows
const solarActive = solar > MIN;
const chargeActive = charge > MIN;
const dischargeActive = discharge > MIN;
const importActive = gridImport > MIN;
const exportActive = gridExport > MIN;
// Snelheid afhankelijk van vermogen
const speed = (value) => {
if (value <= 50) return 0;
if (value < 300) return 3;
if (value < 800) return 2;
if (value < 1500) return 1.5;
return 1;
};
/*
* ==========================================
* ZONNE-ENERGIE
* zonnepanelen → energiesysteem
* ==========================================
*/
const solarSpeed = speed(solar);
/*
* ==========================================
* BATTERIJ LADEN
* energiesysteem → batterij
* ==========================================
*/
const chargeSpeed = speed(charge);
/*
* ==========================================
* BATTERIJ ONTLADEN
* batterij → energiesysteem / huis
* ==========================================
*/
const dischargeSpeed = speed(discharge);
/*
* ==========================================
* NET IMPORT
* stroomnet → huis
* ==========================================
*/
const importSpeed = speed(gridImport);
/*
* ==========================================
* NET EXPORT
* huis → stroomnet
* ==========================================
*/
const exportSpeed = speed(gridExport);
return `
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1920 1080"
preserveAspectRatio="none"
width="100%"
height="100%"
style="
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
"
>
<!-- ================================================= -->
<!-- ☀️ ZONNE-ENERGIE -->
<!-- ================================================= -->
<path
d="M 1110 185
L 1110 430
L 1110 535"
fill="none"
stroke="#FFD21F"
stroke-width="7"
stroke-linecap="round"
stroke-dasharray="14 22"
style="
opacity:${solarActive ? 1 : 0.18};
filter:${solarActive
? 'drop-shadow(0 0 8px #FFD21F)'
: 'none'};
animation:${solarActive
? `solarFlow ${solarSpeed}s linear infinite`
: 'none'};
"
/>
<!-- ================================================= -->
<!-- 🔵 BATTERIJ LADEN -->
<!-- energiesysteem → batterij -->
<!-- ================================================= -->
<path
d="M 875 650
L 875 790"
fill="none"
stroke="#3399FF"
stroke-width="7"
stroke-linecap="round"
stroke-dasharray="14 22"
style="
opacity:${chargeActive ? 1 : 0.18};
filter:${chargeActive
? 'drop-shadow(0 0 8px #3399FF)'
: 'none'};
animation:${chargeActive
? `chargeFlow ${chargeSpeed}s linear infinite`
: 'none'};
"
/>
<!-- ================================================= -->
<!-- 🟠 BATTERIJ ONTLADEN -->
<!-- batterij → huis -->
<!-- ================================================= -->
<path
d="M 875 790
L 875 650"
fill="none"
stroke="#FF9D32"
stroke-width="7"
stroke-linecap="round"
stroke-dasharray="14 22"
style="
opacity:${dischargeActive ? 1 : 0.18};
filter:${dischargeActive
? 'drop-shadow(0 0 8px #FF9D32)'
: 'none'};
animation:${dischargeActive
? `dischargeFlow ${dischargeSpeed}s linear infinite`
: 'none'};
"
/>
<!-- ================================================= -->
<!-- 🔴 STROOMNET → HUIS -->
<!-- ================================================= -->
<path
d="M 970 830
L 970 700
L 970 650
L 875 650"
fill="none"
stroke="#FF4545"
stroke-width="7"
stroke-linecap="round"
stroke-dasharray="14 22"
style="
opacity:${importActive ? 1 : 0.18};
filter:${importActive
? 'drop-shadow(0 0 8px #FF4545)'
: 'none'};
animation:${importActive
? `gridImportFlow ${importSpeed}s linear infinite`
: 'none'};
"
/>
<!-- ================================================= -->
<!-- 🟢 HUIS → STROOMNET -->
<!-- ================================================= -->
<path
d="M 875 650
L 970 650
L 970 830"
fill="none"
stroke="#32E875"
stroke-width="7"
stroke-linecap="round"
stroke-dasharray="14 22"
style="
opacity:${exportActive ? 1 : 0.18};
filter:${exportActive
? 'drop-shadow(0 0 8px #32E875)'
: 'none'};
animation:${exportActive
? `gridExportFlow ${exportSpeed}s linear infinite`
: 'none'};
"
/>
<!-- ================================================= -->
<!-- ANIMATIES -->
<!-- ================================================= -->
<style>
@keyframes solarFlow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -36;
}
}
@keyframes chargeFlow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -36;
}
}
@keyframes dischargeFlow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 36;
}
}
@keyframes gridImportFlow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -36;
}
}
@keyframes gridExportFlow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 36;
}
}
</style>
</svg>
`;
]]]
Hi all!styles: | and apparently AI isn’t much good at DOM navigation, so I turn to you for help
I don’t mind if UIX or Card Mod is the solution. I use UIX which supports both tags.
I would have thought it would be relatively easy to enable the native section bg, move it to the front, and add a backdrop-blur. After many attempts with AI, I conclude it is not easy. At all.
I just want an entire section of a Sections view to be blurred over in accordance to these conditions. Ideally able to adjust blur amount + opacity + border radius.
{% set is_admin = user in ['e91501a8d72f4c3a8f2fa2e9a63659a6', '03e2ff1c5d1241418a77c2609aa9087b', 'e09a62a480d741309a61316b521c72a8'] %}
{% set guest_mode = is_state('input_boolean.guest_mode_dashboards', 'on') %}
{% if guest_mode and not is_admin %}
I can do it alright with card mod within the card, but I’m looking to put it in a theme so I don’t have to do it a million times. It doesn’t work.
card_mod:
style: |
ha-card {
--ha-card-background: none;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
Again, thank you
dcapslock
August 15, 2026, 8:43am
10065
UIX has section background support which extends the usual background.
This example is Option 2 , no templates which I you can manage yourself.
You need to edit the section in yaml mode for this. Three dots at the top when editing section in UI.
type: grid
cards:
- type: heading
heading: New section
- type: tile
entity: sun.sun
vertical: false
features_position: bottom
background:
uix:
style: |
:host {
--ha-section-background-color: yellow;
border: 2px solid red;
z-index: 1 !important;
filter: blur(10px);
opacity: 0.98 !important;
}
dcapslock
August 15, 2026, 8:56am
10066
Use UIX theme and host element/path selector with class type (added by UIX) is a good way. You can even be more fine grained with the other path selectors including attributes and even properties (think card config as a property - style based on what the heading text is
uix-card-yaml: |
"&.type-heading": |
ha-card {
background: red;
}
Thank you so much
Sorry for all the post edits. I kept having issues and solving them. Here’s what I’ve ended up with in a UIX theme.
UIX Theme:
uix-theme: UIX Theme
uix-macros-yaml: |
is_guest_viewer:
returns: true
template: |
{%- set guest_usernames = [
'GuestUsername'
] -%}
{%- set guest_mode = is_state('input_boolean.guest_mode_dashboards', 'on') -%}
{%- do returns(guest_mode and user in guest_usernames) -%}
uix-card-yaml: |
.: |
{% if is_guest_viewer() %}
:host {
position: relative;
}
:host::after {
content: '';
position: absolute;
inset: 0;
z-index: 9999;
pointer-events: var(--guest-shield, none);
background: transparent;
}
:host(.hiddenforguest) {
filter: blur(4px) !important;
user-select: none !important;
--guest-card-bg: rgba(0, 0, 0, 0.25);
--guest-shield: auto;
}
:host(:not(.type-heading):not(.type-picture-entity)) ha-card {
background: var(--guest-card-bg) !important;
}
{% endif %}
uix-grid-section: |
{% if is_guest_viewer() %}
:host {
position: relative;
}
:host::after {
content: '';
position: absolute;
inset: 0;
z-index: 9999;
pointer-events: var(--guest-shield, none);
background: transparent;
}
:host(.hiddenforguest) {
filter: blur(4px) !important;
user-select: none !important;
--guest-card-bg: rgba(0, 0, 0, 0.25);
--guest-shield: auto;
}
{% endif %}
1 Like
Anyone else experience card-mod or UIX vanishing from sections after being added?
dcapslock
August 16, 2026, 6:03am
10069
If you can break down what you are trying to do to a simple example without your entities etc. it will be easier to take a look. Perhaps juts a button-card with path on picture elemets.
Thanks for your help. In the video, you can see blue and yellow energy lines running from the solar panels to the inverter and from the inverter to the house. I want to see those in my dashboard background as well.
dcapslock
August 16, 2026, 6:27am
10071
What I meant was a simple yaml code example. Your config is way too complex to replicate for reviewing.
2 Likes
I’ve shortened the code so that only one energy flow should be visible; hopefully, this makes things clearer.
type: picture-elements
image: /local/images/home6.png
elements:
- type: state-label
entity: sensor.kwh_meter_vermogen
style:
top: 9%
left: 42.5%
transform: translate(-50%, -50%)
color: '#3c3c3c'
font-size: 22px
font-weight: bold
- type: custom:button-card
entity: sensor.kwh_meter_vermogen
triggers_update:
- sensor.kwh_meter_vermogen
show_name: false
show_icon: false
show_state: false
style:
top: 0
left: 0
width: 100%
height: 100%
transform: none
pointer-events: none
styles:
grid:
- grid-template-areas: '"energy_flow"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- width: 100%
- height: 100%
- padding: 0
- margin: 0
- background: transparent
- box-shadow: none
- border: none
- border-radius: 0
- overflow: visible
- pointer-events: none
custom_fields:
energy_flow:
- position: absolute
- inset: 0
- width: 100%
- height: 100%
- pointer-events: none
custom_fields:
energy_flow: |
[[[
const solar =
parseFloat(states['sensor.kwh_meter_vermogen']?.state) || 0;
const MIN = 50;
const solarActive = solar > MIN;
const speed = (value) => {
if (value <= 50) return 0;
if (value < 300) return 3;
if (value < 800) return 2;
if (value < 1500) return 1.5;
return 1;
};
const solarSpeed = speed(solar);
return `
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1920 1080"
preserveAspectRatio="none"
width="100%"
height="100%"
style="
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
"
>
<path
d="M 1110 185
L 1110 430
L 1110 535"
fill="none"
stroke="#FFD21F"
stroke-width="7"
stroke-linecap="round"
stroke-dasharray="14 22"
style="
opacity:${solarActive ? 1 : 0.18};
filter:${solarActive
? 'drop-shadow(0 0 8px #FFD21F)'
: 'none'};
animation:${solarActive
? `solarFlow ${solarSpeed}s linear infinite`
: 'none'};
"
/>
<style>
@keyframes solarFlow {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -36;
}
}
</style>
</svg>
`;
]]]
dcapslock
August 16, 2026, 11:23am
10073
Thanks. Enough to see what you are trying to do. A button-card will never work as a custom picture element. They are tricky as I know when adding the mold: badge_as_picture_element cross context mold to UIX Forge. You will note there is no other ..._as_picture_element cross context molds.
Saying that, UIX Forge mold: badge_as_picture_element can get you a solution.
You will need a badge that can easily give you a line to play with. I have used custom:entity-progress-badge as a quick example of what is possible. That card looks to have some great built in features. If you just want a 100% line to play with, set any entity and then override --progress-bar-value to 1 !important. The custom card itself has a shimmer that you can look at to either tweak for speed or add your own styling with UIX
Then play with styling with UIX. I have done a simple z transform to rotate. Note: As this is UIX Forge all your element config can take templates.
See my example. Since I did not have your house I found some picture out there to just mock up an example. You look to know your way around so I will leave this idea with you as an alternate. I think in the end will be simpler. Play with whatever badge in UI then copy code into the Forge.
It would not take much to write your own custom badge to use in this way (there are no such thing as custom picture elements so you need to use UIX Fogre to place a custom badge).
type: picture-elements
image: /local/media/house.png
elements:
- type: state-label
entity: sensor.sim_power_solar
style:
top: 9%
left: 42.5%
transform: translate(-50%, -50%)
color: '#3c3c3c'
font-size: 22px
font-weight: bold
- type: custom:uix-forge
forge:
mold: badge_as_picture_element
element:
type: custom:entity-progress-badge
entity: light.bed_light
bar_effect:
- shimmer
bar_stack: {}
hide:
- icon
- name
- value
style:
top: 35%
left: 45%
uix:
style: |
ha-card {
--ha-card-background: transparent;
--ha-card-border-width: 0px;
transform-origin: center;
transform: rotateZ(130deg);
--progress-bar-value: 1 !important;
}
1 Like
Colored (unLocked) slider:
type: entities
title: unLocked slider
entities:
- entity: input_boolean.test
name: unLock the slider
- entity: input_number.test
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test','on') %}
--ha-slider-track-color: yellow;
--ha-slider-thumb-color: green;
--ha-tooltip-text-color: plum;
--ha-slider-indicator-color: orange;
--state-icon-color: purple;
--ha-tooltip-background-color: blue;
--ha-tooltip-font-size: 30px;
--ha-tooltip-border-radius: 30px;
color: red;
pointer-events: ;
{%else %}
pointer-events: none;
{% endif %}
}
System-Info:
Core: 2026.7.2
Supervisor: 2026.08.0
Operating System: 18.1
Frontend: 20260624.5
Companion-App: 2025.11.4-minimal (19134)
Any assistance is much appreciated!
)
I spent an hour trying to do those yesterday. Never thought to look at UIX docs 
