Great Theme! I installed it now via HACS and migrate my existing config to it 
One question: the light slider is not working with light groups (āgroup.lights_xyzā):
however, a brightness slider is available in the ādefaultā view of home assistant for a light group:
do you plan on adding a compatibility for the light slider to work with light groups as well? Would be awesome!
You can use the light.group platform instead of the group. (Light Group - Home Assistant).
You will have a better support for all cards 
thanks for your suggestion, but unfortunately it doesnāt work with some of my groups where I bundled light entities and switch entities together 
switch entities canāt be added to light groups.
Iāve got two questions. A simple one and perhaps a little difficult one.
1- Why is there no āchip forwardā available? Wen navigating between four or five areas, just be able to go back seems a bit as a waste sometimes
2- I donāt get the popup light to work. Iāve tried
- type: "custom:button-card"
template:
- card_light
entity: light.tradfri_lamp_tv_meubel
variables:
ulm_card_light_enable_popup: true
and
- type: "custom:button-card"
template: card_light
entity: light.tradfri_lamp_tv_meubel
variables:
ulm_card_light_enable_popup: true
ulm_card_light_enable_slider: true
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
Looks like Iāve got all the modules I need
This happens in my console
Ohhh myā¦ thanks!!!
You can convert switch entities to light entities. Thatās what I have done.
light:
- platform: switch
name: Hallway Windows
entity_id: switch.hallway_windows
ohh that sounds nice! Thanks, I will try this one out!
Got ulm_card_light_enable_popup: true working while using my desktop and if I use BRAVE browser on my android phone.
But with the HA Companion app on android it doesnt pop up. Any clue why?
The theme is not correctly applied. Go to profile and set theme to āminimalist-desktopā or minimalist-mobileā 
Did that on 3 devices and forgot on the 4th š¤¦ thank you, wife acceptance is now fullš
Sorry if I missed it, but is there a migration guide from old yaml based integration to HACS integration?
Hi bms,
Is there anyway to add another entity in for a motion sensors below the light switch next to the name and label?
Yes, youāll need to play around with the following lines in my template:
grid:
- grid-template-areas: '"i toggle" "n n" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
See here for more documentation on the topic.
Hi Bavo,
Thanks for your advise. Managed to code it in. If any one else is interested in adding this in to their setup. Go easy on me there is properly a better way to code this and space it all about, but Iām still a bit of an amateur of css.
Template Code
room:
tap_action:
action: more-info
#color: var(--google-grey-500)
show_icon: true
show_name: true
show_label: true
size: 20px
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}else{
return "Unavailable";
}
]]]
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
- background-color: 'rgba(150, 150, 150, 0.1)'
grid:
- grid-template-areas: '"i toggle" "n motion" "l motion"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content min-content
- align-content: space-evenly
icon:
- filter: opacity(100%)
- height: 30px
- width: 30px
- margin-left: 5px
- margin-top: 2px
- color:
img_cell:
- place-self: start
- width: 42px
- height: 42px
- filter: opacity(100%)
- color:
- margin-top: 5px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 11px
- margin-left: 5px
- margin-top: 2px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 11px
- filter: opacity(100%)
- margin-left: 5px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(0%)
- margin-left: 12px
- margin-top: 2px
custom_fields:
toggle:
card:
entity: '[[[ return entity.entity_id ]]]'
name: '[[[ return name ]]]'
state:
- value: 'on'
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
- value: 'off'
tap_action:
action: toggle
type: 'custom:button-card'
template:
- widget_icon
motion:
card:
entity: '[[[ return entity.entity_id ]]]'
state:
- value: 'on'
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
- value: 'off'
tap_action:
action: none
type: 'custom:button-card'
template:
- widget_icon
Lovelace Code
- type: 'custom:button-card'
template:
- room_non_hue
entity: light.cctv10_carport_light
name: CarPort
icon: hue:room-carport
label: '[[[ return states["sensor.back_garden_sensor_temperature"].state + "Ā°C" ]]]'
custom_fields:
motion:
card:
entity: binary_sensor.cctv10_carport_motion
tap_action:
action: navigate
navigation_path: '/lovelace-carport-mobile/ui-carport-mobile'`Preformatted text`
Where do I change these icons so that the text is NOT bold?
EDIT: Nevermind found it and I needed to restart for it work.
Hello,
i modified the custom card sonos to fit to my request, but i would like to have the background changing, depending on which button i pressed.
For exemple, if the media player is āplayingā and iāve pressed the first button, iād like to have the same image in the background as it is in the button.
Here is my code :
card_media_player_sonos:
size: "20px"
show_icon: true
show_entity_picture: false
show_state: false
show_name: true
template:
- "green_playing"
- "icon_info_bg"
- "custom_ulm_language_variables"
label: |
[[[
if (entity.state == 'idle'){
return variables.ulm_media_player_off;
}
if (entity.state == 'paused'){
return variables.ulm_media_player_pause;
}
if (entity.state == 'playing'){
return variables.ulm_media_player_on + ' ā¢ ' + ( Math.round(entity.attributes.volume_level / 0.01)) + '%';
}
if (entity.state == 'unavailable'){
return variables.ulm_media_player_unavailable;
}
if (entity.state == 'off'){
return variables.ulm_media_player_off;
}
]]]
card_media_player_sonos_with_controls:
variables:
ulm_card_media_player_with_controls_name: "No name set"
triggers_update:
- "[[[ ulm_card_media_player_with_controls_entity ]]]"
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3"'
- 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"
template:
- "ulm_language_variables"
- "card_media_player_sonos"
tap_action:
action: "more-info"
entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
name: "[[[ return variables.ulm_card_media_player_with_controls_name ]]]"
styles:
card:
- box-shadow: "none"
- padding: "0px"
item2:
card:
type: "custom:button-card"
template: "list_4_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
tap_action:
action: "call-service"
service: "media_player.media_play_pause"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:pause"
state:
- value: "paused"
icon: "mdi:play"
- value: "off"
icon: "mdi:play"
item2:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "media_player.media_next_track"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:skip-next"
item3:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "media_player.volume_down"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:volume-minus"
item4:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "media_player.volume_up"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
icon: "mdi:volume-plus"
item3:
card:
type: "custom:button-card"
template: "custom_list_5_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'http://streaming.radio.rtl2.fr/rtl2-1-44-128'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioRTL2.png'>
item2:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'https://ais-live.cloud-services.paris:8443/rfm.mp3'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioRFM.png'>
item3:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'https://ais-live.cloud-services.paris:8443/virgin.mp3'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioVirgin.png'>
item4:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
media_content_id: 'http://cdn.nrjaudio.fm/audio1/fr/30201/mp3_128.mp3?origine=fluxradios'
media_content_type: music
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/RadioCherieFM.png'>
item5:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: call-service
service: spotcast.start
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
uri: "spotify:playlist:6sCtuHWjGDBjY3tPGu3bOo"
shuffle: true
random_song: true
custom_fields:
i: |
<img width= 90% src='/local/icon_radio/Spotify2.png'>
icon_info_bg_sonos:
color: "var(--google-grey)"
show_icon: true
show_label: true
show_name: true
state:
- value: "unavailable"
styles:
custom_fields:
notification:
- border-radius: "50%"
- position: "absolute"
- left: "3px"
- top: "8px"
- height: "18px"
- width: "18px"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "12px"
name:
- align-self: "end"
- justify-self: "start"
- font-weight: "bold"
- font-size: "14px"
- margin-left: "12px"
state:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "12px"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- place-self: "center"
grid:
- grid-template-areas: "'i n' 'i l'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "min-content min-content"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
size: "20px"
green_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green), 0.2)"
value: "playing"
Can someone help me or give me some clues to code what i wish ?
hi, itās awesome, can you share the code for two solar panels card?
