Great dashboard @mjinx27! Any chance sharing your code? Iāve love to know how you did your Now Playing Apple TV card.
Gladly, made it on the fly, so not well thought out yet, you need mini-graph in addition and mushroom as well unfortunately.
1 Like
Unfortunately, there is no change for me yet.
Hi @LE0N ,
your work is HUGE and very beautiful!
iāve adapted your ālights cardsā to my covers/shutter, additionally to name/icon/slider iād like to add cover position status and buttons (up/stop/down): do you think is possible?
iām quite new with all and custom button card is not so simple for me.
thanks in advance
1 Like
Based on the energy cost buttons that @mjinx27 has in his tablet view. I have created the following:
type: grid
columns: 2
square: false
cards:
- type: custom:button-card
color_type: label-card
layout: label
show_name: false
show_state: false
show_units: false
show_label: true
show_icon: true
entity: sensor.james_energy_cost_daily
icon: fas:bolt
label: |
[[[
return 'Today Ā£' + states['sensor.james_energy_cost_daily'].state ;
]]]
aspect_ratio: 3/1
tap_action:
action: none
hold_action:
action: none
styles:
icon:
- width: 9px
- top: 0%
img_cell:
- justify-content: flex-end
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-width min-width
- height: 20px
card:
- background-color: var(--yellow)
- padding: 20px
label:
- font-size: 14px
- margin-left: 5%
- justify-self: flex-start
- type: custom:button-card
color_type: label-card
layout: label
show_name: false
show_state: false
show_units: false
show_label: true
show_icon: true
icon: fas:plug
entity: sensor.james_power_usage
label: |
[[[
return 'Currently ' + states['sensor.james_power_usage'].state + 'W';
]]]
aspect_ratio: 3/1
tap_action:
action: none
hold_action:
action: none
styles:
icon:
- width: 9px
- top: '-10%'
img_cell:
- justify-content: flex-end
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-width min-width
- height: 20px
card:
- background-color: var(--red)
- padding: 20px
label:
- font-size: 14px
- margin-left: 5%
- justify-self: flex-start
Hope its of use to someone! 
10 Likes
Hi, after update to 2023.5.1 if I use ābottom tabbarā there is back an empty space in the place where top navbar was located. And ābottom tabbarā overlaps part of cards on the bottom of my view.
With 2023.4 it was fine the issue emerged after update to 2023.5.
This is config functional before update:
card-mod-root-yaml: |
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
}
.header {
top: auto !important;
bottom: 0 !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: 80px !important;
padding: 4px 4px 16px 4px !important;
}
/* This hides the help button, menu button and title */
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none !important;
}
ha-menu-button, ha-icon-button {
display: none !important;
}
ha-tabs: {
height: var(--header-height);
--paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
color: var(--app-header-text-color) !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: var(--button-card-background-color-on) !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
Any idea how to solve it?
1 Like
what happened if your try this in the theme rounded.yaml
masonry-view-card-margin: 0px 20px
dont forget to reload the theme through dev tools
A little bit better on some views, but empty space on the top is still there.
Edit:
It changed gaps between cards so my views look weird. It means masonry-view-card-margin: 0px 20px does not solve this case 
I have also noticed some changes since 2023.5. The bottom bar is now transparent again, but not blurred. In addition, the bottom bar feels higher and the distance between the page content and the top feels increased. 
try adding padding-top to #view section in your theme yaml
#view {
margin-top: 0px !important;
padding-top: 0px !important;
}
1 Like
Yes !!! It is it. 
Thank you
As usual - I did not see it
1 Like
I have the same problem like @CM000n. The bottom bar is much higher and covers even the āadd cardā button. The solution provided by @schmierlappe unfortunately doesnāt work for this problem.
Any suggestions to solve this issue would be highly appreciated!
I have fixed it again for myself. The bottom bar now has an acceptable size again and is blurred 
homeassistant/rounded.yaml at main Ā· CM000n/homeassistant Ā· GitHub
7 Likes
HI! Thanks for your code, it works perfectly!
I would like to ask you for a little help, on my theme I put the minimalist theme navbar.
However, I would like to put the blur effect there too, but Iām not capable of it ā¦ could you help me?
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
/* ___________ Bottom tabbar ___________ */
div#view{
transform: initial;
padding: 0 !important;
position: fixed !important;
margin: 0 !important;
width: 100%;
}
.header {
top: auto !important;
bottom: 0px !important;
transform: translate3d(0px, 0px, 0px) !important;
backdrop-filter: blur(50px) !important;
-webkit-backdrop-filter: blur(50px) !important;
-moz-backdrop-filter: blur(50px);
-o-backdrop-filter: blur(50px);
-ms-backdrop-filter: blur(50px);
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: var(--header-base-height) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
background-color: rgba(0,0,0,0) !important;
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height);
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 0 10px;
height:50px !important;
}
paper-tab[aria-selected=true] {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 25px;
height:50px;
/*width: calc(100% / 4);
padding: 0;*/
padding-left: 20px;
padding-right: 20px;
}
ha-menu-button, ha-button-menu {
color: var(--contrast10);
}
Hi, apologies for the late reply, only just seen this Will clean up my code and upload to Github soon
4 Likes
Is there anyone that can lend a hand? Iām trying to recreate this in my HA but Iām running into trouble with a specific slider card where the gradient in the background isnāt much of a gradient so the color looks solid.
type: custom:button-card
name: Living Room Strip
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.hue_gradient_lightstrip_1
colorMode: brightness
styles:
container:
- border-radius: 100px
- overflow: visible
- background: none
card:
- height: 40px
- padding: 0 20px
- background: var(--brightness)
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: var(--black)
- top: 2px
- right: '-18px'
- height: 36px
- width: 36px
- border-radius: 100px
styles:
grid:
- grid-template-areas: '"n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--brightness-tint)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 12px 0
- color: var(--contrast20)
I think this might be due to your display settings. The change in color is minimal, but seems to be exactly the same as in the pictures of le0n.
Did you manage to remove the gap at the top? If so, how did you? Thanks!