Card-mod works only with ha-card. Card-modder works with other things too. Thatâs all.
From the wiki post linked from the documentation:
<then>and<else>can be any template - including furtherif()-expressions"
Kind of got this working. I have an entity card with 2 enitities. I want to colour the icon based on state. This works but the second entity only changes colour if the 1st one has changed colour.
Probably because I have no idea how to use the #states part. Also, if I remove the background part, the rest doesnât work
Any ideas ?
type: entities
title: Front Door Lock
show_header_toggle: false
style: |
ha-card {
background: var(--background-card-color);
}
#states div:nth-of-type(1) {
--paper-item-icon-color: [[ if(lock.assa_abloy_yale_conexis_l1_sd_l1000_ch_locked == "unlocked", "red", "green";
}
#states div:nth-of-type(2) {
--paper-item-icon-color: [[ if(sensor.front_door_lock_battery <25, "red", "green";
}
entities:
- entity: lock.assa_abloy_yale_conexis_l1_sd_l1000_ch_locked
- entity: sensor.front_door_lock_batteryYou need to end the if(s with a ) and the [[s with ]].
Trying to figure out how to apply this to slider-entity rowâs label so that it wraps instead of ellipsing on overflow. Ultimately I want to unset âtext-overflowâ and âwhite-spaceâ on the âdiv.infoâ element⊠The jquery selector path is as follows⊠just canât figure out what this is supposed to translate to for card-mod:
$(âhome-assistantâ).shadowRoot.querySelector(âhome-assistant-mainâ).shadowRoot.querySelector(âha-panel-lovelaceâ).shadowRoot.querySelector(âhui-rootâ).shadowRoot.querySelector(âhui-viewâ).shadowRoot.querySelector(âhui-entities-cardâ).shadowRoot.querySelector(âslider-entity-rowâ).shadowRoot.querySelector(âhui-generic-entity-rowâ).shadowRoot.querySelector(âdiv .infoâ)
style:
# The following two lines are separated to make sure card-mod first goes into _every_ div inside #states, and then looks for slider-entity-row inside each of them
"#states div":
slider-entity-row:
$:
hui-generic-entity-row:
# Once we reach the final shadow-root in our path, there's no need to drill any deeper
$: |
.flex .info {
text-overflow: unset;
white-space: unset
}
Unfortunately, due to how lovelace loads custom elements this wonât be applied immediately, but will happen after the first state update.
Iâm still looking for a way to fix thatâŠ
5 Likes
Thanks for the reply, donât know how the brackets were missing !
All working fine now, great mod, thanks
Thanks!. This worked as expected and was super helpful in connecting up your syntax with the console query.
This works great, just one thing I canât seem to figure out. And that is how to add a background image to it (a local one) using the following doesnât work:
style:
ha-card {
background: url('/local/images/background.png');
}
It will just load a transparent image (I have tried multiple different ones and even tried other locations with full address).
Is this not possible yet? Or am I going at it wrong?
1 Like
I just tried this and it works if the image is quite small, but it tiles
It works fine in three of the provided examplesâŠ
Iâm trying to remove the padding on the items inside fold-entity-row
I canât get this to work, am i way off?
- type: custom:fold-entity-row
style:
"#states div":
fold-entity-row:
$: |
"#items" {
padding: 0 0 0 0px;
margin: 0;
}
1 Like
Styles belong to the card. Not the row.
And you need to remote the qoutes around #items.
Thatâll probably upset your syntax highlighter, but it is correct.
I see!
The documentation on github is great btw, made it easy to combine both styling to <ha-card> and the removal of the padding inside the fold-entity-row.
Here is an example for future reference
type: entities
style:
.: |
ha-card {
border-radius: 20px;
overflow: hidden;
width: 89%;
margin: 0 auto;
padding-top: 0px;
}
"#states div":
fold-entity-row:
$: |
#items {
padding: 0 0 0 0px;
margin: 0;
}
entities:
- type: custom:fold-entity-row
head:
type: section
label: Kök
open: true
items:
- entity: light.kokslampa
name: Kökslampa
icon: mdi:lamp
2 Likes
Hi,
I have an entities card list where I want to have a Monster card inside. But when I do there is an issue with the margin in relation to the rest of the entities which are outside the monster card. Is it possible to add a margin/padding style to the monster card to make the entities aligned?
- type: entities
title: "Monster Card test"
show_header_toggle: true
entities:
- light.zzzzzzzzz
- type: divider
- binary_sensor.yyyyyyyyy
- binary_sensor.yyyyyyyyyyyy
- entity: binary_sensor.yyyyyyyy
- type: divider
- type: custom:monster-card
card:
type: entities
filter:
include:
- entity_id: binary_sensor.xxxxxxxxxxxx
- entity_id: input_xxxxxxxxxxx
when:
entity: binary_sensor.xxxxxxxxx
state: 'on'
- type: divider
[...]
- type: custom:monster-card
card:
type: entities
style:
play around with what you put here
filter:
I suggest you also take a look at auto-entities.
Hi there,
can anybody help me in achieving this (card-modder) with card-mod?
card-modder:
style:
background-image: url("/local/lovelace/card_backgrounds/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(0,0,0,0.0)
background-size: 100% 100%
border-radius: 20px
color: "#999999"
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 5px 5px rgba(0,0,0,0.6)
I have tried just copying it but this does not seem to work:
style: |
ha-card {
background-image: url("/local/lovelace/card_backgrounds/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(0,0,0,0.0)
background-size: 100% 100%
border-radius: 20px
color: "#999999"
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 5px 5px rgba(0,0,0,0.6)
}
Thanks very much in advance! 
UPDATE: Think i got it the â;â at the end of each line is missing 
Just wondering if there is a way to change the width of the key pad on the alarm panel, I have used the following to edit the font and button sizes but the panel itself is only 300px wide, it would be nice to make it 480px to fill the screen and make input the code easier.
- type: alarm-panel
card_icon: 'mdi:bell'
style:
'#keypad mwc-button':
$: |
button {
min-height: 70px;
font-size: 28px !important;
}
'#keypad mwc-button:nth-of-type(12)':
$: |
button {
min-height: 70px;
font-size: 18px !important;
}
entity: alarm_control_panel.home_alarm
So far - so goodâŠ
Now I succeeded removing the padding in the monster card. But I do have a box-shadow instead. Have tried the following but without succes:
- type: custom:monster-card
card:
type: entities
style: |
ha-card {
}
.card-content {
padding: 0 0 0 0px;
box-shadow: none;
}
filter:
include:
- entity_id: [...]
How to remove that? Do you have suggestions @thomasloven?
1 Like
Did you check in the inspector which element has the box-shadow? Iâd guess ha-cardâŠ
1 Like