Hello! Beautiful theme, can you share your achievements? thank you!
I’m having the same problem… Restarting does’t work
Never mind, got it working. @Isack98 Only copy themes.yaml to the directory /config/include and restart. That should do the trick.
I don’t mind sharing. But it’s really just @Mattias_Persson 's theme with my own personal sprinkles on top. But still really all his. I just spent the time on this thread picking and choosing the little edits others did that I liked. I know when you start it feels like an unknown language but in just 3 months I almost feel half comfortable with all of it.
I guess I’ll have to find a tutorial on how to put this on github.
I’m still trying to figure out this grid thing. There’s not a lot out there that explains it.
I’m still using @pex81 beautiful weather button but in a 2/1 ratio and I want to see the weather icons on the bottom right side. (the second temp is my inside temp)
This is what it looks like right now with:
styles:
grid:
- grid-template-areas: |
"n i"
"temp i"
"s i"
"l i"
- grid-template-columns: 2fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
But as you can see, img_cell (the svg’s) don’t show at all. I’m using this:
name:
- place-self: start
- text-transform: uppercase
- font-weight: 500
img_cell:
- justify-content: start
- margin: none
- width: 80%
state:
- place-self: start
label:
- place-self: start
- margin-left: -5px
custom_fields:
temp:
- place-self: start
- margin-top: -10px
Is there a way to see the grid layout to see what is going on in the button?
I also still need to find a way to change the grid-gap. 
Is the only way to edit the dashboard is to have the configuration.yml be set to this? Im pretty new to HA and editing the dashboard through the GUI is easier for me so far. Once I set it to mode: storage the interface goes back to my default dashboard.
lovelace:
mode: yaml
What would be the easiest way to go about adding a title like this? 
Hi Andy,
Could you reupload this file? Your dashboard looks sick, I would like to use some of your ideas!
Thanks in advance,
Chris
Thanks
I’ll read it
Is there another way than changing the button-card yaml and having to reboot and wait 10 mns for the results each time? Is there a better way to do this? That’s what’s killing me. The wait between the changes.
You should be able to just reload the pertinent parts of the config in the servers controls section of the configuration page.
Good idea, but which one would you reload for button_card_template.yaml?
I reload the “Template Entities” for those and the “Locations and Customizations” when i mess with the ui-lovelace file.
1 Like
How/where do you configure the sidebar?
Clicking on Template Entities does not reload the button card yaml. I can confirm that.
Here’s an example
type: custom:button-card
custom_fields:
graph:
card:
type: custom:apexcharts-card
series:
- entity: sensor.temp
2 Likes
Again use themes.yaml or mod-card
- type: custom:mod-card
card_mod:
style: |
button-card {
padding: 10%;
}
card:
type: custom:button-card
entity: calendar.family
template:
- widget_calendar
EDIT: Explanation
You’re trying to add padding to button-card but you’re adding it to button-card > ha-card. Using browser dev tools you can see the structure of a button-card
button-card
→ aspect-ratio
→ ha-card
→ container
→ name
→ state
Both examples here only affects ha-card
# button-card styles
- type: custom:button-card
styles:
card:
- padding: 40%
# card-mod style
- type: custom:button-card
card_mod:
style: |
ha-card {
padding: 40% !important;
}
you can style DOWN the button-card structure
# button-card styles
- type: custom:button-card
styles:
name:
- display: none
# card-mod style
- type: custom:button-card
card_mod:
style: |
ha-card > #container > #name {
display: none;
}
… but not UP from ha-card to button-card
You can wrap the button-card with mod-card
# mod-card style
- type: custom:mod-card
card:
type: custom:button-card
card_mod:
style: |
button-card {
padding: 10%;
}
so the structure looks like this
mod-card
→ ha-card
→ button-card
→ aspect-ratio
→ ha-card
→ container
→ name
→ state
now you can style DOWN from mod-card to button-card
BUT the reason I say style from themes.yaml is that you can style witout having to add mod-card at all because that structure is from home assistant root all the way down to any element.
One option is to revert to this
Yes, editing from UI doesn’t support !include. You could paste the contents from every include directly but then “raw lovelace” would get very large, and even more confusing to edit.