It’s slightly different.
After installing via HACS
- you simply add (or copy&paste) the line
browser_mod:
to your configuration.yaml file.
-
Restart Home Assistant
-
Go to settings —> integrations and check if there is a new entry „browser mod“
Yes friend. Thanks.
I think he also had a permission problem. Change them to homeassistant: homeassistant
It works, I keep fixing problems. LOL
These selectors are kicking my butt and I can’t quite figure out where I am going wrong…
Here is what I have in my theme for the markdown card:
#################################################
# #
# SIDEBAR MARKDOWN CARD #
# #
#################################################
"grid-layout$hui-markdown-card:first-of-type":
$: |
/* Markdown strip along left side */
ha-card {
background-color: #00000010;
border-radius: 0;
min-height: 100vh;
animation: ha-card 1s forwards;
}
@keyframes ha-card {
0%, 100% {
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
}
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
background: none;
min-height: 100%;
animation: none;
}
"$ha-card>ha-markdown":
.: |
ha-markdown {
padding: var(--custom-layout-card-padding) 2vw 0 var(--custom-layout-card-padding) !important;
pointer-events: none;
}
/* phone */
@media screen and (max-width: 800px) {
ha-markdown {
padding: 0 !important;
}
$: |
/* clock */
p > span {
font-family: SF Text;
font-size: var(--markdown-sidebar-clock-font-size);
font-weight: 200;
line-height: var(--markdown-sidebar-clock-line-height);
letter-spacing: -0.05vw;
margin-left: -0.3vw;
color: var(--ha-card-header-color);
}
/* colon */
p > span > span {
position: relative;
top: -.09em;
}
/* text */
p {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: #6a7377;
}
p > b {
color: var(--ha-card-header-color);
}
The clock isn’t getting formatted with the code:
/* clock */
p > span {
font-family: SF Text;
font-size: var(--markdown-sidebar-clock-font-size);
font-weight: 200;
line-height: var(--markdown-sidebar-clock-line-height);
letter-spacing: -0.05vw;
margin-left: -0.3vw;
color: var(--ha-card-header-color);
}
Here is DOM:
I think it is because the clock doesn’t have a p > span and it just get formatted with the last p (text) formatting. I can’t figure out a way to get around this… any ideas?
I think I figured it out:
#################################################
# #
# SIDEBAR MARKDOWN CARD #
# #
#################################################
"grid-layout$hui-markdown-card:first-of-type":
$: |
/* Markdown strip along left side */
ha-card {
background-color: #00000010;
border-radius: 0;
min-height: 100vh;
animation: ha-card 1s forwards;
}
@keyframes ha-card {
0%, 100% {
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
}
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
background: none;
min-height: 100%;
animation: none;
}
"$ha-card>ha-markdown":
.: |
ha-markdown {
padding: var(--custom-layout-card-padding) 2vw 0 var(--custom-layout-card-padding) !important;
pointer-events: none;
}
/* phone */
@media screen and (max-width: 800px) {
ha-markdown {
padding: 0 !important;
}
$: |
/* clock */
p {
font-family: SF Text;
font-size: var(--markdown-sidebar-clock-font-size);
font-weight: 200;
line-height: var(--markdown-sidebar-clock-line-height);
letter-spacing: -0.05vw;
color: var(--ha-card-header-color);
margin: 0 0 0 0;
}
/* colon */
p > span > span {
position: relative;
top: -.09em;
}
/* text */
p > font > b {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: #6a7377;
margin: 0 0 0 0;
}
b > p {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: var(--ha-card-header-color);
}
/* phone */
@media screen and (max-width: 800px) {
p {
font-size: calc(var(--markdown-sidebar-clock-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-clock-line-height) * 2.6 );
}
p > font > b {
font-size: calc(var(--markdown-sidebar-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
b > p {
font-size: calc(var(--markdown-sidebar-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
}
I welcome any feedback if there is a better way to do this.
Has anyone figured out how to put navigation buttons in the sidebar yet?
I need to add a few more views (Security, Weather, Media, etc) and ideally would like to have nav buttons under the greeting and above the bottom buttons (I have no need for the active devices section as the main dashboard shows me what is on).
My first couple attempts haven’t worked out and I can’t seem to get the buttons lining up correctly. I haven’t figured out how to place things where I want them with CSS yet.
I’ve created the button templates, I am just struggling to place the buttons correctly. If anyone has any guidance, it’d be greatly appreciated.
Inside the sidebar grid area, make a 1 column grid
markdown
button 1
button 2
1 Like
Ah so make it as markdown instead of a grid card?
I tried a grid card with custom:button-cards however the buttons were spaced out huge and I couldn’t figure out how to close the gaps. Mind you, I didn’t do much with the themes.yaml
I did try the sidebar card initially, however I cannot designate it to a grid area. It renders before all other cards. I’m sure I could make it work somehow but I think I’d prefer to have the nav native in the grid. If I can’t get the buttons to work, I’ll try the sidebar card again and just match the style.
Just need to figure out why the buttons went all crazy and huge when I added a 1 column grid card to the sidebar.
Hi @Mattias_Persson greate and huge work! Is there any instructions how to install this or i have to figure it out by myself ? Just asking to not spend a lot of time trying tu implement it if there is some guide.
There is not really a setup. Mattias shared his config, and its to you to copy those things and change it to your entities and liking.
Most things are straight forward, such as the community files, custom button yaml, ui-lovelace etc.
Just a matter of merging into your setup
I came across mattias’ post in another topic. It’s going to help many here. I know it’ll help me 
Hi, I’m looking for some css help. (I’ve been trying to learn from other sources on the net so as not to bug the community but the context is different in the examples I am seeing so I’m having a difficult time translating the help into my specific situation)
In the theme there is the code:
#################################################
# #
# Weather Card #
# #
#################################################
"grid-layout$hui-element":
$: |
ha-card {
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
}
Does this css place that card at the bottom of the container? If yes… if I have multiple cards with that code, how does it keep the cards in order. For example in Mattias theme, he has the clock, then a conditional card and then the grid. Is it just the order the cards are in the code?
In my case, I am trying to show a weather card under the clock:
- type: markdown
view_layout:
grid-area: sidebar
content: |
{% set attributes = states.sensor.template_sidebar.attributes | default %}
{% for template in attributes %}
{{ state_attr('sensor.template_sidebar', template) }}
{% endfor %}
- type: "custom:hui-element"
view_layout:
grid-area: sidebar
card_type: weather-forecast
entity: weather.regina
show_forecast: false
And in my theme I have:
#################################################
# #
# SIDEBAR MARKDOWN CARD #
# #
#################################################
"grid-layout$hui-markdown-card:first-of-type":
$: |
/* Markdown strip along left side */
ha-card {
background-color: #00000010;
border-radius: 0;
min-height: 100vh;
animation: ha-card 1s forwards;
}
@keyframes ha-card {
0%, 100% {
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
}
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
background: none;
min-height: 100%;
animation: none;
}
"$ha-card>ha-markdown":
.: |
ha-markdown {
padding: var(--custom-layout-card-padding) 2vw 0 var(--custom-layout-card-padding) !important;
pointer-events: none;
}
/* phone */
@media screen and (max-width: 800px) {
ha-markdown {
padding: 0 !important;
}
$: |
/* clock */
p {
font-family: SF Text;
font-size: var(--markdown-sidebar-clock-font-size);
font-weight: 200;
line-height: var(--markdown-sidebar-clock-line-height);
letter-spacing: -0.05vw;
color: var(--ha-card-header-color);
margin: 0 0 0 0;
}
/* colon */
p > span > span {
position: relative;
top: -.09em;
}
/* text */
p > font > b {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: #6a7377;
margin: 0 0 0 0;
}
b > p {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: var(--ha-card-header-color);
}
/* phone */
@media screen and (max-width: 800px) {
p {
font-size: calc(var(--markdown-sidebar-clock-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-clock-line-height) * 2.6 );
}
p > font > b {
font-size: calc(var(--markdown-sidebar-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
b > p {
font-size: calc(var(--markdown-sidebar-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
}
#################################################
# #
# Weather Card #
# #
################################################
"grid-layout$hui-element":
$: |
ha-card {
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
padding: -50% 0 0 0 !important;
}
}
But for some reason the weather card doesn’t respect the order and it gets placed at the top of the markdown card:
I think this has something to do with the flex container but I am not 100% sure.
Any ideas on what is happening here? Thanks all!
For those wanting an alarm tile, made one myself. It’s not as elegant as @Mattias_Persson could make, with all sorts of fancy animated svg icons and style, but it’s a start. Going to improve over time, but fits my needs for now. I do a popup to show me a full sized alarm panel card with all buttons etc. But it shows me the state, icon dynamically and added some color + animation to the tile when triggered etc.
Obviously, feel free to improve and share back~
- type: "custom:button-card"
entity: alarm_control_panel.alarmo
aspect_ratio: 1/1
show_entity_picture: true
show_state: true
show_name: false
name: Alarm
show_icon: true
style:
- padding: 0px
styles:
entity_picture:
- width: 80%
- height: 100%
- padding-bottom: 0%
card:
- border-radius: 10%
- background-color: 'rgba(115, 115, 115, 0.2)'
icon: mdi:shield-off-outline
tap_action:
!include ../popup/alarm.yaml
state:
- value: 'arming'
icon: mdi:shield-outline
styles:
card:
- animation: blink 3s ease infinite
- background-color: '#FAA255'
- value: 'armed_away'
icon: mdi:shield-lock
styles:
card:
- background-color: '#BA494B'
- value: 'armed_home'
icon: mdi:shield-account
styles:
card:
- background-color: '#F0C438'
- value: 'armed_night'
icon: mdi:shield-home
styles:
card:
- background-color: '#66C6F2'
- value: 'armed_custom_bypass'
icon: mdi:security
styles:
card:
- background-color: '#7F7CE6'
- value: 'pending'
icon: mdi:shield-sync
styles:
card:
- animation: blink 4s ease infinite
- background-color: '#FAA255'
- value: 'triggered'
icon: mdi:bell-ring
styles:
card:
- animation: blink 1s ease infinite
- background-color: '#f70d1a'
- value: 'unavailable'
icon: mdi:shield-alert
styles:
card:
- animation: blink 10s ease infinite
- background-color: '#657c80'
- value: 'unknown'
icon: mdi:shield-alert
styles:
card:
- animation: blink 10s ease infinite
- background-color: '#6f8499'
3 Likes
I’ve also managed to make 2 garbage tile (left one showing what is being picked up today and right one showing what garbage container I should put that night, for garbage to be picked up the next day).
code:
- type: "custom:button-card"
entity: sensor.garbage_today
aspect_ratio: 1/1
show_entity_picture: true
show_name: true
name: Vandaag
show_icon: true
style:
- padding: 0px
styles:
entity_picture:
- width: 80%
- height: 100%
- padding-bottom: 0%
card:
- border-radius: 10%
- background-color: '#848484'
entity_picture: "/local/images/afval/afval_geen_large.png"
state:
- value: 'gft'
entity_picture: "/local/images/afval/afval_gft_large.png"
styles:
card:
- background-color: '#3B863D'
- value: 'papier'
entity_picture: "/local/images/afval/afval_papier_large.png"
styles:
card:
- background-color: '#00B1EB'
- value: 'plastic'
entity_picture: "/local/images/afval/afval_pmd_large.png"
styles:
card:
- background-color: '#F4A029'
- type: "custom:button-card"
entity: sensor.garbage_tomorrow
aspect_ratio: 1/1
show_entity_picture: true
show_name: true
name: Morgen
show_icon: true
style:
- padding: 0px
styles:
entity_picture:
- width: 80%
- height: 100%
- padding-bottom: 0%
card:
- border-radius: 10%
- background-color: '#848484'
entity_picture: "/local/images/afval/afval_geen_large.png"
state:
- value: 'gft'
entity_picture: "/local/images/afval/afval_gft_large.png"
styles:
card:
- background-color: '#3B863D'
- value: 'papier'
entity_picture: "/local/images/afval/afval_papier_large.png"
styles:
card:
- background-color: '#00B1EB'
- value: 'plastic'
entity_picture: "/local/images/afval/afval_pmd_large.png"
styles:
card:
- background-color: '#F4A029'
4 Likes
Hi friend.
How did you make your photo appear.
I can’t make mine show. I create a person, I use it on the card and it tells me if I am or not. I thought changing the name of the image to mine but I don’t see it.
Thanks
Configuration > People > make a person with foto. And then add that to the card.
Or do what matt did:
I was just wondering, as a theme newbie, if there is somewhere like an overview of more homemade custom icons and animations that match @Mattias_Persson’s design?
I already found an icon for Sonos here in the thread, but it’s a bit tedious and confusing to have to read through everything.
I’m building a new system for a wall mounted tablet and after seeing this there’s no question that this UI looks every bit as sleek and clean as a commercial product. Well done @Mattias_Persson
How do I install this? I have seen the various components on GitHub? Is this a fully manual process; e.g. create the structure in custom_components, edit configuration.yaml, ui-lovelace.yaml etc?
1 Like
How Mattias added the people in configuration I thought it was like this. If you add the people in configuration you cannot add it. But so I could. Thank you
1 Like