Excelente. In my case the background is transparent. I copied a template of yours to later modify it but it looks like this. Is it something from the theme.yaml?
2 Likes
Morning,
why is my font color in popups grey and not visible ?
I am searching for what i did wrong but didn’t get it.
Set Theme to dark.
1 Like
Thanks a lot 
Hey all
I am trying to integrate the spotify card (Spotify Lovelace Card) in to the media card instead of the PLEX one. I am hoping for some assistance on getting the styling equal to what the rest is like, I tried to modify the direction @Mattias_Persson gave for @chezpaul2 on his picture gallery (A different take on designing a Lovelace UI - #2203 by Mattias_Persson)( but it’s not where i want it to be yet. Anyone able to help? I am missing the round corners, the right amount of spacing inbetween the 4 playlists and the size of the tiles must be a bit larger
- type: conditional
conditions:
- entity: select.conditional_media
state_not: Kantoor
- entity: select.conditional_media
state_not: Keuken
card:
type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_mart
playlist_type: discover-weekly
grid_covers_per_row: '2'
limit: 4
country_code: NL
display_style: grid
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
aspect-ratio: 2/2 !important; /* card - square */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid{
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.btn {
top: 50% !important; /* center buttons */
}
.grid-item{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
}
.grid-item-album-image{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid-item:hover{
box-shadow:none !important;
}
#header{
display:none !important;
}
#footer{
display:none !important;
}
.playback-controls{
display:none !important;
}
#header-track{
display:none;
}
#content{
border: 0px !important;
}
2 Likes
Hey all, lovely work. I made some changes to the dashboard, and use some non button cards now. How can I enable tilt on cards without placing them in a button card?
I think we need to change the light.yaml in button_card_templates that the light popups work:
light:
template:
- base
- circle
- loader
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
content:
type: custom:mod-card
card_mod:
style:
hui-entities-card:
$: |
#states {
padding-top: 0.8em;
}
card:
type: entities
entities: >
[[[
if (entity) {
let lights = [],
id = Boolean(entity.attributes.entity_id)
? [entity.entity_id].concat(entity.attributes.entity_id)
: [entity.entity_id];
for (let i = 0; i < id.length; i++) {
lights.push({
"type": "custom:mushroom-light-card",
"entity": id[i],
"fill_container": false,
"primary_info": "name",
"secondary_info": "state",
"icon_type": "icon",
"show_brightness_control": true,
"use_light_color": true,
"show_color_temp_control": true,
"show_color_control": true,
"collapsible_controls": true
});
}
return lights;
}
]]]
variables:
circle_input: >
[[[
if (entity) {
// if light group get brightness from child to remove bounce
let child = entity.attributes.entity_id,
brightness = child && states[child[0]].attributes.brightness
? Math.round(states[child[0]].attributes.brightness / 2.54)
: Math.round(entity.attributes.brightness / 2.54);
return brightness === 0 && entity.state !== 'off'
? 1
: brightness
}
]]]
circle_input_unit: '%'
Im not sure, if everything is correct. ^^"
For those that are interested, I managed to get it working except for the TILT part. Please let me know if you want to use it also, I can share my code. Hoping someone is able to help me getting the TILT work on this card also… 
9 Likes
I’m interested in !!
Yes please!
here is the relevant part. Please note that I changes the input select part so the conditions are wrong, but the styling should work.
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
cards:
- type: horizontal-stack
#####################################
# MEDIA VAN MART #
#####################################
cards:
- type: conditional
conditions:
- entity: select.conditional_media_mart
state_not: Spotify Mart
card:
type: custom:spotify-card
account: mart
spotify_entity: media_player.spotify_mart
playlist_type: discover-weekly
grid_covers_per_row: '2'
limit: 4
country_code: NL
display_style: grid
default_device: Living room and Kitchen
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
aspect-ratio: 2/2 !important; /* card - square */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
padding: 0% !important;
}
.grid{
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
gap: 5% !important;
}
.btn {
top: 50% !important; /* center buttons */
}
.grid-item{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
box-shadow:none !important;
color: transparent !important;
}
.grid-item-album-image img{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid-item:hover{
box-shadow:none !important;
color: transparent !important;
}
.grid-item-album-image.playing{
border-radius: var(--button-card-border-radius) !important;
}
#header{
display:none !important;
}
#footer{
display:none !important;
}
.playback-controls{
display:none !important;
}
#header-track{
display:none;
}
#content{
border: 0px !important;
background-color: transparent !important;
}
- type: conditional
conditions:
- entity: media_player.spotify_mart
state_not: idle
- entity: media_player.spotify_mart
state_not: 'off'
- entity: media_player.spotify_mart
state_not: unknown
- entity: media_player.spotify_mart
state_not: unavailable
card:
type: custom:button-card
entity: media_player.spotify_mart
template:
- conditional_media
- icon_spotify
8 Likes
Thanks !! 
Hello all,
I’m trying to modify the update button logic from watchtower to home assistant update service.
I created a test button in a temporary dashboard and it works, here’s the code:
type: custom:button-card
entity: sensor.current_version
name: Aggiorna Home Assistant
variables:
latest: sensor.home_assistant_versions
latest_beta: sensor.home_assistant_versions_beta
tap_action:
action: call-service
service: update.install
service_data:
entity_id: update.home_assistant_core_update
i then tried to port this code inside the update yaml but it loks like it is not working:
- type: custom:button-card
entity: sensor.current_version
name: Aggiorna Home Assistant
variables:
latest: sensor.home_assistant_versions
latest_beta: sensor.home_assistant_versions_beta
tap_action:
action: call-service
service: update.install
service_data:
entity_id: update.home_assistant_core_update
template: updates_hass_icon_name
Does anyone has an idea why it is not working?
Thanks for your help!
Davide
I did some digging and thought I’d give an update.
I’m not clever enough to find and solve the actual issue. But disabling tilt from all devices solved my issues.
Not a big loss for me, as I wasn’t getting the the floating card element that I’ve seen in animated examples here, so it felt rather flat still.
Hello everyone,
I need some help if anyone is so kind. I’m trying to make menu title dynamic as shown in this video. Any ideas how to do it?
Hi
Does anyone know how to delete the scroll bars ?
Thanks
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: NAS
style: >
--popup-max-width: calc(385px + 385px);
--ha-card-border-radius: 0;
card_mod:
style:
layout-card:
$grid-layout$:
# card divider border
.: |
#root {
margin: -24px 0 !important;
}
hui-entities-card:
$: |
.card-content {
padding: var(--tablet-popup-content-padding);
padding-bottom: 0.8em;
}
ha-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* portrait */
@media screen and (max-width: 1200px) {
ha-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
$hui-horizontal-stack-card:
# horizontal bottom buttons
$: |
#root {
justify-content: space-evenly;
margin-top: 1.7em;
max-width: 82vw; /* iphonex */
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 385px 385px
grid-template-rows: 1fr
grid-template-areas: |
"hass nas"
mediaquery:
#portrait
"(max-width: 1200px)":
grid-template-columns: 1fr
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"hass"
"nas"
cards:
### HOME ASSISTANT
- type: entities
view_layout:
grid-area: hass
title: Home Assistant
show_header_toggle: false
card_mod:
class: header
entities:
- entity: sensor.current_version
name: Version actuelle
icon: mdi:home-assistant
- entity: sensor.template_hass_next_release
- entity: sensor.db_size
icon: mdi:database
- entity: sensor.home_assistant_log_size
name: Log
icon: mdi:file-document
- entity: sensor.uptime
name: Dernier redémarrage
icon: mdi:update
### Unraid
- type: entities
view_layout:
grid-area: nas
title: Unraid
show_header_toggle: false
card_mod:
class: header
# no border on last card
style: |
ha-card {
border: none !important;
}
entities:
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: &bar_card_positions
icon: outside
indicator: 'off'
name: outside
severity: &bar_card_severity
- color: '#6d2525'
from: 85
to: 999
entity_row: true
entities:
- entity: sensor.glances_cpu_used
name: Processor
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.glances_cpu_used
- entity: sensor.glances_ram_used_percent
name: RAM - 16GB
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.glances_ram_used_percent
- entity: sensor.glances_mnt_disk1_used_percent
name: Stockage 4TB
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.glances_mnt_disk1_used_percent
- entity: sensor.glances_mnt_cache_used_percent
name: Cache 1TB
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.glances_mnt_cache_used_percent
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
name: Adguard
icon: mdi:shield
entity: switch.adguard_protection
template:
- icon_name
- icon_adguard
footer:
type: custom:mini-graph-card
show:
name: false
icon: false
state: false
legend: true
entities:
- entity: sensor.deluge_down_speed
name: Download
- entity: sensor.deluge_up_speed
name: Upload
2 Likes
Thank you!