thank you!, that’s what I was looking for hence my feature request enable templates on style ? · Issue #7 · thomasloven/lovelace-card-modder · GitHub
Makes it so much more flexible, cool.
cheers!
Create a light group…
Just because I’m so happy about how well this is working - here’s the results of remaking fold-entity-row to use card-tools:
The source code is now about 30% shorter, has more safety checks, better error messages and a better structure. And at least three known bugs were fixed with almost no extra work.
2 Likes
fold-entity-row card error after update to version: b895b8
Oops. Sorry about that.
I forgot to add the check that card-tools is installed. It should tell you to install it in a more informative error message.
A new update has been pushed to github.
HI Thomas,
would this be the correct way to change background depending on state?
- type: custom:card-modder
style:
#background-image: url("/local/lovelace/images/weather-background-day.png")
background-image: url("/local/lovelace/images/weather-background-[[sun.sun.state]].png")
i have the 2 files
/local/lovelace/images/weather-background-above_horizon.png
/local/lovelace/images/weather-background-below_horizon.png
but the backgrounds don’t show yet. Please have a look?
There must be spaces inside [[ and ]].
[[ sun.sun.state ]]
I’ve just noticed that with card-modder my entities cards are not styling the header text. Every other card seems to be styling the header find except for entities card and a few other custom cards. It seems that .header: is overriding my custom style.
The issues I’m having with are the card header text, both size and colour. Colour is white and not what I’ve set with color:, and size seems to be changing to a smaller font size in the iOS app. Every other card seems to be working fine.
I’m not sure if the is an issue with card-modder or with the entities card in HA itself.
thanks! very nice! using:
- type: custom:card-modder
style:
background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
background-size: 100% 400px
--primary-text-color: 'rgb(76,156,241)'
--secondary-text-color: green
--paper-item-icon-color: 'rgb(76,156,241)' #small variation icons
card:
type: custom:weather-card
title: Modded Woensdrecht
entity_weather: weather.woensdrecht
entity_sun: sun.sun
entity_apparent_temperature: sensor.jagti_windchill
entity_wind_force: sensor.br_wind_force
need to experiment with the font colors, since the night background is dark. Maybe I can use the night theme colors the frontend is set to automatically, and use variables in the card configuration. Have to wait till tonight 
testing as follows:
- type: custom:card-modder
style:
background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
background-size: 100% 400px
--primary-text-color: var(--primary-text-color)
--secondary-text-color: var(--secondary-text-color)
--paper-item-icon-color: var(--primary-text-color) #small variation icons
and this is the result, kind of nice!
Some things are harder to style than others because of how css and shadowDOM works and stuff.
Try
style:
--primary-text-color: red
This list of variables is linked from the card-modder docs and may give a starting point:
https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.js
More direction can be found by using the chrome object inspector and check which variables affect what.
Some things just can’t be done with card-modder, though.
Thanks. That seems to work for the colour side of things, but not the size issue I’m having with the iOS app. Oh well. I’ll keep experimenting.
Thing is, something has changed in the last few days, and I haven’t needed to do this. Not sure what has changed. That’s why I asked here first.
After last update:
Have to wait till tonight
You could just manually change the theme in your profile, but you probably already know that.
@thomasloven Don’t want to bother you too much, since you already get a lot of these questions, but did you by any chance see my previous question: My Lovelace Plugins?
Just wondering whether it’s possible or not (specifically: without actually changing code in your plugins, because that makes updating them more difficult).
lol. yes i know that 
its more that I want the image to change too, since that has a blacker background, and I want the font colors to stick out.
I could even set the state of sun.sun in the dev-state…
@thomasloven slider entity row in Lovelac UI configurer:
Your config is not supported by the UI editor:
**Expected a value of type `{entity,name,icon} | entity-id` for `entities.0.toggle` but received `true`.**
Falling back to YAML editor.I did actually want the exact same look, ended up modifying the source, changing one line of code every update isn’t that much of a hassle imo.
If you are okay with modifying the file, look for these lines near the top of the file.
ul {
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
overflow: hidden;
padding: 0 0 0 40px;
margin: 0;
}
Change the padding line to:
ul {
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
overflow: hidden;
padding: 0 38px 0 0;
margin: 0;
}
2 Likes
I’m getting this error in my logs after updated to the latest fold-entity-row (f28e6e):
ERROR (MainThread) [frontend.js.latest.201812110] https://hass.myserver.com/local/fold-entity-row.js?v=f28e6e:128:16
Uncaught NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
ERROR (MainThread) [frontend.js.latest.201812110] https://hass.myserver.com/local/fold-entity-row.js?v=f28e6e:128:22
NotSupportedError: Cannot define multiple custom elements with the same tag name
Make sure you didn’t add it twice to your resource section by mistake.