I’ll introduce templates in the next version, for those who can’t use YAML anchors.
You’ll define button-card config templates in the main part of the lovelace yaml, and then you use one of the templates in the button card config to avoid repetition! It’s basically like yaml anchors but for this card only.
Great work.
Here is the code you asked for @RomRider I have tried putting card-modder
everywhere, in front of the stacks and even as first card on the view but to no avail. I have to mention that it is on a popup card (I tried removing the background image, but same result). And it is a state switch, but I imagine that these things shouldn’t be the culprit no?
Auto Jimmy:
type: vertical-stack
cards:
- type: 'custom:card-modder'
style:
border-radius: 12px
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
box-shadow: 2px 2px rgba(0,0,0,0.0)
padding: 0px 10px
height: 33px
overflow: hidden
card:
content: "##### Daihatsu Gran Move 1.6CX (1999) 42-DH-PS"
type: markdown
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 13px
- type: 'custom:card-modder'
style:
background-image: url('/local/images/daihatsu.jpg')
background-size: cover
background-position: 50% 50%
text-shadow: '1px 1px #000000'
color: white
height: 140px
vertical-align: baseline
margin-bottom: 2px
font-size: 13px
border-radius: 12px
overflow: hidden
card:
type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:useful-markdown-card'
content: >
**APK:** [[ sensor.daihatsu_gran_move_expdate.state ]]
**Kenteken:** 42-DH-PS
**Verzekerd:** [[ sensor.daihatsu_gran_move_insured.state ]]
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 13px
I have tried everything, but this is what happens it will “fade” the black bars just a little, but it will remain there even though I set it to be transparent. The corners of the photo shows that border-radius: hidden is not respected.
I have only done the bar that is on the top (which says “Olie”) it only does this with a vertical-stack-in-card. Using a normal vertical stack would result in this:
Edit: this was not the actual code, but the code after trying a lot of card-modders everywhere. It was just to see if it would make a difference as I read somewhere that the card modder works for the top card only.
I have only copied the code from the photo at the top, to not bloat the thread with this.
Your config looks good so it should work. Could you share here the JSON of the state of your light when it’s at 40% please? (from the device panel in HA)
I had a look at the vertical stack in card’s code and actually it enforces a background color… That’s why you have this issue. There no way to get around that even with card-modder as card-modder’s code will always apply the style on the first child of the last vertical-stack-in-card in the chain (hope it makes sense for you). I’m going to try something and PR it if it works! It’s probably going to involve custom styling on the card itself.
CC: @thomasloven
Edit: @jimz011, after using my brain a bit more, why would you need vertical-stack-in-card if it works with vertical-stack? I mean you can then use card-modder on each card to remove the box-shadow and the margin to achieve the result same result.
You are absolutely right, that is the way I currently use it (without the margin though, as seen in the screenshot with the dog).
Though to come back to the original question (which was why I asked this in the first place). If the vertical-stack-in-card behaves this way, then applying css styling to the buttons would make no difference?
Vertical stack in card with 2 buttons inside is how I’d do it, and vertical stack in card should work with CSS, unless there’s a bug? Can you share a screenshot and a config of something which breaks the display?
Unless if I understand correctly
card-modder’s code will always apply the style on the first child of the last vertical-stack-in-card in the chain
meaning that, knowing my last vertical-stack-in-card is the one with the check-button-cards, and because in the vertical-stack-in-card there are 5 cards, it will only apply it to the first. And because of that it will enforce this background as it can not apply the style to the whole stack?
Anyways, thanks a lot for this info, helped me out a lot.
vertical-stack-in-card
creates a card, with a background, box-shadow and rounded corners (problem is you can’t change the way the card is displayed, ex: you can’t change the rounded corners for example or make the background different, it is fixed to be the default of your theme or home-assistant if undefined in your theme).
That’s the first thing, then, what it does is: It takes all the cards inside (real cards, so horizontal-stack and vertical-stack are excluded) and deletes the margin and the box-shadow (only that) on each element.
It means that inside a vertical-stack-in-card you can use card-modder but keep in mind that the background of the the vertical-stack-in-card is set to var(--paper-card-background-color)
, so setting the background color to transparent on a card inside of a vertical-stack-in-card will display what is behind it… which means it will display var(--paper-card-background-color)
, everything else works.
Then for card-modder, it’s specifically hard-coded to only apply the style on the first element after the last vertical-stack-in-card in the chain. That means to be effective, card-modder has to be applied directly to the card you want to style, not on a stack.
Hope it helps
Ah, yes I see the code in your link, looks logical. Btw wouldn’t using margin
be a bit hacky to achieve this?
Edit: I have changed the code in the vertical-stack-in-card.js
and changed all the values to 0 (those 3 lines you linked) and I changed the this.style.background
line to paper-card-background-color, rgba (0, 0, 0, 0.0)
It looks the way it should now
I don’t know if it would affect anything else though, but I guess it wouldn’t?
Hi @RomRider,
Here is the JSON for 40% (hope I understood you correctly, I took it from States page in Hassio):
{
"min_mireds": 153,
"max_mireds": 370,
"brightness": 102,
"color_temp": 248,
"friendly_name": "Bedroom Ceiling",
"supported_features": 43,
"icon": "mdi:ceiling-light"
}
Here is the one when it is 5%, just in case:
{
"brightness": 13,
"friendly_name": "Bedroom Ceiling",
"supported_features": 41,
"icon": "mdi:ceiling-light"
}
First of all, a big THANK YOU to the people who created this card and keep approving it. I also highly appreciate the people who create amazing views with it and share their yaml code. That being said, I do experience a problem with it, as a beginner with HA I am probably missing the obvious.
I like the examples provided in this thread displaying the last time motion was detected. So I literally copied one of those, posted by @jarrah, and sadly enough, it did not display the last_changed time in Chrome. Reading the documents, I found out the show_last_changed replaces the label, so to test I created an extremely simple button with just a regular label. This also did not work. I spend quite some time re-reading the documentation, clearing caches, etc. But to no reveal, no labels displayed.
As a kind of last resort I tried it with Firefox, and well, perfection, the labels are there, both for my own simple button as for the copied motion detectors.
So, does anybody have an idea what am I missing here, anybody else experiencing the same issues, labels not displaying in Chrome, but displaying perfectly in Firefox. For completeness, here is my very simple test-button.
- type: custom:button-card color_type: card entity: light.stairlight icon: mdi:lightbulb name: Name label: Label show_name: false show_state: true show_label: true
Works well, apart from the label which is only shown in Firefox, not in Chrome
Thanks Not only are you setting a brightness but also a light temperature. This card also reacts to the light temperature which is something the default HA components do not do (only brightness and color). The result you are obtaining is expected (40% brightness of a light blue-ish color)
Are you sure that Chrome is not using an old cached version of the card? Please clear your cache, close your browser and try again.
Thanks a lot, extremely quick reply! I thought I was sure, as I reloaded using CTRL-F5 (reload the page, ignoring cached content), I also tried using a new incognito window, but after your reply I went a bit deeper and found I needed the option to clear the browsing data and wipe out the cached images and files from there. Now it also works nicely in chrome. Have a nice Sunday!
Thanks for quick answer. That is actually pretty cool!
Anyway to configure it, in case I would like the button to react only to brightness (not sure I do, but just in case)?
It’s not possible to configure it, but I can think about something, please open a feature-request on github
I’m liking the spin animation on icons in some cases, but looking to make something a bit more subtle for other icons (more like a sway). Has anyone played around with adding animations?
I suspect defining ‘- webkit-animation:’ under style would work, unfortunately defining the animation keyframes there also doesn’t work, and I don’t know enough to work out how to get around that.
Use card-modder to inject this CSS using the extra_styles
property:
@keyframes mysway {
0%, 100%{ transform: rotate(-8deg);}
50%{ transform: rotate(6deg); }
}
Then on the button-card:
styles:
icon:
- animation: mysway 16s infinite
Play with the numbers to suit your needs
Ah, I know what happened now - the input_boolean needs to be ON when you refresh the browser, otherwise it doesn’t render the buttons… @iantrich do you know if there’s a better way of doing this instead of using input_boolean?
@dmatik what does those icons look like when off? What version of the card are you using? I have auto color working for shadows and icon color w/ no problem on v 1.8.0.
Add the padding in custom_button_motion and you’ll get it to work.
custom_button_motion: &custom_button_motion
type: "custom:button-card"
color_type: card
show_name: true
show_icon: true
show_last_changed: true
size: 25px
styles:
label:
- font-size: 10px
card:
- border-radius: 10px
- padding: 10px 10px 0px 0px
name:
- font-size: 15px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content min-content
- width: min-content
- grid-gap: 0px 2px
state:
- value: "on"
icon: mdi:run-fast
<<: *custom_button_state_red
- value: "off"
icon: mdi:run
<<: *custom_button_state_green
Brilliant! Thanks!
Works a treat, just wish I could define it globally as things are getting a bit crazy with different layers of custom cards now as I’m also using template-config in some places
I am interested too in animated icons, can I find this in the docs how to do that? Or does it only work with gifs?