It works!
I will leave it this way if there isnāt an option to keep the original colors I have for the rest of the cards.
so for the thermostat cards I used the card-modder to have this design to them:
the code is this:
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
# column_width: calc(50% / 2)
type: custom:simple-thermostat
entity: climate.downstairs
step_size: 1
step_layout: row
sensors:
- entity: sensor.downstairs_humidity
name: Humidity
- entity: sensor.downstairs_ac_fan
name: Fan
control:
hvac:
some_mode: false
another_mode: false
'off':
name: Make it cold
icon: false
'on':
name: false
icon: mdi:whitewalker
preset:
away: true
none:
name: something
style:
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.6)
background-size: 100% 68px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)
color: rgb(220, 230, 247)
--st-font-size-xl: 15px
--st-font-size-m: 18px
--st-font-size-title: 10px
--st-font-size-sensors: 13px
--st-spacing: 2px
- type: custom:card-modder
card:
type: custom:simple-thermostat
entity: climate.upstairs
step_size: 1
step_layout: 'row'
label temperature: Temp
sensors:
- entity: sensor.upstairs_humidity
name: Humidity
- entity: sensor.upstairs_ac_fan
name: Fan
control:
hvac:
some_mode: false
another_mode: false
'off':
name: Make it cold
icon: false
'on':
name: false
icon: mdi:whitewalker
style:
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.6)
background-size: 100% 68px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)
color: rgb(220, 230, 247)
--st-font-size-xl: 15px
--st-font-size-m: 18px
--st-font-size-title: 10px
--st-font-size-sensors: 13px
--st-spacing: 2px
the code for the lock entities is currently:
- type: horizontal-stack
cards:
# - type: custom:card-modder
# card:
- type: entities
entities:
- entity: sensor.schlage_touchscreen_deadbolt_door_lock_battery
name: Battery level
- entity: lock.schlage_touchscreen_deadbolt_door_lock
name: Front Door Lock
secondary_info: show-state
secondary_info: last-changed
style: |
ha-card {
background: {% if is_state('lock.schlage_touchscreen_deadbolt_door_lock', 'unlocked') %} red {% endif %};
}
# style:
# background-image: url("/local/cardbackK.png")
# background-repeat: no-repeat
# background-color: rgba(50,50,50,0.6)
# background-size: 100% 68px
# border-radius: 20px
# border: solid 1px rgba(100,100,100,0.3)
# box-shadow: 3px 3px rgba(0,0,0,0.4)
# color: rgb(220, 230, 247)
# --st-font-size-xl: 15px
# --st-font-size-m: 18px
# --st-font-size-title: 7px
# --st-font-size-sensors: 15px
# --st-spacing: 2px
would it be possible to have the same effect?