siiiiick update! I’m supposed to go to bed now… kinda feel like a kid at christmas, wanna play with my toys!
Sorry for taking some extra time. But i have been busy with all sorts of shit. 
no apologies and no expectations! life happens, we all know you do this in your free time.
Idk if I missed it but I don’t think you listed/linked which specific layout-card but I assume it’s Thomas Lovens since you used alot of his other cards.
Just in case anyone else is unsure.
Yes it is GitHub - thomasloven/lovelace-layout-card: 
Get more control over the placement of lovelace cards. Kind of important to have 
My mobile ui is done, i forgot to mention it to you, but if you would like to have a look here it is → "Something pretty" for mobile
1 Like
Thank you Daniel for the awesome theme!
I had originally started playing with your initial release after seeing it on Reddit. Had it mostly converted over to my ecosystem. Now I just discovered your update, NICE!
Question for you, I am having a hard time figuring out what the titlemusic block is doing and what its intent is. I get the popup window part with your various media players, but what are you using the “state-switch” to perform. Having a hard time following your code.
Here is my progress (I know I still have some alignment and organization to do) Mostly just trying to make things work in the background now.
2 Likes
Hello, Thats looking cool !
For the “mediatitleblock” i use the stateswitch to change between two conditions. One condition show a specific card if the screen is in portrait. The other condition show a slightly different card if the screen is in landscape.
So in the portrait condition i just change the margin for the button card that displays the text “Media”.
And for the landscape i use another margin for the same button card. This is done so that everything looks good both in portrait and in landscape.
This creates alot of repeated code, and al becuase a slightly different margin for the button card 
But i have not found any other solution.
Gotcha, Ok … That makes sense. I believe I had ran into that somewhere else as well. Should have known.
Thanks again sir for the template!
Sent you a Coffee / Beer!
Thank you ! 
Feel free to ask if you have any more question and please show your dashboard when it is finished !
I finally finished my newest dashboard based on your fantastic design 
!
I use this while working and keep it up on my smallest screen as a music dashboard. There are swipe cards for the audio player selection and status panel, and two pop-ups for more info on my network and media (one of which also has a swipe card… I may be addicted to swipe cards).
Thanks again for your inspiration, this has been so much fun to play around with!
12 Likes
Thanks, super nice work. Your view with all the LAN sensors etc looks really futuristic. Like a modern Star Trek computer of something 
Really cool.
I also see that you have a great taste in music.
1 Like
Very good job !
i can’t have the blur effect on popup. can you share your code please ?
thanks
So in my popup is a picture element with button cards & a few graphs, and that blur / background is achieved by styling the button card underneath the collection of elements with a backdrop filter:
- type: custom:button-card
style:
top: 0px
left: 0px
transform: translate(0%, 0%)
tap_action:
action: none
styles:
card:
- box-shadow: none
- background-color: rgba(175, 191, 223, 0.25)
- border-radius: 10px
- height: 648px
- width: 1152px
- backdrop-filter: blur(20px)
- '-webkit-backdrop-filter': blur(20px)
Hope that helps 
1 Like
Hi @nfs I really like your spotify media player layout. Love the way that is really orderly.
2 questions.
Box.png is a picture element. Can you share that file oo how it is created?
Maybe its possible to share a little bit more code. So it is better to make a bigger picture.
Thanks in advance.
The box.png is just a transparent image file, you can generally use whatever size (e.g. make it 1x1 pixels), I just created it in a free image manipulation tool. There are several other button cards nested in there as well inside the picture element for the Playlist labels, the icons above the grid, etc.
There’s a pastebin link in one of my posts above which has an example of a smaller spotify player, which works the same way (three spotify cards inside a swipe card).
Here’s how I have the larger spotify card inside the picture element:
- type: picture-elements
image: /local/box.png
elements:
- type: custom:spotify-card
style:
top: 38px
left: 0px
transform: translate(0%, 0%)
spotify_entity: media_player.spotify_neal
default_device: Office Mini
playlist_type: default
account: default
always_play_random_song: true
shuffle: true
hide_top_header: true
hide_currently_playing: true
hide_connect_devices: true
hide_warning: true
display_style: grid
limit: 12
grid_covers_per_row: '4'
card_mod:
style: |
ha-card {
background: transparent;
padding: 2px 0px 0px !important;
width: 710px;
overflow: visible !important;
}
#content {
border: 0px !important;
background-color: transparent !important;
padding: 0px !important;
overflow: visible !important;
}
#footer > div.footer__right {
display: none !important;
}
#footer > div.dropdown-wrapper > div.controls > div {
height: 28px;
width: 28px;
}
#footer > div.dropdown-wrapper > div.controls > div > div {
display: none;
}
.grid-item {
border-radius: 10px;
box-shadow: 2px 3px 15px -3px rgba(0, 0, 0, 0.3) !important;
transition-duration: 0.25s;
}
.grid-item-album-image.playing {
border-radius: 10px !important;
box-shadow: 0px 0px 20px rgba(175, 191, 223, 1) !important;
}
.grid-item:hover {
box-shadow: 0px 0px 17px #afbfdf !important;
transition-duration: 0.5s;
}
.grid-item-album-image > img {
border-radius: 10px;
}
.dropdown {
border-radius: 10px !important;
max-height: none !important;
box-shadow: none !important;
}
.dropdown-content.dropdown > p {
font-weight: 300;
color: #afbfdf;
}
.dropdown-content.dropdown > a {
font-weight: 300;
border-radius: 10px;
}
.dropdown-content.dropdown > a:hover {
background: #41445f;
}
Trying to get this setup, but only a few weeks into HA. Do you drop this into config.yaml or under themes or elsewhere and call it from config.yaml?
This looks great. Are you able to share your lovelace code? A little more in-line with what I’m looking to do than the original and I’m still pretty fresh to card mod and CSS and trying to muddle my way into something lol.
Sorry, after a while I changed to another dashboard. Don’t have the code anymore.
I know I fixed it with a lot of changing in the CSS, so thats the only way to go I guess.