Indeed and I donot want to start creating code per id.
Do yo u(anyone else) know where I can find good/detailed documentation on dev-information in this area? There is a lot of response on the net but it has all sorts of āqualityā
EDIT: I did find a way to use: > rect but also would like to understand if this is correct or notā¦I am just-doing-something 
Short question: according to the quoted post, this is the code to manipulate the style of the entity text via its ā.info.pointerā class:
entities:
[...]
- entity: sun.sun
name: Size for name & secondary_info
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer {
font-size: 10px;
color: red;
}
In my case, I use āmargin-inline: 0px 0px;ā instead of font formatting because I want to remove the spacing between the symbol and the entity text, and it works with this code. Is there an elegant way to apply the same style to all entities in the entities list? Otherwise Iād have to copy/paste the card_mod style block to every single entity entry, which is probably bad for performance (and tedious). I donāt need individual styling of each entity, therefore I want to apply the style to every ā.info.pointerā class in the entire card, but something like this doesnāt work:
card_mod:
style: |
.info.pointer {
margin-inline: 0px 0px;
}
Made a card
āpersonā ā-ā ātemperatureā ā+ā
I want a lot of space between the person and the - and the - temp + prettty close to eachother
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: '{{ states(''input_text.ruimte_1'')}}'
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_volume
target: {}
data:
entity_id: input_number.airco_nele
step: -0.1
icon: mdi:minus
- type: custom:mushroom-template-card
secondary: '{{ states(''input_number.airco_nele'')}}'
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_volume
target: {}
data:
entity_id: input_number.airco_nele
step: +0.1
icon: mdi:plus
If I use margin of margin right or width in a card mod, nothing changes
Can you help me ?
Thanks for this, it was super helpful. The only thing missing is being able to resize the icons for the badges in the heading card. I tried under the normal entity and card-mod and neither would/could change the size of the icon. Any idea on how to do that? or and names to the badges?
Use provided examples for styling badges as starting point, seek for height or width options in Code inspector.
1 Like
are you running the current beta 2025.1?
because it wont work the way we have been doing this since forever here, things changed in the hui-generic-entity-row breaking these mods in standalone entities card.
(it will work inside a fold-entity-row)ā¦
just so you are aware, see comment in the gitbuh 2025.1.0 beta breaks several fundamental card_mods Ā· Issue #420 Ā· thomasloven/lovelace-card-mod Ā· GitHub
I was actually trying to find you a good source, but found the same as you. When I experimented with this before I did find something that was relevant, but I donāt have it anymore. IIRC, it has to do with the fact that thereās an SVG canvas and that things inside that element arenāt reachable from the outside (not with CSS, anyway). I think I was working on an HA floor plan. Perhaps if you search those topics youāll find something.
1 Like
Elements in svg like rect, line can be addressed and styled. Away from pc, cannot give an example, but it worked.
1 Like
Btw, mini-graph-card is a good example with svg containing elements - and all of them can be addressed, it was used in some mods for this card published in 1st post.
2 Likes
Lovelyā¦ No, Iām not running the beta version and it looks like I should wait with the update anyway. Any idea if there will be a fix?
Hi,
How do I change the color of any icon using card-mod? Eg. Letās say I want a yellow icon for the entity input_boolean.motion_sensor_control
How do I make this happen? I tried using the paper-item-icon-color command but that didnāt work.
Hereās the yaml code (also shown in screenshot) :
type: entities
entities:
- entity: switch.shelly_relay
- entity: input_boolean.motion_sensor_control
- entity: input_boolean.enable_disable_schedule
- entity: input_datetime.scheduler_on
- entity: input_datetime.scheduler_off
title: Office
state_color: false
show_header_toggle: false
grid_options:
columns: 14
rows: auto
theme: Windows 10 Plum
card_mod:
style: |
ha-card {
background: transparent;
background: rgb(0,0,50,0.3);
border-radius: 14px;
}
Thanks!!
I suggested you what to do but you ignored.
Could you please point me to the right thread then? Paste a link?
Googling āmain card-mod threadā didnāt work - way too pages, and none having a title that says āMain Card-Mod Threadā. Iām not sure where else to post. Iām new to HA - new on these forums.
You talk like Iām committing a cardinal sin.
Hello
Iām using a ātype: custom:mushroom-entity-cardā
and want to combine the following two attributes.
But I canāt find the right syntax.
Each entry works individually.
What is the correct syntax?
card_mod:
style: |
ha-card {
background-color: #002f7a;
}
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: center;
}
As always. First post. Link to ildars Examples. There: combining styles.
This is my attempt :
type: entities
entities:
- entity: switch.shelly_relay
- entity: input_boolean.motion_sensor_control
card mod:
style: |
:host {
--paper-item-icon-color: yellow;
}
- entity: input_boolean.enable_disable_schedule
- entity: input_datetime.scheduler_on
- entity: input_datetime.scheduler_off
title: Office
state_color: false
show_header_toggle: false
grid_options:
columns: 9
rows: auto
theme: Windows 10 Navy Blue
card_mod:
style: |
ha-card {
background: transparent;
background: rgba(0,70,0,0.2);
border-radius: 50px;
color: rgba(30,0,40,0.9);
}
I donāt have a background in programming/coding so apologies in advance if what I stitched together looks way off
ok, the solution for the next generation ā¦
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: center;
}
.: |
ha-card {
background-color: #3ca5e6;
}
Hi all, I tried to change the font size of the calendar card heading with card_mod, so more specifically the date which is shown in the header (see screenshot). I looked up the corresponding selectors in the website inspector and tried to adjust the font size, but unfortunately without success.
Is there a superordinate element that controls or overwrites the font size?
Here is my YAML example, I also tried ādiv.controlsā:
card_mod:
style: |
h1 {
font-size: 10px !important;
}
First: intention matters. For working code and getting help. So please post how you are applying it.
Second:
Read some more examples and docs. The way you did, you can only address items directly under ha-card. But here it is a shadow root between ha-card and your h1.
card_mod:
style:
ha-full-calendar:
$: |
h1 {font-size: 5px !important; }