Hi,
Iâd like to modify the padding of the highlighted element (div#root) for consistency with my other cards. I read through the documentation, but I still donât understand how the styling works when the element is inside a âshadow-rootâ.
Could anyone help me ?
Thanks!
Does anyone have an idea on how to replicate the Schneider Connected Home âlookâ
Would this be best to attempt from a theme? Could both the color scheme and the card-mod/styles be implemented in a theme?
Sorry if this has already been answered.
Very new to this modding tool and a little overwelmed
Came here looking to change the width of a card.
type: shopping-list
title: Shopping list
This is my shopping list card and just want to change the width. Can someone offer an example to achieve this.
All Lovelace cards are supposed to be of the same width.
If the shopping list cardâs width is not enough for you, consider âpanel modeâ for the view (the view must contain only one card which occupies whole windowâs width).
My issue is the opposite problem.
I am trying to create a dashboard for a wall mounted table and wanted the shopping list card down one edge. However Items only ever fill 1/3 of the width.
I wanted to reduce the width to allow more space for other cards / buttons.
It is a whole new can of worms but have you looked at the custom button card?
It is so flexible/versatile that it is virtually an entire UI in itself.
How can I reduce the word, CPU, here?
Not really sure what to put. I have tried âfont-sizeâ but unsuccessful.
- type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: button
entity: input_boolean.star
show_name: false
card_mod:
style: |
:host {
transform: scale(1.5,1.5);
}
- type: gauge
them: default
name: CPU
min: 0
max: 100
unit: '%'
entity: sensor.risingstar_intel_core_i7_8565u_load_cpu_total
card_mod:
style: |
:host {
transform: scale(1.5,1.5);
}
- type: gauge
them: default
name: RAM
min: 0
max: 100
unit: '%'
entity: sensor.risingstar_generic_memory_load_memory
- type: gauge
them: default
name: Temp
min: 30
max: 70
entity: sensor.risingstar_intel_core_i7_8565u_temperatures_cpu_package
- type: gauge
them: default
name: Wts
min: 5
max: 50
unit: 'W'
entity: sensor.risingstar_wattage
Cool mod!
Iâve already got 99% of the styles the way I want.
However, how do I disable the ripple effect when pressing a button card? My wall tablet is kinda slow and it really struggles to play thatâŠ
Hi there,
I need some help (if possible), I would like to have an icon to spin only when the device itâs on, inside an entities-card
So basically anytime the state is not âoffâ or âunavailableâ it should spinâŠ
Unfortunately my knowledge of CSS is below 0 
I did try to follow this thread but without success, right now I am at:
title: Ventilatori
show_header_toggle: false
entities:
- type: custom:fan-control-entity-row
entity: fan.ventilatore_salone
name: Salone
customTheme: false
style: |
@keyframes spin {
}
ha-card {
}
Any feedback welcome 
Thanks!
There is an example for the Entities card.
Then you can edit this example for your custom card.
Thanks!
Ok, that example made the icon orange and spinny⊠now⊠how would I do in order to have it colored (with the theme color) and spinning only when on?
Thanks again
Just upgraded from 21.06.2 to 21.09.6
Now notice than whenever I click a glance card to turn on / off a switch, the name/icon drop down ~5px or so for a few seconds, and then pop-back. Unsure if itâs card-mod issue or something else?
Ie. I just click âFam Cansâ above
Try kind of this:
ha-svg-icon {
{% if is_state('sun.sun','above_horizon') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
Thanks, will give it a try today!
That seems to generate an error on line:
animation: rotation 0.5s linear infinite;
Error: mapping values are not allowed here inâŠ
Post the whole code here
sure, here it is⊠I mean⊠itâs exactly what you gave me except for the entity name
- type: entities
title: Ventilatori
show_header_toggle: false
entities:
- type: custom:fan-control-entity-row
entity: fan.ventilatore_salone
name: Salone
customTheme: false
style:
ha-svg-icon {
{% if is_state('fan.ventilatore_salone','on') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
"card_mod" keyword (see docs on Github)."ha-svg-icon {..." - cannot confirm since I am not using fan-control-entity-row card. Just for testing purpose - create a usual row and apply the style. Then using Code Inspector find out a proper path to the element which is supposed to be rotating.I see, I thought what you linked me before was still valid
Iâve updated using your suggestions, that error disappear but it still doesnât work.
Iâve created a normal entity and the behaviour is the same, the ha-svg-icon I think is correct (but not completely sure)
This is nwo the code for the simple card with the style:
- type: entities
title: Ventilatori
show_header_toggle: false
entities:
- entity: fan.ventilatore_salone
card_mod:
style: |
ha-svg-icon {
{% if is_state('fan.ventilatore_salone','on') %}
animation: rotation 0.5s linear infinite;
{% endif %}
}
Unfortunately it doesnât spin yet
