@alt_smarthouse
Fixed the background with this : background: ‘radial-gradient(#286a84 , #212527 )’ worked perfect !
But the shadow issue - Tried it all. New js. file in config/www - under Resources i tried both type js and module. But i cant get it to do the magic.
any change you can provide us with some print screen of the config file / ui-lovelace file ?
Love the design!
You gave me the inspiration to redo my Lovelace and I’m loving it. Custom buttons are amazing! I have my Roller Door one set up to flash red when it is open.
Thanks for the example.
PS. Underneath the badges and above the entity card the weird spaces are just me blanking personal info.
Riley.
Edit: Some more views.
1 Like
poudenes
(Poudenes)
January 7, 2020, 12:57pm
13
Yep… that was the problem… didn’t see it myself haha
1 Like
Hey, does the JS file load and run? Can you add some console.log('test')
somewhere and see if it loads?
Iy2KoI
(Attila)
January 8, 2020, 4:59pm
16
Hi @jackcoach !
I had the same problem, I changed the “overflow-y: hidden;” to “overflow: unset;” and i got rid of the fireEvent and now it’s woking.
// Monkey patch hui-view to remove overflow and show borders
customElements.whenDefined("hui-view").then( () => {
const HuiView = customElements.get("hui-view").prototype;
const oldRenderStyles = HuiView.renderStyles;
HuiView.renderStyles = function() {
let original = oldRenderStyles();
original.strings = [original.strings[0] + `
<style>
.column {
overflow: unset;
}
</style>
`];
return original;
}
});
jackcoach
(Giacomo)
January 8, 2020, 5:33pm
17
Hi @Iy2KoI !
Thank you very much! I found out that this code doesn’t work with the following plugin: layout-card
@thomasloven could you help me to edit this code and make it works with your plugin?
Thanks!
klogg
(Klogg)
January 8, 2020, 5:49pm
18
Be annoyed no more…
As of today (I believe) lovelace-card-mod can style badges.
1 Like
Thank you! @thomasloven thank you so much as well! Going to give this a go now!
Keestol
(Kees Tol)
January 9, 2020, 12:45pm
20
Can you share the yaml cards of your temps and thermostat? looks amazing
Thank you again! Finally dealt with the last thing that annoyed me here, text color and badge color that was not fitting.
Updated 2020 dashboard (plus a TV control that I’ve added, will write about it separately)
3 Likes
rclust
January 10, 2020, 1:42am
22
WELL DONE! How do you install and use the Nest theme?
Very nice theme @alt_smarthouse !
I have just installed it and I have trouble with the background. Mine is almost white. Where did I go wrong ? I’ve tried to mess with the nest.yaml code but nothing I do works.
background-color doesnt work, neither do background: ‘radial-gradient(#286a84 , #212527 )’ (saw this in the comments)… Pls help
1 Like
basnijholt
(Bas Nijholt)
January 11, 2020, 10:08am
24
@alt_smarthouse , do you mind sharing the yaml
for your “Good Night”, “Arrive Home”, and “Leave Home” buttons card?
poudenes
(Poudenes)
January 11, 2020, 3:08pm
25
what line let you change color of icons everywhere? Now I do it in customise section. But if I can add them in the theme would be nice
chezpaul2
(Paul B.)
January 11, 2020, 7:12pm
26
Am I missing a link? Did you share your yams files or not?
I actually don’t know if a background can be set via the theme.
I set mine per card (there must be a better way) in the lovelace editor like so:
- background: center / cover no-repeat url("/local/bg1.jpeg")
This is the Image I use:
1 Like
I’ve added the scenes to the gist here:
Badges color change config.yaml
badges:
- entity: person.alex
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
This file has been truncated. show original
custom.js
// Monkey patch hui-view to remove overflow and show borders
customElements.whenDefined("hui-view").then( () => {
const HuiView = customElements.get("hui-view").prototype;
const oldRenderStyles = HuiView.renderStyles;
HuiView.renderStyles = function() {
let original = oldRenderStyles();
original.strings = [original.strings[0] + `
<style>
.column {
overflow-y: visible;
This file has been truncated. show original
nest.yaml
# Card-Specific Modifications
ha-card-box-shadow: "10px 10px 17px -8px #A9A9A9" # Shadows on cards. Same as `shadow-elevation-2dp_-_box-shadow:
ha-card-border-radius: "10px" # Rounded corners on cards. NOTE: may not work with custom cards.
ha-card-padding: 25px;
ha-card-background: rgba(255,255,255,0.95);
# Fonts
primary-font-family: 'Open Sans,sans-serif'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
This file has been truncated. show original
There are more than three files. show original
@poudenes which icons specifically? each card has it’s own colors, or are you talking about badges?
Shared bits and pieces of it, not the whole thing, LMK what interests you from there and I can add to the gist
chezpaul2
(Paul B.)
January 12, 2020, 12:20am
30
I was just interested in your config and ui-lovelace yaml files. I’m also not yet versed into using pages. I was wondering how you did that.
Thanks.
2 Likes