The welcome, scene and notification card i mean 
wow! very nice.
thanks. will try and let you know.
Yes.
I followed your instruction. it worked, but still small problem still exists.
I am not able to get the your light Area to show up!
## individual lights with on | brightness | room
- type: horizontal-stack
cards:
- type: custom:button-card
template: custom_card_light_slider_collapse_icon_info
entity: light.hanging_lamp_bedroom_1
variables:
ulm_card_light_name: Hanging Lamp
ulm_card_light_icon: mdi:ceiling-light
ulm_custom_card_light_area: Bedroom 1
- type: custom:button-card
template: custom_card_light_slider_collapse_icon_info
entity: light.standing_lamp_bedroom_1
variables:
ulm_card_light_name: Standinging Lamp
ulm_card_light_icon: mdi:desk-lamp
ulm_custom_card_light_area: Bedroom 1
Replace this line in your card in variables section:
ulm_custom_card_light_area:
with:
ulm_card_light_area:
just remove the word “custom”
custom_card_welcome_scenes:
template:
- ulm_custom_card_paddy_welcome_language_variables
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: '''item1'' ''item2'' ''item3'' ''item4'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: custom:button-card
show_icon: true
show_label: true
show_name: true
show_entity_picture: true
entity_picture: |
[[[
if (hass.user.name == 'Javier'){
return 'http://192.168.2.101:8123/api/image/serve/6f8ad131c0b0ca7ec5c8f6ae48913b5b/512x512';
} else if (hass.user.name == 'Irma'){
return 'http://192.168.2.101:8123/api/image/serve/d39fe416e4ed47e269be3fbab4949ede/512x512';
} else if (hass.user.name == 'Irmaris'){
return 'http://192.168.2.101:8123/api/image/serve/76c2d55c874f62b38a1bbd797d3367da/512x512';
} else if (hass.user.name == 'Yairelis'){
return 'http://192.168.2.101:8123/api/image/serve/ea60a3981c25a01d39029a1cb5e91505/512x512';
} else {
return 'https://www.home-assistant.io/images/home-assistant-logo.svg';
}
]]]
name: |
[[[
let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
let welcome = '';
if (time > '18:00'){
welcome = variables.ulm_custom_card_paddy_welcome_evening;
} else if (time > '12:00'){
welcome = variables.ulm_custom_card_paddy_welcome_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_custom_card_paddy_welcome_morning;
} else {
welcome = variables.ulm_custom_card_paddy_welcome_hello;
}
return welcome + ', ' + user.name + '!';
]]]
styles:
icon:
- color: rgba(var(--color-teal),1)
- width: 42px
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
name:
- align-self: start
- justify-self: start
- font-weight: bold
- font-size: 20px
- margin-left: 12px
img_cell:
- background-color: rgba(var(--color-teal),0.2)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- box-shadow: none
item2:
card:
type: custom:button-card
template: card_title_welcome
name: Scenes
item3:
card:
type: custom:button-card
template: card_scenes
styles:
card:
- border-radius: none
- box-shadow: none
- padding: 12px
variables:
entity_1: scene.away
entity_2: scene.work
entity_3: scene.home
entity_4: scene.bed_time
entity_5: scene.night
color_1: red
color_2: blue
color_3: green
color_4: teal
color_5: purple
item4:
card:
type: custom:home-feed-card
card_id: main_feed
show_empty: false
more_info_on_tap: true
state_color: false
compact_mode: true
max_item_count: 3
show_icons: true
entities: |
[[[
return variables.ulm_custom_card_paddy_welcome_news_entities;
]]]
card_mod: null
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
font-size: 14px;
text-align: left;
}
card_title_welcome:
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- box-shadow: none
- height: auto
- width: auto
- margin-top: '-10px'
- margin-left: 16px
- margin-bottom: '-15px'
grid:
- grid-template-areas: '''n'' ''l'''
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 20px
label:
- justify-self: start
- font-weight: bold
- font-size: 1rem
- opacity: '0.4'
card_scenes:
show_icon: false
show_name: true
show_label: false
styles:
grid:
- grid-template-areas: '''item1 item2 item3 item4 item5'''
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- justify-items: center
- column-gap: auto
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: custom:button-card
template: card_scenes_pill
entity: '[[[ return variables.entity_1 ]]]'
styles:
icon:
- color: '[[[ return `rgba(var(--color-${variables.color_1}), 1)`;]]]'
img_cell:
- background-color: '[[[ return `rgba(var(--color-${variables.color_1}), 0.20)`;]]]'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: '[[[ return variables.entity_1 ]]]'
item2:
card:
type: custom:button-card
template: card_scenes_pill
entity: '[[[ return variables.entity_2 ]]]'
styles:
icon:
- color: '[[[ return `rgba(var(--color-${variables.color_2}), 1)`;]]]'
img_cell:
- background-color: '[[[ return `rgba(var(--color-${variables.color_2}), 0.20)`;]]]'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: '[[[ return variables.entity_2 ]]]'
item3:
card:
type: custom:button-card
template: card_scenes_pill
entity: '[[[ return variables.entity_3 ]]]'
styles:
icon:
- color: '[[[ return `rgba(var(--color-${variables.color_3}), 1)`;]]]'
img_cell:
- background-color: '[[[ return `rgba(var(--color-${variables.color_3}), 0.20)`;]]]'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: '[[[ return variables.entity_3 ]]]'
item4:
card:
type: custom:button-card
template: card_scenes_pill
entity: '[[[ return variables.entity_4 ]]]'
styles:
icon:
- color: '[[[ return `rgba(var(--color-${variables.color_4}), 1)`;]]]'
img_cell:
- background-color: '[[[ return `rgba(var(--color-${variables.color_4}), 0.20)`;]]]'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: '[[[ return variables.entity_4 ]]]'
item5:
card:
type: custom:button-card
template: card_scenes_pill
entity: '[[[ return variables.entity_5 ]]]'
styles:
icon:
- color: '[[[ return `rgba(var(--color-${variables.color_5}), 1)`;]]]'
img_cell:
- background-color: '[[[ return `rgba(var(--color-${variables.color_5}), 0.20)`;]]]'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: '[[[ return variables.entity_5 ]]]'
card_scenes_pill:
show_icon: true
show_label: false
show_name: true
styles:
grid:
- grid-template-areas: '''i'' ''n'''
- grid-template-columns: min-content
- grid-template-rows: 1fr 1fr
- row-gap: 12px
- justify-items: center
- column-gap: auto
card:
- box-shadow: none
- padding: 5px
- box-shadow: var(--box-shadow)
- border-radius: 50px
- place-self: center
- width: 52px
- height: 84px
icon:
- color: '[[[ return `rgba(var(--color-theme), 0.20)`;]]]'
- width: 20px
img_cell:
- background-color: '[[[ return `rgba(var(--color-theme), 0.05)`;]]] '
- border-radius: 50%
- width: 42px
- height: 42px
name:
- font-weight: bold
- font-size: 9.5px
- width: 33px
- padding-bottom: 7px
state:
- color: rgba(var(--color-theme),0.9)
color: var(--google-grey)
to use the persons images go to configuration / people and zones and select on of the people there and right click on the image to copy the link of the image and replace it with the one in the code.
Thanks @ SildeHoop for the scene card.
7 Likes
Hello there. I have this prototypes of a smart door lock
But I want to change the icon for a door lock , if anybody can share the icon in svg format.
4 Likes
Looks awesome, can you share please
1 Like
Where do I can get the: custom: home-feed-card
hi there,
good morning!
I noticed that when the light is off it is showing area as undefined. so I tried the code under but is not working what am I doing wrong?
idea is when the light is on/off or unavailable it always shows the area.
in addition, I would also like to get rid off on/off, because I realised that it is clear enough from the color range of the card itself.
thanks in advance for your help. 
label: >-
[[[
if (entity.state !="unavailable"){
if (entity.state =="off"){
return variables.ulm_off + " | " + variables.ulm_custom_card_light_area;
} else if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : "0") + "%" + " | " + variables.ulm_card_light_slider_area;
} else {
return variables.ulm_card_light_slider_area;
}
}
} else {
return variables.ulm_unavailable + " | " + variables.ulm_card_light_slider_area;
}
]]]
Jesus Christ, those variables are way too long, it’s getting almost unreadable.
type: custom:button-card
entity: light.kugellampe
template:
- icon_info_bg
- ulm_language_variables
variables:
ulm_card_light_slider_area: Kugel
hold_action:
action: more-info
label: |-
[[[
if (entity.state !="unavailable"){
if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : "0") + "%" + " | " + variables.ulm_card_light_slider_area;}
}
else {return variables.ulm_card_light_slider_area;}
}
else { return variables.ulm_unavailable + " | " + variables.ulm_card_light_slider_area; }
]]]
1 Like
The home feed card is in hacs.
Which card do you want to share?
YES
works perfectly.
my next step is to add a custom fullscreen popup to the light with color control and scenes connected to each light. I have been trying to make popup work but is not working. have you managed to do so.
only when I use light_card only then it works!
1 Like
I tried your code!
YES works perfectly.
You can share the electricity code? 
Electricity card code is a 2 generic card combine in one card.
custom_card_generic_dual_entity:
show_label: false
show_name: false
show_icon: false
variables:
ulm_custom_card_generic_dual_entity_1_color: blue
ulm_custom_card_generic_dual_entity_2_color: blue
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: auto
- grid-template-rows: min-content
custom_fields:
item1:
card:
type: custom:button-card
template: custom_card_generic
entity: '[[[ return variables.ulm_custom_card_generic_dual_entity_1; ]]]'
icon: mdi:power-plug
name: Today
item2:
card:
type: custom:button-card
template: custom_card_generic
entity: '[[[ return variables.ulm_custom_card_generic_dual_entity_2; ]]]'
icon: mdi:flash
name: Monthly
custom_card_generic:
template:
- ulm_language_variables
triggers_update: all
show_label: true
variables:
color: blue
label: |
[[[
var unit = entity.attributes.unit_of_measurement != null ? " " + entity.attributes.unit_of_measurement : ""
if (entity.state == "on") {
return variables.ulm_on;
} else if (entity.state == "off") {
return variables.ulm_off;
} else if (entity.state == "unavailable") {
return variables.ulm_unavailable;
} else if (entity.state == "idle") {
return variables.ulm_idle;
} else if (entity.state == "open") {
return variables.ulm_open;
} else if (entity.state == "closed") {
return variables.ulm_closed;
} else {
return entity.state + unit;
}
]]]
custom_fields:
item1: |
[[[
return `</ha-icon><span>Power usage</span></span>`
]]]
styles:
icon:
- color: rgba(var(--color-yellow),1)
- width: 25px
label:
- place-self: center
- font-size: 15px
- font-weight: bold
name:
- place-self: center
- font-size: 14px
state:
- place-self: center
- font-weight: bold
- font-size: 14px
img_cell:
- background-color: rgba(var(--color-yellow),0.2)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '''i n'' ''i l'' ''i item1'''
- grid-template-columns: auto
- grid-template-rows: min-content min-content min-content
card:
- box-shadow: none
- padding: 0px
custom_fields:
item1:
- font-size: 10px
- place-self: center
5 Likes
And the code of UI?
Dude your work is awesome! 
Now i also have to beg for a card. The Wifi Overview (network, traffic and stuff). Would you share the template and ui code?
Thank you!
1 Like