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; }
Deleted as I found answer
Thanks you, and sorry im new to the community, will remember that for the next time.
Currently im using the following code to limit the height of the calendar widget, how can I combine this two? Sorry for the probably dump question but im not very familiar with CSS.
card_mod:
style: |
ha-full-calendar {
height: 295px !important;
overflow: hidden;
}
Go to 1st post of this thread - link at the bottom titled āfantasticā - other stuff - combining
1 Like
Hello! I am trying to condense the spacing in an entities card. I have seen it done and I am not sure what I am doing wrong, any help would be appreciated! I am able to make changes to the header but changing the height or the color for the entity row doesnāt effect the card. Am I referencing it incorrectly?
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style: |
hui-generic-entity-row {
height: 20px;
color: red;
}
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
Yes.
If you want to learn - use Code Inspector to find a proper path, here āhui-generic-entity-rowā is located inside shadowRoot.
Examples for reducing a height are here: 1st post ā link at the bottom titled āfantasticā ā entities card ā rowās height
I want to learn but what is Code Inspector? I googled it and only job descriptions came up. I tried opening the developer tools console to inspect the code on the website but if that is what you are referring to I donāt know where to start.
I tried using
hui-text-entity-row:
$: |
hui-generic-entity-row {
As you mentioned in a different post that also mentioned shadowRoot but that didnāt work either
This is my current code:
type: entities
entities:
- entity: sensor.roberto_battery
name: " "
- entity: vacuum.roberto
name: " "
title: Roberto
card_mod:
style: |
ha-card .card-header {
display: unset;
text-align: center;
font-size: 20px;
}
hui-text-entity-row:
$: |
hui-generic-entity-row {
height: 10px;
}