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?
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;
}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:lampHi,
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?
Did you check in the inspector which element has the box-shadow? Iâd guess ha-cardâŠ
You canât. If you use style: the GUI editor doesnât support it and youâll have to use yaml instead.
This one
âŠ
You need to read the message. Itâs not an error, itâs an information message.
Itâs telling you that your config is not supported by the UI editor - the GUI editor does not support the style: parameter.
Itâs also telling you itâs falling back to the YAML editor - the window full of yaml code right below the error message.
If you want to use card-mod, you cannot use the gui editor, but will instead have to edit the YAML of each card manually. Whether you do this in the provided YAML editor visible in your first screenshot or in the RAW editor shown in your second one is up to you.
thanksâŠthe problem is that with the mentioned code colors do not changeâŠ
so for example in the following card how can i put value in red is they are lower than a value?
background: 'radial-gradient(lightgray, green)'
entities:
- entity: sensor.planta_conductivity
name: Condutividade
- entity: sensor.planta_moisture
name: Humidade
- entity: sensor.planta_temperature
name: Temperatura
- entity: sensor.planta_light_intensity
name: Luz
heading: "\U0001F33F Ficus Benjamina"
link: /lovelace/bathroom
panel: true
row_size: 4
type: 'custom:banner-card'
