Note to self: solved with replacing "auto" just with ""
i have been having issues in the last couple of days where some of the containers do not display. I have to hard refresh the page (sometimes a few times) before it loads correctly. same on the mobile app, which is a bit more frustrating as I need to close the app completely and open it up again. Anyone else having this issue?
Which container is not displayed is a luck of the draw, so its not just one or two specific containers.
example:
what is should look like:
I’ve noticed that issue on just one of my wall tablets, but not any of my other tablets or phones. I haven’t tried showing same dashboard on any other tablets or phones, so it may be related to something specific on that dashboard. I have found that clicking the 3-dot menu at the top right and choosing “refresh” works better than refreshing the page in this particular situation.
@LintHart, I did it by positioning the name with absolute and the icon automatically sized to fill the background. In my case only the name was being used to show the info. If you are using other fields you would position all of them absolute so the icon has room to fill the button.
styles:
name:
- position: absolute
- text-shadow: 0 0 0.2em black
1 Like
What happened?
This is the code:
- type: custom:button-card
color: auto
entity: sensor.openweathermap_weather
show_state: true
name: Meteo Attuale
icon: mdi:weather-partly-cloudy
styles:
card:
- font-size: 12px
- font-weight: bold
icon:
- color: red
Another take on a thermostat card with custom button card and mushroom cards combined.
This is what the page with all thermostat cards looks like:
When a room is demanding heat the heating icon is glowing. It’s this icon from MDI edited to make the background white and the flame-part transparent. Next to the heating icon the current status and heating schedule are shown.
This is the code for the three button card templates that together form the per room thermostat cards:
conditional_icon_button:
variables:
off_color: '#dadada'
on_color: '#fff'
entity_attribute: ''
attr_value: ''
show_icon: true
show_name: false
show_label: false
size: 20px
tap_action:
action: |
[[[
if (entity.attributes[variables.entity_attribute] == variables.atrr_value)
return 'call-service';
else
return 'none';
]]]
styles:
card:
- border-radius: 21px
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"i"'
- grid-template-columns: min-content
- grid-template-rows: min-content
icon:
- color: '#000'
img_cell:
- background-color: |
[[[
if (entity.attributes[variables.entity_attribute] == variables.attr_value)
return variables.on_color;
else
return variables.off_color;
]]]
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
colorful_thermostat_state:
entity: null
show_label: false
show_name: false
show_icon: false
custom_fields:
img: |
[[[
if (entity.attributes.hvac_action == "heating") {
return `<img src="/local/images/fire-circle-38.png"></img>`
}
else {
return `<div class="icon_wrapper"><ha-icon icon="mdi:fire"></ha-icon></div>`
}
]]]
status1: |
[[[
let status = entity.attributes.hvac_action;
function translate(status) {
if (status == 'idle') return 'ketel uit';
if (status == 'heating') return 'ketel aan';
};
return `<span>Status: ${translate(status)}</span>`
]]]
status2: |
[[[
let modus = entity.attributes.preset_mode;
function translate(modus) {
if (modus == 'Schedule') return 'programma';
if (modus == 'manual') return 'manueel';
};
return `<span>Modus: ${translate(modus)}</span>`
]]]
styles:
grid:
- grid-template-areas: '"img status1" "img status2"'
- grid-template-columns: min-content auto
- grid-template-rows: auto
card:
- background: none
- box-shadow: none
- min-width: 200px
- margin-left: 10px
- margin-top: 3px
- font-size: 0.9em
custom_fields:
img:
- justify-self: left
- height: 42px
- width: 42px
- border-radius: 50px
- margin-right: 10px
status1:
- justify-self: left
status2:
- justify-self: left
style: |
@keyframes glow {
0% {
background-color: #ef5a00;
}
25% {
background-color: #ff7800;
}
50% {
background-color: #d43322;
}
75% {
background-color: #ff7800;
}
100% {
background-color: #ef5a00;
}
}
img {
animation: glow 6s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
width: 42px;
height: 42px;
}
.icon_wrapper {
background-color: rgba(255,255,255,0.3);
width: 42px;
height: 42px;
}
ha-icon {
width: 34px;
height: 34px;
padding-top: 3px;
}
colorful_thermostat:
show_name: true
show_icon: false
variables:
name: null
bg_color: '#68957D'
entity: climate.roomX
custom_fields:
graph:
card:
type: custom:mini-graph-card
name: '[[[ return variables.name ]]]'
entities:
- entity: '[[[ return variables.entity ]]]'
attribute: current_temperature
unit: ℃
icon: mdi:thermometer
align_icon: right
line_width: 2
line_color: white
height: 60
font_size: 150
font_size_header: 18
action: more-info
show:
name: true
icon: true
state: true
labels: true
fill: false
style: |
ha-card {
background: #68957D;
color: black;
box-shadow: none;
}
.header, .states, ha-icon {
color: white;
}
.name.flex span {
opacity: 1;
font-family: SF UI Text Light;
}
.states {
font-weight: 500 !important;
}
.state__uom {
# opacity: 1 !important;
# align-self: flex-start;
}
controls:
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 200px 1fr 175px
cards:
- type: custom:button-card
template: colorful_thermostat_state
entity: '[[[ return variables.entity ]]]'
- type: custom:button-card
template: conditional_icon_button
entity: '[[[ return variables.entity ]]]'
icon: mdi:thermometer-auto
variables:
off_color: rgba(255,255,255,0.3)
on_color: rgba(255,255,255,1)
entity_attribute: preset_mode
attr_value: manual
service: climate.set_preset_mode
service_data:
preset_mode: Schedule
styles:
card:
- background: var(--bg_color)
- box-shadow: none
- max-width: 50px
- margin-top: 10px
- type: custom:mushroom-climate-card
entity: '[[[ return variables.entity ]]]'
fill_container: true
primary_info: none
secondary_info: none
show_temperature_control: true
layout: horizontal
icon_type: none
style: |
ha-card {
max-width: 170px;
font-size: 1em;
background: var(--bg_color);
justify-self: right;
box-shadow: none;
}
mushroom-climate-temperature-control button {
color: black;
}
styles:
card:
- max-height: 500px
- min-width: 450px
- background: '[[[ return variables.bg_color ]]]'
- border-radius: 10px
- padding: 0
- box-shadow: none
grid:
- grid-template-areas: '"graph" "controls" '
- grid-template-columns: auto
- grid-template-rows: min-content auto
graph:
- background: '[[[ return variables.bg_color ]]]'
- font-family: SF UI Text Medium
controls:
- font-family: SF UI Text Medium
name:
- font-size: 2rem
→ You’ll have to edit the template to reflect the hvac_action and preset_mode values of your climate entities (mine are Netatmo devices) and the desired translation.
Example usage of the template in a view:
type: custom:button-card
template: colorful_thermostat
variables:
bg_color: '#5C4CD8'
entity: climate.kitchen
custom_fields:
graph:
card:
type: custom:mini-graph-card
style: |
ha-card {
background: #5C4CD8;
color: black;
box-shadow: none;
}
.header, .states, ha-icon {
color: white;
}
.name.flex span {
opacity: 1;
font-family: SF UI Text Light;
}
.states {
font-weight: 500 !important;
}
→ note that the bg_color value needs to be manualy repeated in the graph’s styling (because the button card variable cannot be accessed there)
3 Likes
I am also having a lot of issues. It seems the button-card is not playing nice with containers/vertical stack cards. I get hundreds of errors in the console when viewing in the browser on a computer. On mobile, my dashboard just does not load at times.
Yeah we’re gonna need the code for this. Amazing!
I have now a button that looks like this
What I want is:
Maandpiek on the place where the 2621 W is
The date where maandpiek is
on the right the 2621W.
How do I do this ?
is it possible to change the unit size and color of the the state?
thanks
I am slowly moving along but got stuck trying to figure something out. I have a custom button card that all it does is navigate to a page with other custom button cards in the same domain (fans). I am trying to get this card to change dynamically if one of the other entities in the domain change. So my original button card does not have an entity:
type: custom:button-card
name: Fans
icon: mdi:fan
triggers_update:
- fan.front_porch_fan
- fan.back_porch_fan
- fan.family_room_fan
- fan.master_bedroom_fan
show_state: true
state:
- value: 'on'
styles:
icon:
- color: green
- spin: true
- value: 'off'
styles:
icon:
- color: blue
tap_action:
action: navigate
navigation_path: /tablet-ui/5
What am I doing wrong?
it is possibile to “float” value directly in the custom:button-card?
or i need a template-sensor?
{{ float(states('sensor.test')) + float("15") }}
I am struggling with how to use device properties in a template for days now, but cannot find a solution.
I’m using nested templates for sensors. Using different door/window sensors I have the following templates:
master-standard:
styles:
card:
- border-radius: 0px
- padding: 0.1em
- height: 60px
- width: 60px
label:
- font-size: 0.5em
icon:
- width: 60%
- color: 'rgba(255,255,255,0.2)'
name:
- padding: 2px
- font-size: 0.5em
- color: 'rgba(255,255,255,0.7)'
master-alarm-sensor:
template: master-standard
extra_styles: |
@keyframes mymove { 50% {box-shadow: 0 0 20px red; } }
@keyframes pulse {
0% { -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
box-shadow: 0 0 0 0 rgba(255,0,0, 0.7); }
70% { -moz-box-shadow: 0 0 0 3px rgba(240,52,52, 0.9);
box-shadow: 0 0 0 3px rgba(240,52,52, 0.7); }
100% { -moz-box-shadow: 0 0 0 0 rgba(240,52,52, 0);
box-shadow: 0 0 0 0 rgba(240,52,52, 0); }
}
state:
- value: 'off'
styles:
icon:
- color: 'rgba(255,255,255,0.6)'
name:
- color: 'rgba(255,255,255,0.6)'
- value: 'on'
styles:
card:
- animation: mymove 2s infinite
- animation: pulse 1s infinite
icon:
- width: 45%
- color: 'rgba(255,0,0,0.6)'
- animation: blink 2s ease infinite
name:
- color: 'rgba(255,0,0,0.6)'
master-alarm-sensor-door:
template: master-alarm-sensor
state:
- value: 'off'
icon: 'mdi:door'
- value: 'on'
icon: 'mdi:door-open'
master-alarm-sensor-window:
template: master-alarm-sensor
state:
- value: 'off'
icon: 'mdi:window-closed-variant'
- value: 'on'
icon: 'mdi:window-open-variant'
The actual dashboard is
views:
- title: "Contact sensors"
theme: Backend-selected
icon: 'mdi:shield-home'
badges: []
panel: false
cards:
- type: 'custom:bootstrap-grid-card'
cards:
- type: row
class: justify-content-md-center
title: "Contact sensor detection"
cards:
- entity: binary_sensor.cs_1_window_door_is_open
name: "Kitchen window"
template: master-alarm-sensor-window
type: 'custom:button-card'
- entity: binary_sensor.cs_2_window_door_is_open
name: "Backyard door"
template: master-alarm-sensor-door
type: 'custom:button-card'
If I have read and understood it correctly, the properties defined in the template are used unless a property is defined on a higher level. In this case the sensor should display the icon defined in master-alarm-sensor-door or master-alarm-sensor-window. However, this icon never gets selected, I only see a default icon in the dashboard mdi:door-open icon or the mdi:door-closed icon. The icons that are defined depending on the sensor state are ignored. Is my assumption related to the icon override correct, or do I need to change my template to achieve this behavior?
So sorry I thought I did…
type: vertical-stack
cards:
- type: custom:gap-card
height: 4
- cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-left: 40%;
margin-right: 4%;
border-radius: 70px 70px 70px 70px;
border-top: solid 4px;
border-right: solid 10px;
border-bottom: solid 10px;
border-left: solid 6px;
#border: double 8px;
#border: double;
background-color: #181718;
border-color: #070707;
}
card:
type: vertical-stack
cards:
- type: custom:gap-card
height: 30
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: select.g03harmonyhub01_activities
state: Watch Plex
card:
type: horizontal-stack
cards:
- type: custom:gap-card
height: 40
- type: custom:button-card
icon: mdi:power
size: 40px
color: darkred
styles:
card:
- height: 40px
- width: 40px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: remote.turn_off
service_data:
device_id: f8b25b98a4bf4375b8cb8c23c7e15fef
- type: custom:gap-card
height: 40
- type: conditional
conditions:
- entity: select.g03harmonyhub01_activities
state: power_off
card:
type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:power
size: 40px
color: rgba(255, 255, 255, .15)
styles:
card:
- height: 40px
- width: 40px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: remote.turn_on
hapxics: medium
service_data:
entity_id: remote.g03harmonyhub01
activity: watch plex
- type: custom:gap-card
- type: custom:gap-card
height: 1
- type: horizontal-stack
cards:
- type: custom:gap-card
height: 20
- type: custom:button-card
size: 8%
styles:
card:
- height: 8px
- width: 8px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
- type: custom:gap-card
height: 20
- type: horizontal-stack
cards:
- type: custom:gap-card
height: 40
- type: custom:button-card
icon: mdi:arrow-left
size: 30px
styles:
card:
- height: 30px
- width: 70px
- margin-bottom: -10
- margin-left: '-10%'
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: back
- type: custom:button-card
icon: mdi:home-outline
size: 30%
styles:
card:
- height: 30px
- width: 70px
- margin-left: 10%
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: home
- type: custom:gap-card
height: 40
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho1: null
card:
- height: 34px
- width: 18px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-up
size: 34px
styles:
card:
- z-index: 1
- height: 50px
- width: 64px
- margin-top: 20px
- margin-right: 18px
- margin-bottom: '-10px'
- border-radius: 13px 13px 0px 0px
- border-top: solid 3px
- border-bottom: solid 0px
- border-right: solid 4px
- border-left: solid 2px
- border-color: '#070707'
- background-color: '#360d7c'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: up
haptics: light
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-plus
size: 10px
styles:
card:
- height: 48px
- width: 21px
- margin-top: 15px
- margin-bottom: '-10px'
- margin-right: '-20px'
- border-radius: 0px 12px 10px 0px
- border-top: solid 3px
- border-bottom: solid 0px
- border-left: solid 3px
- border-right: solid 5px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: volume_up
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho2: null
card:
- height: 34px
- width: 10px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-left
size: 34px
styles:
card:
- z-index: 1
- height: 60px
- width: 50px
- margin-right: '-10px'
- border: hidden 0px
- border-radius: 13px 0px 0px 13px
- border-top: solid 3px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 0px
- border-color: '#070707'
- background: '#360d7c'
- outline: hidden
- box-shadow: none
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: left
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/remote-roku-ok2.png
size: 60px
styles:
card:
- z-index: 2
- height: 60px
- width: 60px
- border-radius: 0px
- border: solid 0px
- background-color: transparent
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: select
- type: custom:button-card
icon: mdi:chevron-right
size: 34px
styles:
card:
- z-index: 1
- height: 60px
- width: 50px
- margin-right: 11px
- margin-left: '-10px'
- border-radius: 0px 13px 13px 0px
- border-top: solid 3px
- border-bottom: solid 3px
- border-right: solid 3px
- border-left: solid 0px
- border-color: '#070707'
- background: '#360d7c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: right
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-minus
size: 10px
styles:
card:
- height: 48px
- width: 21px
- margin-top: '-6px'
- margin-bottom: '-10px'
- margin-right: '-20px'
- border-radius: 0px 10px 12px 0px
- border-top: solid 0px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 5px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: volume_down
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho3: null
card:
- height: 34px
- width: 20px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-down
size: 34px
styles:
card:
- z-index: 0
- height: 50px
- width: 64px
- margin-left: '-19px'
- margin-top: '-10px'
- border-radius: 0px 0px 13px 13px
- border-top: solid 0px
- border-bottom: solid 3px
- border-right: solid 3px
- border-left: solid 3px
- border-color: '#070707'
- background: '#360d7c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: down
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-mute
size: 10px
styles:
card:
- height: 34px
- width: 20px
- margin-right: '-20px'
- border-radius: 0px 8px 8px 0px
- border-top: solid 3px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: volume_mute
- type: custom:gap-card
height: 20
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:replay
size: 20px
styles:
card:
- height: 30px
- width: 50px
- margin-right: 8px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: replay
- type: custom:button-card
icon: mdi:microphone
size: 30px
styles:
card:
- height: 30px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: play
- type: custom:button-card
icon: mdi:asterisk
size: 20px
styles:
card:
- height: 30px
- width: 50px
- margin-left: 8px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: info
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:rewind
size: 20px
styles:
card:
- height: 50px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: reverse
- type: custom:button-card
icon: mdi:play-pause
size: 30px
styles:
card:
- height: 50px
- width: 80px
- border-radius: 10px
- border: solid 4px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: play
- type: custom:button-card
icon: mdi:fast-forward
size: 20px
styles:
card:
- height: 50px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: forward
- type: custom:gap-card
- type: custom:gap-card
height: 10
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/button-N.png
size: 130%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: Netflix
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/button-plex.png
size: 50px
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: Plex - Free Movies & TV
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/hulu2.png
size: 100%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: Hulu
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/youtube1.png
size: 50%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: YouTube
- type: custom:gap-card
- type: custom:gap-card
height: 30
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-left: 40%;
margin-right: 4%;
border-radius: 0px;
border: solid 0px;
background-color: transparent;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/remote-roku-tab3.png
size: 100%
styles:
card:
- margin-top: '-12px'
- box-shadow: none
- border: solid 0px
- border-radius: 0px
- background-color: transparent
power:
tap_action:
action: call-service
haptic: success
service: remote.turn_off
service_data:
entity_id: remote.g03harmonyhub01
activity: power off
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/images/bg-127.0.0.1-5760x1080.webp
size: 200%
tap_action:
action: navigate
navigation_path: /lovelace/g3-home
hold_action:
action: none
styles:
card:
- height: 50px
- background-color: transparent
- border: solid 0
- margin-top: '-8%'
- margin-bottom: '-8%'
grid:
- grid-template-areas: auto
type: vertical-stack
Please if you you make this better let me know. I am sorry it took me so long to see this!
I am so sorry it took so long to share my code here it is!
I am posting the full card code as took awhile to get remote sized properly. Out of my 1000 renditions I feel this was the best. Also a small note is I use a LOGITECH IR hub on my main tv. So I am posting two codes. One with the logitech integrated and the second is just strait Roku.
If anyone has ways I can make this better PLEASE let me know!
Planned changes I have:
when roku is on all button icons will look illuminated and when off they will be “clear”. Kind of like what I did with power…
Ideas I would LOVE to integrate with this:
(apps I most use is Plex some time Netflix
Make microphone button work for searching in app
If above not possible I would love to make it enable in app “search” and allow the use of phone keyboard searching for a show or movie.
From Web:
From iPhone:
Code with Logitech:
type: vertical-stack
cards:
- type: custom:gap-card
height: 4
- cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-left: 40%;
margin-right: 4%;
border-radius: 70px 70px 70px 70px;
border-top: solid 4px;
border-right: solid 10px;
border-bottom: solid 10px;
border-left: solid 6px;
#border: double 8px;
#border: double;
background-color: #181718;
border-color: #070707;
}
card:
type: vertical-stack
cards:
- type: custom:gap-card
height: 30
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: select.g03harmonyhub01_activities
state: Watch Plex
card:
type: horizontal-stack
cards:
- type: custom:gap-card
height: 40
- type: custom:button-card
icon: mdi:power
size: 40px
color: darkred
styles:
card:
- height: 40px
- width: 40px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: remote.turn_off
service_data:
device_id: f8b25b98a4bf4375b8cb8c23c7e15fef
- type: custom:gap-card
height: 40
- type: conditional
conditions:
- entity: select.g03harmonyhub01_activities
state: power_off
card:
type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:power
size: 40px
color: rgba(255, 255, 255, .15)
styles:
card:
- height: 40px
- width: 40px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: remote.turn_on
hapxics: medium
service_data:
entity_id: remote.g03harmonyhub01
activity: watch plex
- type: custom:gap-card
- type: custom:gap-card
height: 1
- type: horizontal-stack
cards:
- type: custom:gap-card
height: 20
- type: custom:button-card
size: 8%
styles:
card:
- height: 8px
- width: 8px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
- type: custom:gap-card
height: 20
- type: horizontal-stack
cards:
- type: custom:gap-card
height: 40
- type: custom:button-card
icon: mdi:arrow-left
size: 30px
styles:
card:
- height: 30px
- width: 70px
- margin-bottom: -10
- margin-left: '-10%'
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: back
- type: custom:button-card
icon: mdi:home-outline
size: 30%
styles:
card:
- height: 30px
- width: 70px
- margin-left: 10%
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: home
- type: custom:gap-card
height: 40
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho1: null
card:
- height: 34px
- width: 18px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-up
size: 34px
styles:
card:
- z-index: 1
- height: 50px
- width: 64px
- margin-top: 20px
- margin-right: 18px
- margin-bottom: '-10px'
- border-radius: 13px 13px 0px 0px
- border-top: solid 3px
- border-bottom: solid 0px
- border-right: solid 4px
- border-left: solid 2px
- border-color: '#070707'
- background-color: '#360d7c'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: up
haptics: light
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-plus
size: 10px
styles:
card:
- height: 48px
- width: 21px
- margin-top: 15px
- margin-bottom: '-10px'
- margin-right: '-20px'
- border-radius: 0px 12px 10px 0px
- border-top: solid 3px
- border-bottom: solid 0px
- border-left: solid 3px
- border-right: solid 5px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: volume_up
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho2: null
card:
- height: 34px
- width: 10px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-left
size: 34px
styles:
card:
- z-index: 1
- height: 60px
- width: 50px
- margin-right: '-10px'
- border: hidden 0px
- border-radius: 13px 0px 0px 13px
- border-top: solid 3px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 0px
- border-color: '#070707'
- background: '#360d7c'
- outline: hidden
- box-shadow: none
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: left
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/remote-roku-ok2.png
size: 60px
styles:
card:
- z-index: 2
- height: 60px
- width: 60px
- border-radius: 0px
- border: solid 0px
- background-color: transparent
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: select
- type: custom:button-card
icon: mdi:chevron-right
size: 34px
styles:
card:
- z-index: 1
- height: 60px
- width: 50px
- margin-right: 11px
- margin-left: '-10px'
- border-radius: 0px 13px 13px 0px
- border-top: solid 3px
- border-bottom: solid 3px
- border-right: solid 3px
- border-left: solid 0px
- border-color: '#070707'
- background: '#360d7c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: right
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-minus
size: 10px
styles:
card:
- height: 48px
- width: 21px
- margin-top: '-6px'
- margin-bottom: '-10px'
- margin-right: '-20px'
- border-radius: 0px 10px 12px 0px
- border-top: solid 0px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 5px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: volume_down
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho3: null
card:
- height: 34px
- width: 20px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-down
size: 34px
styles:
card:
- z-index: 0
- height: 50px
- width: 64px
- margin-left: '-19px'
- margin-top: '-10px'
- border-radius: 0px 0px 13px 13px
- border-top: solid 0px
- border-bottom: solid 3px
- border-right: solid 3px
- border-left: solid 3px
- border-color: '#070707'
- background: '#360d7c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: down
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-mute
size: 10px
styles:
card:
- height: 34px
- width: 20px
- margin-right: '-20px'
- border-radius: 0px 8px 8px 0px
- border-top: solid 3px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: volume_mute
- type: custom:gap-card
height: 20
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:replay
size: 20px
styles:
card:
- height: 30px
- width: 50px
- margin-right: 8px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: replay
- type: custom:button-card
icon: mdi:microphone
size: 30px
styles:
card:
- height: 30px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: play
- type: custom:button-card
icon: mdi:asterisk
size: 20px
styles:
card:
- height: 30px
- width: 50px
- margin-left: 8px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: info
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:rewind
size: 20px
styles:
card:
- height: 50px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: reverse
- type: custom:button-card
icon: mdi:play-pause
size: 30px
styles:
card:
- height: 50px
- width: 80px
- border-radius: 10px
- border: solid 4px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: play
- type: custom:button-card
icon: mdi:fast-forward
size: 20px
styles:
card:
- height: 50px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.roku_ultra
command: forward
- type: custom:gap-card
- type: custom:gap-card
height: 10
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/button-N.png
size: 130%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: Netflix
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/button-plex.png
size: 50px
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: Plex - Free Movies & TV
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/hulu2.png
size: 100%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: Hulu
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/youtube1.png
size: 50%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.roku_ultra
source: YouTube
- type: custom:gap-card
- type: custom:gap-card
height: 30
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-left: 40%;
margin-right: 4%;
border-radius: 0px;
border: solid 0px;
background-color: transparent;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/remote-roku-tab3.png
size: 100%
styles:
card:
- margin-top: '-12px'
- box-shadow: none
- border: solid 0px
- border-radius: 0px
- background-color: transparent
power:
tap_action:
action: call-service
haptic: success
service: remote.turn_off
service_data:
entity_id: remote.g03harmonyhub01
activity: power off
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/images/bg-127.0.0.1-5760x1080.webp
size: 200%
tap_action:
action: navigate
navigation_path: /lovelace/g3-home
hold_action:
action: none
styles:
card:
- height: 50px
- background-color: transparent
- border: solid 0
- margin-top: '-8%'
- margin-bottom: '-8%'
grid:
- grid-template-areas: auto
type: vertical-stack
1 Like
This code is strait Roku
type: vertical-stack
cards:
- type: custom:gap-card
height: 4
- cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-left: 40%;
margin-right: 4%;
border-radius: 70px 70px 70px 70px;
border-top: solid 4px;
border-right: solid 10px;
border-bottom: solid 10px;
border-left: solid 6px;
#border: double 8px;
#border: double;
background-color: #181718;
border-color: #070707;
}
card:
type: vertical-stack
cards:
- type: custom:gap-card
height: 30
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: media_player.party_room_roku
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:gap-card
height: 40
- type: custom:button-card
icon: mdi:power
size: 40px
color: darkred
styles:
card:
- height: 40px
- width: 40px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: power
haptics: light
- type: custom:gap-card
height: 40
- type: conditional
conditions:
- entity: media_player.party_room_roku
state: idle
card:
type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:power
size: 40px
color: rgba(255, 255, 255, .15)
styles:
card:
- height: 40px
- width: 40px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: power
haptics: light
- type: custom:gap-card
- type: custom:gap-card
height: 1
- type: horizontal-stack
cards:
- type: custom:gap-card
height: 20
- type: custom:button-card
size: 8%
styles:
card:
- height: 8px
- width: 8px
- border-radius: 100px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
- type: custom:gap-card
height: 20
- type: horizontal-stack
cards:
- type: custom:gap-card
height: 40
- type: custom:button-card
icon: mdi:arrow-left
size: 30px
styles:
card:
- height: 30px
- width: 70px
- margin-bottom: -10
- margin-left: '-10%'
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: back
- type: custom:button-card
icon: mdi:home-outline
size: 30%
styles:
card:
- height: 30px
- width: 70px
- margin-left: 10%
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: home
- type: custom:gap-card
height: 40
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho1: null
card:
- height: 34px
- width: 18px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-up
size: 34px
styles:
card:
- z-index: 1
- height: 50px
- width: 64px
- margin-top: 20px
- margin-right: 18px
- margin-bottom: '-10px'
- border-radius: 13px 13px 0px 0px
- border-top: solid 3px
- border-bottom: solid 0px
- border-right: solid 4px
- border-left: solid 2px
- border-color: '#070707'
- background-color: '#360d7c'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: up
haptics: light
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-plus
size: 10px
styles:
card:
- height: 48px
- width: 21px
- margin-top: 15px
- margin-bottom: '-10px'
- margin-right: '-20px'
- border-radius: 0px 12px 10px 0px
- border-top: solid 3px
- border-bottom: solid 0px
- border-left: solid 3px
- border-right: solid 5px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: volume_up
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho2: null
card:
- height: 34px
- width: 10px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-left
size: 34px
styles:
card:
- z-index: 1
- height: 60px
- width: 50px
- margin-right: '-10px'
- border: hidden 0px
- border-radius: 13px 0px 0px 13px
- border-top: solid 3px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 0px
- border-color: '#070707'
- background: '#360d7c'
- outline: hidden
- box-shadow: none
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: left
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/remote-roku-ok2.png
size: 60px
styles:
card:
- z-index: 2
- height: 60px
- width: 60px
- border-radius: 0px
- border: solid 0px
- background-color: transparent
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: select
- type: custom:button-card
icon: mdi:chevron-right
size: 34px
styles:
card:
- z-index: 1
- height: 60px
- width: 50px
- margin-right: 11px
- margin-left: '-10px'
- border-radius: 0px 13px 13px 0px
- border-top: solid 3px
- border-bottom: solid 3px
- border-right: solid 3px
- border-left: solid 0px
- border-color: '#070707'
- background: '#360d7c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: right
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-minus
size: 10px
styles:
card:
- height: 48px
- width: 21px
- margin-top: '-6px'
- margin-bottom: '-10px'
- margin-right: '-20px'
- border-radius: 0px 10px 12px 0px
- border-top: solid 0px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 5px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: volume_down
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
plho3: null
card:
- height: 34px
- width: 20px
- border: solid 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
icon: mdi:chevron-down
size: 34px
styles:
card:
- z-index: 0
- height: 50px
- width: 64px
- margin-left: '-19px'
- margin-top: '-10px'
- border-radius: 0px 0px 13px 13px
- border-top: solid 0px
- border-bottom: solid 3px
- border-right: solid 3px
- border-left: solid 3px
- border-color: '#070707'
- background: '#360d7c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: down
- type: custom:gap-card
- type: custom:button-card
icon: mdi:volume-mute
size: 10px
styles:
card:
- height: 34px
- width: 20px
- margin-right: '-20px'
- border-radius: 0px 8px 8px 0px
- border-top: solid 3px
- border-bottom: solid 3px
- border-left: solid 3px
- border-right: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: volume_mute
- type: custom:gap-card
height: 20
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:replay
size: 20px
styles:
card:
- height: 30px
- width: 50px
- margin-right: 8px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: replay
- type: custom:button-card
icon: mdi:microphone
size: 30px
styles:
card:
- height: 30px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: play
- type: custom:button-card
icon: mdi:asterisk
size: 20px
styles:
card:
- height: 30px
- width: 50px
- margin-left: 8px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: info
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
icon: mdi:rewind
size: 20px
styles:
card:
- height: 50px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: reverse
- type: custom:button-card
icon: mdi:play-pause
size: 30px
styles:
card:
- height: 50px
- width: 80px
- border-radius: 10px
- border: solid 4px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: play
- type: custom:button-card
icon: mdi:fast-forward
size: 20px
styles:
card:
- height: 50px
- width: 30px
- border-radius: 10px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
hapxic: success
service: remote.send_command
service_data:
entity_id: remote.party_room_roku
command: forward
- type: custom:gap-card
- type: custom:gap-card
height: 10
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/button-N.png
size: 130%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.party_room_roku
source: Netflix
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/button-plex.png
size: 50px
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.party_room_roku
source: Plex - Free Movies & TV
- type: custom:gap-card
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/hulu2.png
size: 100%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.party_room_roku
source: Hulu
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/youtube1.png
size: 50%
styles:
card:
- height: 40px
- width: 74px
- border: solid 3px
- border-color: '#070707'
- background-color: '#1c1c1c'
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.party_room_roku
source: YouTube
- type: custom:gap-card
- type: custom:gap-card
height: 30
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-left: 40%;
margin-right: 4%;
border-radius: 0px;
border: solid 0px;
background-color: transparent;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/icons/remote-roku-tab3.png
size: 100%
styles:
card:
- margin-top: '-12px'
- box-shadow: none
- border: solid 0px
- border-radius: 0px
- background-color: transparent
- type: custom:gap-card
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/images/bg-127.0.0.1-5760x1080.webp
size: 200%
tap_action:
action: navigate
navigation_path: /lovelace/g3-home
hold_action:
action: none
styles:
card:
- height: 50px
- background-color: transparent
- border: solid 0
- margin-top: '-8%'
- margin-bottom: '-8%'
grid:
- grid-template-areas: auto
type: vertical-stack
1 Like
Hi,
I have a botton-card with nested bottom-cards inside. How can I “move” a bit nested buttons down.
To the Button Card Pros:
Is there any way instead of FW update status off to call status Current or available when on?
Greetings
Moss
If you want to use custom:button-card, sure see: Entity State displays „raw“ Informations · Issue #685 · custom-cards/button-card · GitHub and use state_display:
if I understand you correctly… not really sure what you mean with ‘call’
1 Like
Hey Button Card Experts! I’m just getting my feet wet with more “advanced” HA things, like CSS modifying. I’m working on a mobile music dashboard, with the help of a few great resources like this one, I’ve almost got what I need to get figured out to finalize it. I’m just having one issue. I’m using the container template shared by Keith, but I can’t figure out how to get my buttons to center within the horizontal stack (IE the icons on the top and the music control buttons). Code below, if anyone can help me.
Template code:
button_card_templates:
container:
color_type: label-card
color: rgb(240, 240, 240)
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- margin: 0
- padding: 0.3em
Top Navigation Bar
type: custom:button-card
template: container
name: Speakers
show_name: false
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.sonos_playing_status
name: Sonos
icon: mdi:sofa
show_icon: true
show_name: false
show_state: false
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(90, 153,92,1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 2px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.everywhere_playing_status
name: Everywhere
show_icon: true
show_name: false
show_state: false
size: 50%
icon: mdi:home
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(255, 202, 55, 1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 3px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.bathroom_playing_status
name: Bathroom
show_icon: true
show_name: false
show_state: false
icon: mdi:bathtub
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(65, 106, 154, 1)
state:
- value: 'on'
styles:
icon:
- color: rgb(90, 153 ,92, 1)
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 3px solid rgb(0, 167, 11)
view_layout:
grid-area: A
In case it is helpful, I’m using grid layout and this is the code in the layout options:
grid-template-columns: auto 400px auto
grid-template-rows: auto
grid-template-areas: |
"Gutter1 A Gutter2"
"Gutter1 B Gutter2"
"Gutter1 C Gutter2"
"Gutter1 D Gutter2"