No, that’s not needed.
Did you change the entity inside the code to switch.tv?
popup_cards:
# Please change this to the entity you want to hold and get the remote
script.television:
title: Remote
yes I have.
the code that you provided for the raw configuration is it meant to be added under views?
because I dont have it under views. I have it between resources and custom_header.
custom_header:
background: var(--primary-background-color);
compact_mode: true;
editor_warnings: false
elements_color: var(--primary-text-color);
exceptions: []
hidden_tab_redirect: false
tab_indicator_color: var(--primary-text-color);
voice_hide: true
popup_cards:
switch.tv:
card:
cards:
- cards:
- cards:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 1px
- height: 1px
type: 'custom:button-card'
hold_action:
action: more-info
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 50px
- height: 60px
type: 'custom:button-card'
- entities:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 150px
- height: 60px
type: 'custom:button-card'
- icon: 'mdi:power'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 100px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
entity_id: switch.tv
service: switch.toggle
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 60px
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
- entities:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 63px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:menu-up'
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
entity_id: switch.tvremoteup
service: switch.turn_on
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:menu-left'
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
entity_id: switch.tvremoteleft
service: switch.turn_on
type: 'custom:button-card'
- name: OK
show_icon: false
show_name: true
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
{% else %}
-4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
{% 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
entity_id: switch.tvremotemiddle
service: switch.turn_on
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
entity_id: switch.tvremoteright
service: switch.turn_on
type: 'custom:button-card'
type: 'custom:hui-horizontal-stack-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 63px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:menu-down'
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
entity_id: switch.tvremotedown
service: switch.turn_on
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 -4px -4px 5px 0 rgba(255,255,255,.7), inset 4px 4px 5px 0 rgba(0,0,0,.07);
{% else %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 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 {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- cards:
- entities:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 17px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:minus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
entity_id: switch.volumedown
service: switch.turn_on
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- name: VOL
show_icon: false
show_name: true
styles:
card:
- 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'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-card'
- icon: 'mdi:plus'
show_icon: true
show_name: false
size: 100%
styles:
card:
- box-shadow: none
- width: 30px
- height: 30px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
entity_id: switch.volumeup
service: switch.turn_on
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') %}
-5px -5px 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% 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 {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 10px
- height: 10px
type: 'custom:button-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 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
entity_id: switch.tvremotesmart
service: switch.turn_on
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
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 5px 0 rgba(255,255,255,.5),5px 5px 5px 0 rgba(0,0,0,.03);
{% else %}
-5px -5px 5px 0 rgba(50, 50, 50,.5),5px 5px 5px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 60px
- height: 60px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
entity_id: switch.tvremoteback
service: switch.turn_on
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 60px
type: 'custom:button-card'
type: vertical-stack
type: vertical-stack
type: vertical-stack
type: vertical-stack
title: Remote
resources:
type: module
url: /local/stack-in-card.js
swipe_nav:
animate: fade
prevent_default: true
swipe_amount: 15
wrap: true
title: 10 Albers Court
views:
- badges:
- sensor.water_temp_above
- sensor.water_temp_below
That’s weird 
No, the code is meant to be on the first line, not under anything. The above should be fine…
I have just put the code from my raw configuration. its between custom_header and resources.
@N-l1 Is it possible if you could do a screen recording showing how you have inserted the TV entity and how you pull the remote card please?
Sure, no problem. Here it is:
2 Likes
one question. You know after I add your code in my raw configuration… do I expect a card or something to appear on my HA lovelace automatically? or do I have to add an additional one? I do have to add an additional one then which one is it?
thanks.
The problem was resolved in PM 
1 Like
Hi all. Sorry, but total Noob question here. @N-l1, do you have a template for a view with buttons stubbed out and commented? I started with the default views and config files on Github, and they are great. But when I try to add something new like weather, I always get a syntax error.
I’m not what you mean with that. You can use code for the entire view but also code for individual cards. 
Sorry, a “view” file that has a header with badges, and a button example… Like this?
'# Template for Blank Card
'- badges: []
’ -Button Code here
’ icon: ‘mdi:palm-tree’
’ path: sprinklers
'title: Blank
Sure, check out the ui-lovelace.yaml file. If you are only looking for the code of a single view, go into the view folder and you’ll find all my views. Hope this helps!
OK, So I got this far. This is to turn my hot tub on, but everytime I try to add another custom button I get an error message. Ideally, I would like to display the temperature and be able to turn it on and off. I assume that I have a few things that are not closed? Thanks for your help/
# Lovelace Soft UI home view by @N-l1
- badges: []
cards:
- cards:
- cards:
- content: |
# Pool / Spa
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
###############This just has the text for temperature###############
- cards:
- cards:
- content: |
# Temperature
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
########################################################################
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 70px
################################################
type: 'custom:button-card'
- entity: switch.spa_heater
icon: 'mdi:radiator'
show_icon: true
show_name: false
state:
- styles:
icon:
- color: 'var(--paper-item-icon-active-color) '
value: 'on'
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('light.living_room_lights', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'above_horizon') and is_state('light.living_room_lights', 'off') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('light.living_room_lights', 'on') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% elif is_state('sun.sun', 'below_horizon') and is_state('light.living_room_lights', 'off') %}
-5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 70px
- height: 70px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
################################################################
type: 'custom:button-card'
- cards:
- content: |
# Spa On / Off
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
type: vertical-stack
type: vertical-stack
###########################################################################
icon: 'mdi:developer-board'
path: blank
title: Dev
title: Blank
Do you use yaml mode? If not, have you tried adding the card with the code below. Might be worth a try:
# Example entry
cards:
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 80px
type: 'custom:button-card'
# This is first button with the light bulb icon
# Change this to an icon you want
- icon: 'mdi:lightbulb-multiple'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
# This is the tab that the first button redirects to
# Change this to the tab you want the button to redirect to
navigation_path: /lovelace/lights
type: 'custom:button-card'
- cards:
# This is the text beside the first button
# Change this to what you want it to say
- content: |
# Lights
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# This is the smaller text beside the first button
# Change this to what you want it to say
- content: >
# There are {% if is_state('sensor.lights_on', '0') %}
currently no {% else %} {{states('sensor.lights_on')}} {%
endif %} lights on
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 80px
type: 'custom:button-card'
# This is second button with the alarm clock icon
# Change this to an icon you want
- icon: 'mdi:alarm'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
# This is the tab that the second button redirects to
# Change this to the tab you want the button to redirect to
navigation_path: /lovelace/alarm
type: 'custom:button-card'
- cards:
# This is the text beside the second button
# Change this to what you want it to say
- content: |
# Alarm clock
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# This is the smaller text beside the second button
# Change this to what you want it to say
- content: >
# The weekday alarm is {% if
is_state('input_boolean.sleep_cycle_weekday', 'on') and
is_state('input_boolean.alarm_weekday_enabled', 'on')%} on
sleep cycle mode {% elif
is_state('input_boolean.alarm_weekday_enabled', 'on') %} set
for {{states('sensor.alarm_weekday_time')}} {% else %} not
set {% endif %}
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 80px
type: 'custom:button-card'
# This is third button with the pine tree icon
# Change this to an icon you want
- icon: 'mdi:pine-tree'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
# This is the tab that the third button redirects to
# Change this to the tab you want the button to redirect to
navigation_path: /lovelace/sprinklers/
type: 'custom:button-card'
- cards:
# This is the text beside the third button
# Change this to what you want it to say
- content: |
# Irrigation
style: |
ha-card {
height: 20px;
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
# This is the smaller text beside the third button
# Change this to what you want it to say
- content: |
# The irrigation system is not activated
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
- cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 10px
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
type: vertical-stack
is it possible to fit this card better to mobile? this looks a bit off
Sorry I meant the tv remote card. I thought I quoted you’re video.
Yes, the remote card is not as consistent as I would like it to be. It works better on certain phones while not-so-great on others. It is definitely something I plan to improve. However, I’m quite busy at the moment so don’t expect it too soon.
But remember, pull requests are always welcomed 
v.03 Major Code/Doc Updates
Features:
It’s been a minute since the last release!
This release contains many code changes and some possibilities for theme styling 
-
Better, more concise, clearer README.
-
Used margins when styling cards so there is no more need for small transparent button cards.
-
I have tested the theme styling beta feature of card-mod and… it works! This means you can apply this style universally to all cards! More info here.
Thanks, everyone!
1 Like
Thanks! Very nice. Bit of work to rebuild the UI but well worth the effort i think.
Cleaner code = more lightweight = faster?
1 Like
