Just starting to play with Soft UI, on a mobile device it looks very sexy. Great work, N-l1!
Wondering if anyone has an example of the code they are using for the remote card popup. I can get the card working if I add it directly on lovelace, but cannot get the formatting correct when adding it through browser-mod.
I do have other popups working so it’s just a problem with my formatting.
Can you post your config?
You asked for it! 
The popup for ‘light.master_bedroom_pendants’ is working as expected. The remote card which is using the ‘media_player.roku_streaming_stick’ entity produces the following:
popup_cards:
media_player.roku_streaming_stick:
- cards:
- icon: 'mdi:power'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- margin: 10px 10px 10px 155px
- border-radius: 100px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: power
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- entities:
- cards:
- icon: 'mdi:menu-up'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 69px
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: up
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- icon: 'mdi:menu-left'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 11px
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: left
entity_id: remote.xiaomi
type: 'custom:button-card'
- name: OK
show_icon: false
show_name: true
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- width: 50px
- height: 50px
- border-radius: 100px
- background-color: var(--primary-background-color)
name:
- font-size: 20px
- font-weight: bold
- font-family: Helvetica
- letter-spacing: '-0.01em'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: enter
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:menu-right'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: right
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- icon: 'mdi:menu-down'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 69px
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: down
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035);
{% elif is_state('sun.sun', 'below_horizon') %}
inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3);
{% endif %}
border-radius: 30px;
background-color: var(--primary-background-color)
}
type: 'custom:hui-entities-card'
type: 'custom:hui-horizontal-stack-card'
- show_icon: false
show_name: false
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
- entities:
- cards:
- icon: 'mdi:minus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 30px
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: volume_down_sony
entity_id: remote.xiaomi
type: 'custom:button-card'
- name: VOL
show_icon: false
show_name: true
styles:
card:
- margin-left: 10px
- box-shadow: none
- width: 30px
- height: 30px
- border-radius: 100px
- background-color: var(--primary-background-color)
name:
- font-size: 13px
- font-weight: bold
- font-family: Helvetica
- letter-spacing: '-0.01em'
type: 'custom:button-card'
- icon: 'mdi:plus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 10px
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: volume_up_sony
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
type: 'custom:hui-entities-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- icon: 'mdi:home'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- margin-top: 10px
- margin-left: 5px
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: home
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:keyboard-return'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- margin-top: 10px
- margin-left: 8px
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: remote.send_command
service_data:
command: return
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:set-top-box'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- margin-top: 10px
- margin-left: 8px
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.mi_box
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
background-color: var(--primary-background-color);
width: 250px;
border-radius: 10px;
margin: 10px auto;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
type: entities
light.master_bedroom_pendants:
card:
actions:
- color: '#FF6666'
name: Red
service: light.turn_on
service_data:
entity_id: light.master_bedroom_pendants
rgb_color:
- 255
- 102
- 102
- color: '#FFFFFF'
name: White
service: light.turn_on
service_data:
entity_id: light.master_bedroom_pendants
brightness: 204
color_temp: 285
- color: '#FFCC99'
name: Peach
service: light.turn_on
service_data:
entity_id: light.master_bedroom_pendants
rgb_color:
- 255
- 204
- 153
- color: '#CCFFCC'
name: Green
service: light.turn_on
service_data:
entity_id: light.master_bedroom_pendants
rgb_color:
- 204
- 255
- 204
actionsInARow: 2
brightnessHeight: 400px
brightnessWidth: 150px
entity: light.master_bedroom_pendants
icon: 'mdi:globe-light'
switchHeight: 400px
switchWidth: 150px
type: 'custom:light-popup-card'
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
title: Light
Maybe you should change
popup_cards:
media_player.roku_streaming_stick:
- cards:
to
popup_cards:
media_player.roku_streaming_stick:
type: vertical-stack
cards:
- cards:
By the way, it looks like you’re using the light shadow for the dark theme.
Thanks KTibow, unfortunately same result.
re:light shadow. I’m still deciding if I want light/dark or auto switch
If you only use dark mode, you should hardcode it… Can you see if it works to add this?
popup_cards:
media_player.roku_streaming_stick:
title: Remote
card:
entities:
- cards:
- icon: 'mdi:power'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- margin: 10px 10px 10px 155px
- border-radius: 100px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to toggle the TV/device
action: call-service
service: remote.send_command
service_data:
command: power
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- entities:
- cards:
- icon: 'mdi:menu-up'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 69px
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to go 'up' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: up
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- icon: 'mdi:menu-left'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 11px
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to go 'left' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: left
entity_id: remote.xiaomi
type: 'custom:button-card'
- name: OK
show_icon: false
show_name: true
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- width: 50px
- height: 50px
- border-radius: 100px
- background-color: var(--primary-background-color)
name:
- font-size: 20px
- font-weight: bold
- font-family: Helvetica
- letter-spacing: '-0.01em'
tap_action: # Please change this to a service you call to 'enter' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: enter
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:menu-right'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to go 'right' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: right
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- icon: 'mdi:menu-down'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 69px
- box-shadow: none
- width: 50px
- height: 50px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to go 'down' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: down
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035);
{% elif is_state('sun.sun', 'below_horizon') %}
inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3);
{% endif %}
border-radius: 30px;
background-color: var(--primary-background-color)
}
type: 'custom:hui-entities-card'
type: 'custom:hui-horizontal-stack-card'
- show_icon: false
show_name: false
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
- entities:
- cards:
- icon: 'mdi:minus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 30px
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to 'volume down' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: volume_down_sony
entity_id: remote.xiaomi
type: 'custom:button-card'
- name: VOL
show_icon: false
show_name: true
styles:
card:
- margin-left: 10px
- box-shadow: none
- width: 30px
- height: 30px
- border-radius: 100px
- background-color: var(--primary-background-color)
name:
- font-size: 13px
- font-weight: bold
- font-family: Helvetica
- letter-spacing: '-0.01em'
type: 'custom:button-card'
- icon: 'mdi:plus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- margin-left: 10px
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you call to 'volume up' on the TV/device
action: call-service
service: remote.send_command
service_data:
command: volume_up_sony
entity_id: remote.xiaomi
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
type: 'custom:hui-entities-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- icon: 'mdi:home' # The first button in the bottom, you can change the icon here. In my case it is 'home'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- margin-top: 10px
- margin-left: 5px
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you want to call on the first button
action: call-service
service: remote.send_command
service_data:
command: home
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:keyboard-return' # The second button in the bottom, you can change the icon here. In my case it is 'return'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- margin-top: 10px
- margin-left: 8px
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Please change this to a service you want to call on the second button
action: call-service
service: remote.send_command
service_data:
command: return
entity_id: remote.xiaomi
type: 'custom:button-card'
- icon: 'mdi:set-top-box' # The third button in the bottom, you can change the icon here. In my case it is a set top box.
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
styles:
card:
- margin-top: 10px
- margin-left: 8px
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action: # Change this to a service you want to call on the third button
action: call-service
service: script.turn_on
service_data:
entity_id: script.mi_box
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
ha-card {
background-color: var(--primary-background-color);
width: 250px;
border-radius: 10px;
margin: 10px auto;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
type: entities
Perfect, thank you. Now to go through your code to work out where I was going wrong!
Not
popup_cards:
media_player.roku_streaming_stick:
- cards:
...
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
title: Light
but
popup_cards:
media_player.roku_streaming_stick:
card:
type: vertical-stack
- cards:
...
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
title: Light
Hello guys,
I’m trying to set up something with this UI, but i’m stucked here:
My cards have the “normal” dimensions, so all the buttons are far from each other.
Where I wrong?
cards:
- type: markdown
gridarea: card1
content: |
# Sala
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
- type: 'custom:button-card'
gridarea: card2
entity: light.luce1
icon: 'mdi:ceiling-light'
name: Luce 1
size: 30%
styles:
img_cell:
- padding-left: 25px
- justify-content: start
card:
- width: 100px
- height: 100px
- border-radius: 15px
- border-style: solid
- border-color: var(--primary-background-color)
- border-width: 1px
- margin: 10px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
: '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 15px
- opacity: 0.6
- padding: 0 15px 5px
show_state: true
state:
- value: 'on'
styles:
card:
- border-width: 2px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
- border-color: var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
- type: 'custom:button-card'
gridarea: card3
entity: light.luce2
icon: 'mdi:ceiling-light'
name: Luce 2
size: 30%
styles:
img_cell:
- padding-left: 25px
- justify-content: start
card:
- width: 100px
- height: 100px
- border-radius: 15px
- border-style: solid
- border-color: var(--primary-background-color)
- border-width: 1px
- margin: 10px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
: '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 15px
- opacity: 0.6
- padding: 0 15px 5px
show_state: true
state:
- value: 'on'
styles:
card:
- border-width: 2px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
- border-color: var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
What’s your viewport size?
This is really awesome! I do have a small question. At the moment I have a button for the light in my office:
- entity: light.office
icon: 'mdi:ceiling-light'
name: Bureau
size: 30%
styles:
img_cell:
- padding-left: 25px
- justify-content: start
card:
- width: 100px
- height: 100px
- border-radius: 15px
- border-style: solid
- border-color: var(--primary-background-color)
- border-width: 1px
- margin: 10px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
: '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 15px
- opacity: 0.6
- padding: 0 15px 5px
show_state: true
state:
- value: 'on'
styles:
card:
- border-width: 2px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
- border-color: var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
type: 'custom:button-card'
Is there a way to extract this piece of code and call if with a set of parameters as only the entity and the name should be dynamic? I have been looking for this for a couple of hours but can’t seem to find anything.
Hey @Jdruwe, glad you like it! I’m not exactly sure what you mean. Maybe you can be more specific with an use case?
Eccomi andrea anche io seguo questo nuovo forum ringraziandoti per avermi fatto conkscere questa nuova interfaccia. Inizjerò con calma a prenderne visione e grazie ancora
If what you’re saying is a question, I don’t speak that language. Someone else in the Soft UI community might, but you might want to try a translator: https://translate.google.com/
Sorry
Thank you
Since 0.117 and probably also due to the outphasing of Custom Header, I don’t have any header anymore at the top. In the default theme however it is present… Any others with this issue as well?
You need to use Card-Mod.
Take a look here: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook
Thanks @NdR, but I’ve got Card-Mod installed.
The strange thing is that I can see the header when the screen is loading (in a split second), but then it disappears…
Which theme are you using? Is it the soft UI theme I made? I still need to get around to updating it.
0 voters
