nevermind.
Cheers!
Now I see where the <style> should be.
Tusen tack for this wonderful card!
- title: Test Card Mod
cards:
- type: entities
style:
"#states div":
fold-entity-row:
$:
"#head":
entity-row-maker:
hui-section-row:
$: |
div.label {
color: red;
font-size: 1.5em;
font-weight: bold;
}
entities:
- type: custom:fold-entity-row
head:
type: section
label: Test Card Mod
items:
- light.bedroom
- light.kitchen
- light.hall
2 Likes
Iāve just made a new release that should work better in Safari and Firefox.
It also adds the option to print the process of applying styles by adding debug_cardMod: true to the card config. Should help a bit while trying to get things to work.
3 Likes
Iāve got it working great on most cards but cannot get it to work on a horizontal-stack. Its probably something simple Iām missing but I canāt seem to modify it. Specifically I want to be able to add a margin to the horizontal-stack. When I inspect I can modify in an id called #root and add the margins just how I want. Then the cards inside the horizontal-stack are inside a <div id="root">
This is the JSpath to the card:
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view").shadowRoot.querySelector("#columns > div > hui-horizontal-stack-card").shadowRoot.querySelector("#root")
I have tried many combinations to get this working:
style:
$: |
#root {
margin: 9px;
}
style: |
#root {
margin: 9px;
}
style:
.:
$: |
"#root" {
margin: 9px;
}
What am I doing wrong?
Iāve added a section to the readme about this: https://github.com/thomasloven/lovelace-card-mod#why-wont-this-work-for-some-cards
2 Likes
Hi there, Iām trying to get a background gradient for a whole vertical-stack-in-card. My Lovelace theme has some gradient for cards backgrounds and with the vertical stack every card has his own gradient. I would like to get only 1 big background for the full stack. I canāt get it to work with your section FAQ (works for a single color but not for a gradient). Any advice on this ?
It took a bit for my brain to start to grasp some of the advanced styling, and I am still figuring out as I go, but this card really unlocks some awesome possibilities! Hereās something I put together with the mini-media-player and the YAML I used for it:
type: custom:mini-media-player
entity: media_player.theater
artwork: full-cover
hide:
name: true
icon: true
style:
.: |
ha-card > div.mmp-player {
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
--paper-slider-knob-color: white;
--paper-slider-active-color: white;
--paper-slider-container-color: #303741;
}
ha-card > div.mmp-player div {
padding-left: 10px !important;
padding-right: 10px !important;
background: rgba(0,0,0,0.8);
}
ha-card > div.mmp-player div .entity__info,
ha-card > div.mmp-player div .entity__info__media {
background: rgba(0,0,0,0);
padding: 0px !important;
}
ha-card > div.mmp-player div .entity__info__media span:nth-of-type(2)::before {
content: '\000A' !important;
white-space: pre !important;
}
ha-card > div.mmp-player div .entity__info__media span {
color: #FFFFFF !important;
}
ha-card > div.mmp-player .mmp-player__adds mmp-media-controls {
padding-bottom: 10px !important;
}
Iām sure there may be a better way to do some of it, but itās working for me at least, and I hope maybe itāll help someone else!
15 Likes
Hi all. I am struggling with CSS styling on cards. Using card-mod.js, I am trying to remove the padding between the three dividers in the custom: text-divider-row card. I have tried editing the actual javascript of the card, but I also do not know javascript and nothing seemed to work. I used the following yaml code on the card for card-mod also, which did not work:
- type: entities
#title: Doors
style: |
ha-card {
}
.card-content {
padding: 0 0 0 0px;
box-shadow: none;
}
show_header_toggle: false
entities:
- type: divider
- type: 'custom:text-divider-row'
text: Doors
- type: divider
- binary_sensor.east_sliding_door
- binary_sensor.south_sliding_door
Here is what the card looks like with and without the above attempt to change it:
I would appreciate any assistance.
Thanks,
Rick
Hi @thomasloven
Iām trying to change the icon on the fold-entity-row.
It works well on Chrome.
Only the color and size of the icon changes on Safari.
- type: entities
style:
.: |
"#states div > fold-entity-row":
$:
"#head > ha-icon":
$:
svg > g: |
path {
d: path("M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z");
}
"#states div":
fold-entity-row:
$: |
#head ha-icon {
color: var(--google-green-500);
height: 36px;
}
entities:
- type: custom:fold-entity-row
head:
entity:
According to a quick google search, this method (which honestly seems more like a mistake than a feature) indeed only works for Chrome.
1 Like
hello @thomasloven
why my image does not appear
type: entities
style: |
ha-card {
--ha-card-background: radial-gradient(lightgray, green);
box-shadow: none;
background: radial-gradient(lightgray, green);
}
.card-content {
padding: 0
}
entities:
- type: 'custom:miflora-card'
title: "\U0001F33F Ficus Benjamina"
cards:
title: "\U0001F33F Ficus Benjamina"
image: images/plants.jpg
min_moisture: 20
max_moisture: 60
min_conductivity: 350
max_conductivity: 2000
min_temperature: 8
max_temperature: 32
min_brightness: 2500
min_battery: 98
max_brightness: 35000
entities:
- 'moisture:sensor.planta_moisture'
- 'intensity:sensor.planta_light_intensity'
- 'temperature:sensor.planta_temperature'
1st image: original
2nd image: modded with above code
1 Like
Hi @thomasloven
Is it possible to resize cards using Card-mod or do i need to use lovelace-card-modder instead?
canāt figure this out and its driving me crazy.
Many thanks
style: |
ha-card {
height: 1000px;
}
2 Likes
Iām trying to change the size of the padding on a generic toggle row that used in an entities card. I have the custom mini graph card used in the first row of my entities card and 2 toggle rows under that. Iāve changed the padding of the card to 0px so the graph fills to the left and right.
Here is what I have so far. The .card-content bit works fine, Just not the next bit, and Iām stumped.
style: |
.card-content {
padding: 0px;
}
"#states div":
hui-toggle-entity-row:
$: |
hui-generic-entity-row {
padding: 0 16px;
}
If you wish to put styles both on the ha-card and on deeper object, the ha-card styles must be in .:.
style:
.: |
.card-content {
padding: 0px;
}
"#states div":
hui-toggle-entity-row:
$: |
hui-generic-entity-row {
padding: 0 16px;
}
3 Likes
Cheers mate. I did try that but I didnāt have "#states div": indented enough. Short by 2 spacesā¦ Working now. Thanks. 
looking for simple way to map icon color to state but canāt get this to work. Help appreciated
- type: custom:banner-card
style: |
ha-card .heading {
margin-top: 0px;
margin-bottom: 0px;
}
ha-card .entities {
margin-top: 0px;
margin-bottom: 0px;
}
paper-icon-button {
#color: red;
color: [[ if(script.debug == "on", "red", "green")]];
}