@myle what theme are you using looks nice
The dark one lol ānight_themeā Iāll post when I get home
Thanks for your theme , lot off option , i just put a # on the line "paper-item-icon-active-color: ā#999999"ā to get the yellow color when a icon is active 
Nice work there!
@vjmindlab Very nice interface, very impressed, having just moved over to HA myself. One question. In my move to HA Iāve decided to go all in on lovelace and have been inspired by the 3D floorplan representaton. I havenāt however been successful in achieving the 3D effects that you demonstrate. I understand how it works, but my attempts at placing a .svg ācoverā over a light room and then changing the opacity have been unsuccessful because I donāt seem to be able to place the cover in the right place on the base image and also because it seems the ācoverā is interpreted as a different size to the base image. Would you be willing to to share your picture-element code so I can see how you have approach it? Thanks.
Home here is my Night_Theme
Night_Theme:
# Main Stuff #
primary-color: "#0179d8" # Primary (most of the UI)
primary-background-color: "#060606" # Primary background colour (dialogs, e.t.c)
secondary-background-color: "#060606" # Secondary background colour (main UI background)
paper-card-background-color: "#131313" # Card background colour
paper-item-icon-color: "#0179d8" # Icon colour
primary-text-color: "#FFFFFF" # Primary text colour
secondary-text-color: "#dbd9d9" # Secondary text colour
disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
paper-card-header-color: "#FFFFFF" # Card header text colour
# Nav Menu #
paper-listbox-background-color: "#131313" # Listbox background colour
paper-listbox-color: "#FFFFFF" # Listbox text colour
paper-grey-200: "#060606" # Listbox selected item background colour
# Switches #
paper-toggle-button-checked-ink-color: "#d80129"
paper-toggle-button-checked-button-color: "#0179d8"
paper-toggle-button-checked-bar-color: "#FFFFFF"
# Sliders #
paper-slider-knob-color: "#0179d8"
paper-slider-knob-start-color: "#0179d8"
paper-slider-pin-color: "#0179d8"
paper-slider-active-color: "#0179d8"
paper-slider-secondary-color: "#0179d8"
# Tables #
table-row-background-color: transparant
table-row-alternative-background-color: transparant
2 Likes
Leaning heaps
Hiding automation under a Switch
to
and the lovelace bit
- type: custom:fold-entity-row
head: switch.cupboard_heater
items:
- automation.cupboard_door_open
- automation.cupboard_door_closed
- automation.hall_light_on_cupboard_open
- automation.hall_light_off_cupboard_closed
2 Likes
@myle how have you shown the cupboard heater in 2 different states with 2 different temperatures?I have a water temperature sensor and a separate water switch for the heater. Can I do something like yours?
Thanks.
one is just the Switch
- platform: mqtt
entity_id: cupboardheater
name: "Cupboard Heater"
state_topic: "stat/SONOFF7/POWER"
command_topic: "cmnd/SONOFF7/POWER"
payload_on: "ON"
payload_off: "OFF"
optimistic: false
qos: 0
other is the Climate
- platform: generic_thermostat
entity_id: cupboardheater
name: "Cupboard Heater"
heater: switch.cupboard_heater
target_sensor: sensor.cupboard_temperature
min_temp: 15
max_temp: 30
ac_mode: False
target_temp: 23
initial_operation_mode: "off"
cold_tolerance: 0.5
hot_tolerance: 0.5
away_temp: 16
1 Like
Hey @myle thanks for that.
Does that mean the heater is always on making sure it achieves the target temperature? Is there a way to turn this climate mechanism off to save energy and when not needed?
Another question. The temperature defined in the away mode can it be less than the minimum temperature?would it work?
Thanks.
Itās does both well if the wall switch on is them the climate is in control if the wall switch is off climate control is off have to tas sonoff for the switch and a tas wemos for temp and door open close so if the door get open heater off until itās closed also if itās nite time it turn the hall light on until door close wait 3 sec then turn off the hall light . And if a load of washing is done it turn the climate on at 630 for 12 hours want see the automation for it
1 Like
All cards giving me same error:
Custom element doesnāt exist: slider-entity-row
what did I wrong?
Thankyou for sharing this config as an excellent resource. Iām trying out the theme and notice that my existing gauge card with different colours set at different value ranges no longer works - does this theme override it? Thanks!
How did you set different colors on the condition icons
Very very nice, just one question. Does the light layer on the floorplan stays aligned with different resolutions?
I see you have used relative positioning with percentage,
iām using the theme file however the icons are grey, they donāt show with variable colors like in the screenshot, how do I get this working?
Thatās awesome , thanks for sharing. Far way to go before get something like this. Excellent , well done
Loving the look of this, am a complete Noob.
Installed Hass.io and have set up Lovelace using the conversion app.
Am wondering do I need to Configure the UI and lose the existing config or can I change that without losing everything I have and start a new ui-lovelace.yaml ?
Thanks in advance for any help
Hi. Awesome config! Can you please share full config? With Floorplan and other stuff?
Thanks!
For example, can you tell how to colorize temperature icons?
Hi, thanks for this post!
tried some of you Lovelace configuration and encountering some problems. maybe someone can help.
this is the config for one of my cards:
- type: custom:card-modder
card:
type: entities
title: KITCHEN
show_header_toggle: false
entities:
- entity: switch.qubino_zmnhbdx_flush_2_relays_switch_2
secondary_info: last-changed
group: true
- entity: switch.qubino_zmnhbdx_flush_2_relays_switch
group: true
- type: divider
style:
height: 20px
margin: 4px 0
background: center / contain url("/local/divider.png") no-repeat
- entity: media_player.yamaha_receiver_zone_2
type: "custom:mini-media-player"
group: true
style:
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 68px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
this is the card im getting:
for some reason the grey color does not affect the title and the entities after the divider.
i tried several indentations for the style but with no success.
am i missing something here? isnāt the style config should affect all card?
thanks in advance!