HI,
which font-family you use? here my 
yours looks better 
thy
I have added the fonts Mattias uses in his design. They are placed in www/fonts and it is the families of SF-Mono, SF-UI-Display and SF-UI-Text.
1 Like
hmm i have the same config and fonts but looks different
Aah. That’s it. Wasn’t aware of that. Thanks
can someone please tell me how I do the red update notification, like the picture…
Well, since today update, my custom css classes stoped working. Anyone with this problem?
#Markdown da sidebar
- type: custom:hui-markdown-card
class: relogio
style:
{top: 9%, left: 11.1%}
content: >
<span>{{ states('sensor.time') }}</span>
The syle file:
card-mod-card: |
ha-card {
background: none;
box-shadow: none;
border-radius: 0;
}
.card-header {
margin: -0.5em 0 1.1em 0.4em;
font-family: SF Text;
letter-spacing: 0.005em;
font-size: 1.5em;
}
/* * * * * * * * * * * * * * * * * *
* *
* TYPES *
* *
* * * * * * * * * * * * * * * * * */
ha-card.type-entities {
background: none;
padding: 0.3em 1.25em 0.4em 0.5em;
}
ha-card.type-custom-stack-in-card {
background: none;
}
ha-card.type-history-graph {
margin: 0.8em -1.9em -1.5em -0.8em;
}
ha-card.type-custom-hui-markdown-card {
font-family: SF Display;
line-height: 2.05vw;
letter-spacing: 0.06vw;
color: rgba(255, 255, 255, 0.9);
pointer-events: none;
}
/* * * * * * * * * * * * * * * * * *
* *
* CLASSES *
* *
* * * * * * * * * * * * * * * * * */
ha-card.add_header {
background: linear-gradient(180deg,
var(--card-header) 0%,
var(--card-header) 4.6em,
var(--card-color) 4.6em,
var(--card-color) 100%);
border-radius: 1em;
}
.sidebar{
font-size: 1.3vw;
font-weight: 300;
opacity: 0.75;
width: 15.5vw;
color: red;
height: 1px;
}
.relogio{
font-family: SF Text;
font-size: 5vw;
font-weight: 200;
letter-spacing: -0.05vw;
color: red;
}
Nope. Check if the tablet theme in http://url:8123/profile is selected.
Don’t use it anymore but it’s a conditional image
Thanks for the post, great ideas, almost done with a minimal layout for a 7 inch tablet that goes on the wall
Only thing i haven’t been able to do is make the image of what is playing appear in the circle on top of the music card, where the icon normally would go. The image option is a hardcoded url that works if i put it in with quotes “”, but it changes with every image. I want to pass the attribute of the variable doing states.entity_id.attributes.media_url but i haven’t been able to make it work even tho i tried a bunch of variations of the code.
Hi guaro2k,
have you a code for your Temp and Humidity?
Looks great.
You can install the custom:mini-graph-card and just call it when you are calling the entity.
so, after “entities:” instead of calling - entity: entity.id just do - card: ‘custom:mini-graph-card’, see example bellow
padding helps to give a little more space for all the data, check the mini-graph-card add-on for other cool options, I haven’t tried all of them in this HomeKit implementation, I’ve found that not all addons options work
- card: 'custom:mini-graph-card'
noPadding: true
cardOptions:
name: Humidity
entities:
- sensor.rm4_humidity
- card: 'custom:mini-graph-card'
noPadding: true
cardOptions:
name: Temp
entities:
- sensor.rm4_temperature
Has anyone configured speaker groups and synced volume under this design? I haven’t been able
im using this add-on and code:
- type: 'custom:mini-media-player'
sync_volume: true
entity: media_player.living_room
name: Music
image: >-
{{ state(media_player.living_room.attributes.entity_picture)
}}
speaker_group:
platform: sonos
show_group_count: true
artwork: full-cover
sync_volume: true
expanded: false
entities:
- entity_id: media_player.Living_Room
name: Sonos Play
- entity_id: media_player.Living_Room_2
name: Sonos SL
sync_volume: true
Check my plex in ui-lovelace. It’s possible that you had the template working but your css was off. Try setting it as a background or something like that first.
styles:
custom_fields:
media_image: &plex_poster
[background-position: center center, background-image:
"[[[ return 'url(' + states[entity.entity_id].attributes.data[1].fanart + ')'; ]]]"]
Mattias, how to install it? I cant find any discription.
Verry nice work on the cover. I try to copie it but can’t get it to work 
Where did you place this? In the button card template or did you create a new one?
How did you place it in youre ui-lovelace.yaml?
Good evening,
I added your sidebar_active to me, so where should be shown which lights are still on. but unfortunately I only get the status unavailable …
Use the configuration as inspiration. It is not plug and play.
Do you do this in the button card cause I don’t get it to work.
- type: custom:button-card
entities:
- card: "custom:mini-graph-card"
noPadding: true
cardOptions:
name: Humidity
entities:
- sensor.tunex_b301_hum
name: Vardagsrum Temp
style:
width: 10%
custom_fields:
icon_lamp: >
<ha-icon icon="mdi:thermometer"></ha-icon>
styles: *icon_lamp_styles
template: base
tap-action:
action: more-info
this looks nice, I haven’t had success getting mine to display like this, I think it because im using home kit card and it kind of works a little different than mattias implementation.
But all in all this post was exactly what I needed to create a minimalistic dashboard