Could you please help to explain how to get the border/outline removed from the invisible buttons on top of play button? Thank you.
I suspect that the borders are showing due to the theme you are using. I used the IOS themes from the HACS frontend store. Maybe that makes a difference for you.
I control most everything through my Fire Cube Gen 3, so this HACS card works perfectly for me out of the box …it also helps that I wrote the card too 
I use the same card with different configuration values for my bedroom TV as well
Can I have a code in the middle column? Please? Thanks.
Sure. It’s a lot of code so I’ll put in just a portion but if you need something specific I can add it.
This is the start of the middle column (vertical stack)
- type: conditional
conditions: []
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: custom:button-card
entity: input_text.remote_state
tap_action:
action: call-service
service: script.remote_set_state_apple
data: {}
target: {}
icon: si:appletv
color: rgb(32, 33, 36)
color_type: card
styles:
card: null
state:
- value: Apple
color: rgb(55, 65, 82)
show_state: false
- show_name: false
show_icon: true
type: custom:button-card
entity: input_text.remote_state
tap_action:
action: call-service
service: script.remote_set_state_receiver
data: {}
target: {}
icon: mdi:audio-video
color: rgb(32, 33, 36)
color_type: card
styles:
card: null
state:
- value: Receiver
color: rgb(55, 65, 82)
show_state: false
- show_name: false
show_icon: true
type: custom:button-card
entity: input_text.remote_state
tap_action:
action: call-service
service: script.remote_set_state_bluray
data: {}
target: {}
icon: mdi:disc
color: rgb(32, 33, 36)
color_type: card
styles:
card: null
state:
- value: Bluray
color: rgb(55, 65, 82)
show_state: false
- show_name: false
show_icon: true
type: custom:button-card
entity: input_text.remote_state
tap_action:
action: call-service
service: script.remote_set_state_projector
data: {}
target: {}
icon: mdi:projector
color: rgb(32, 33, 36)
color_type: card
styles:
card: null
state:
- value: Projector
color: rgb(55, 65, 82)
show_state: false
- show_name: false
show_icon: true
type: custom:button-card
entity: input_text.remote_state
tap_action:
action: call-service
service: script.remote_set_state_xfinity
data: {}
target: {}
icon: mdi:television-box
color: rgb(32, 33, 36)
color_type: card
styles:
card: null
state:
- value: Xfinity
color: rgb(55, 65, 82)
show_state: false
Then the code continues with additional horizontal stacks
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
icon: none
hold_action:
action: none
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: script.remote_arrow_up
data: {}
target: {}
icon: mdi:arrow-up
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: script.remote_menu
data: {}
target: {}
icon: mdi:menu
- type: horizontal-stack
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: script.remote_arrow_left
data: {}
target: {}
name: Left
icon: mdi:arrow-left
entity: script.remote_arrow_left
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: script.remote_select
data: {}
target: {}
icon: mdi:circle
- show_name: false
show_icon: true
type: button
tap_action:
action: call-service
service: script.remote_arrow_right
data: {}
target: {}
icon: mdi:arrow-right
The code then repeats a lot of this for each display of buttons. A lot of the buttons are calling generic scripts, such as remote_arrow_up. This script is composed of a bunch of conditions to determine which device I have selected and then send the arrow up command to the correct equipment.
Hopefully this helps, let me know if there is something more needed.
Can I have a code for a script? I try to figure out how this works. Please and Thanks.
Sure - You will see each icon calls a script related to the button. I’ll walk you through the “Remote Arrow Up” script calls.
This script checks a remote state variable I created to understand which “mode” the screen is in. For instance, I may want to use the arrow keys on my marantz menu but then later on use those same keys for the blueray player. Depending on the mode will cause which script to be called.
remote_arrow_up:
sequence:
- choose:
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Apple”
sequence:
- service: script.remote_apple_command
data:
command: up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Receiver”
sequence:
- service: script.remote_marantz_direction_up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Bluray”
sequence:
- service: script.remote_bluray_up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Xfinity”
sequence:
- service: script.remote_cable_up
- conditions:
- condition: state
entity_id: input_text.remote_state
state: “Projector”
sequence:
- service: script.remote_projector_up
Let’s say we are in the marantz receiver mode. The “remote_marantz_direction_up” script will be called which will send the specific instructions to the marantz device.
remote_marantz_direction_up:
alias: Remote Marantz Direction Up
sequence:
- service: denonavr.get_command
data:
entity_id: media_player.marantz_av7705
command: /goform/formiPhoneAppDirect.xml?MNCUP
In this marantz example I’m using the direct integration capabilities with HA. Some of these devices I have to use an IR relay command. Almost all of the buttons behave in this manner for the middle section.
Hopefully this helps!
thanks for sharing, I slightly modified it to make a simple Player pop remote, it was very usefull 
I don’t know why but the power icon is not centered 
