And a big THANK YOU for making the card-mod-helper tool!!
1 Like
So it’s for styling from themes, for cards read it backwards until you see your card, in this case hui-entities-card.
style:
"#states>div>hui-text-entity-row$hui-generic-entity-row$state-badge$ha-icon$ha-svg-icon": |
ha-svg-icon {
color: white;
}
or condensed
style:
"hui-text-entity-row$hui-generic-entity-row$state-badge": |
state-badge {
color: white;
}
or just use card mod variable lol
style:
.: |
ha-card {
--card-mod-icon-color: white;
}
Hello there 
Is it possible to integrate roller shutters in a custom button card?
If I don’t use “YAML-MODE” and start a new dashboard, I can add my shutters with a simple type “Entities” and it gets me a card, where I can move up, down and stop the shutters.
Do you have any idea, how to achieve that in a custom button card (which is in a picture elements card)?
I used so much of your code, but I dont know how to integrate the shutters (I dont want a “press and hold” action → that already works. I do want to have two arrows for up / down or just a button).
Thank you in advance!
Best regards!
I don’t know, can’t you just call the service or let a script handle it?
This is probably what you should do
button tap action → popup → shutters card
You’re probably going mental with all the people tagging you @Mattias_Persson , we just can’t help it asking talented people for help neh? XD
I have a question. Is it possible (now with the new grid-layout) to easily adapt the code to certain screen aspects/resolutions? I tried playing a bit with grid-template-columns: repeat(4, 1fr) 0 changing the 4 to 6 etc. It helps a bit, but obviously far from ideal. It cuts information (like the corona text at the bottom) width is too much
I know this has been asked a couple of times, maybe some examples so I can write you a wiki for your page while I’m at it. So people can refer to that instead.
This example is on a retina display (2880 × 1800) lol, buttons are huge dawg!
Forgot to mention in the update post, I used this to https://grid.layoutit.com/ to visualise!
corona is intentionally cut of if it doesn’t fit
themes.yaml overflow: hidden; and white-space: nowrap;
EDIT
custom-layout-card-padding in themes can also be increased for smaller buttons
3 Likes
Nice, it has taught me enough to play with the config. Looking better already! Changing some font sizes now. A tidy bit large on that too. Sad part is that if i lower the vw value, it also changes on mobile font size. I need to figure out how to only change font size for the default view. Mobile should have other font sizes.
I think this should work. Defining a min and max value to have it look good on any kind of screen size.
update: that did the trick
markdown-sidebar-font-size: min(max(16px, 1.1vw), 1.5vw)
If you’re using (or intend to do so) layout-card, you can set special media queries for all kinds of things, like mobile or desktop.
Take a look here:
And then me
Hi
I migrated the code to the grid layout, but I can’t find why the sidebar text position is weired. It’s too high and too to the left of my screen.
What did I miss ?
Thanks
Great!!! Many thanks for sharing.
Mattias, I’ve been searching for a way to get rid of the top header menu. used to be something Custom Header, but that’s depricated. how did you fix that?
1 Like
Does anyone here have a beautiful animated window icon, lol
Would very much appreciate it, or link maybe to where i can find it. think coding one is tidy bit too difficult for me as of right now 
Hi friend. I try to base myself on your code to start modifying mine. Try to use sidebar without success.
Now using your code I get this error. Can anybody help me. Thanks
If I copy the content of button_card_templates.ymal I have no errors but it looks like this
@elysium, did you ever figure out what caused this? I am having the same issue.
Hi Pablo,
I am not sure if you should be editing this with the lovelace ui web editor.
What I did was copy all files from the github repository to my own home assistant config. You won’t be able to edit it through web editor because of the way it is coded with includes etc.
So make sure you have a file editor that can access the files to do your personalizations
what @Vasco said, you need to use lovelace mode: yaml in configuration.yaml for !include
if you ignore !include and paste the contents it should look like this
button_card_templates:
base:
variables:
...
views:
- type: custom:grid-layout
...
also go to your profile and choose “tablet” theme
Are you sure it’s not a cache thing?
The markdown card should be 100% width/height of the sidebar grid-area and the inside padding is the custom-layout-card-padding variable in themes
Unless something is intefering with the offset. Another theme perhaps or maybe a modified theme or wrong theme chosen?