I bought some of your codes, but I had already reproduced them thanks to your videos, it was only to make a donation to people like you who deserve it :) Thanks for sharing! I love the style of your cards and dashboards. --- J'ai acheté certains de vos codes, mais je les avais déja reproduit grace à vos vidéos, c'etait uniquement pour faire un don aux personne comme vous qui le mérite :) Merci pour le partage ! J'adore le style de vos cartes et dashboards.
Thanks for the update. Following your guides since the very beginning. Personally i would be very interested in some nice looking electricty / price / solar card or section like in your dashboard. Especially into coding the templates to state and visualize the right costs for different devices while using dynamic electricity prices like from tibber. Keep up the good work.
Cheers! Thanks for the suggestion. Definitely something I could do. I'm mostly using www.home-assistant.io/dashboards/energy/ for the graphs, not very customizable, but I like that you can flick through the dates. Something similar is very hard with Apex for example.
As far as I know, you will need to add the colors to your theme file so that you can use variables in the dashboard. Kinda like this: Theme file: modes: light: gradient: linear-gradient(145deg, rgba(251,192,217,1) 0%, rgba(255,212,193,1) 100%) background: "#f5f7fa" dark: gradient: linear-gradient(145deg, rgba(255,212,193,1) 0%, rgba(251,192,217,1) 100%) background: "#28282A" In the dashboard you can use: styles: card: - background: var(--background) For example
Great card set up. I got both of your room cards today, I'm looking to have it set up to when lights are on in a room, the cards background changes to a gradient color, similar to what you did in another video. How do I do that?
Cheers! Can be done with something like this: entity: light.masterlight state: - value: "on" styles: card: - background: '#FDE7BB' But this only works if just one light (light.masterlight) will control the background color. If you have more lights I dont really know how you would combine them to one controlling light.
Another great video thank you. Is there away that if the device button triggers a timed automation like turning on a fan for 2 hours to shows that the automation trigger is active for that time? For example turning the background colour from red to blue.
I would set up an input boolean helper. Then in the automation turn it on. Then turn it off again at the end of the automation. You could then use this boolean in the CSS code to change the background color while it is on. Same as I do with on/off.
Wonderful tutorial as always. I'm trying to create a garage card with everything you just show how but if the garage door is open I want to show how long is open instead of temperature/humidity. Is possible?
awesome video. thank you very much. I have one question. I'm left handed and I want the toggles to be left, the name and the sensor right. How do i to that? The Icon moved to the right, but the in your example Living room can the temprature sensor wont move. :)
Hi, tricky question. You will need to invert the grid-template-areas code, as well as the grid-template-columns. So it will look something like this: grid: - grid-template-areas: '"btn1 btn2 n" "btn1 btn2 temp " "btn1 btn2 hum" "btn1 btn2 i"' - grid-template-columns: min-content min-content 1fr Then you need to set whatever properties has justify-self: start to end instead (temp, hum, name). img_cell should have right and bottom: -20px instead. Then you can remove the margin. Let me know if that is closer to what you need. (havent tested)
Hey, your card looks amazing. I have only one issue with it. It won't change the color when I switch to dark mode. I'm using the theme of minimalist as default but changing to dark doesn't overwrite my color codes. Any idea how to do that?
Hello, I bought your code and I love it. I would like to have the first and second rows closer together, reduce the distance between the different devices and align both very close to the edge on the right. Can you help me with that? If I use 2 room cards in a horizontal stack, the distances are unfortunately far too large
Would you send me an email about this? Maybe with a quick sketch of what you're after? You should have my email from the receipt. It would be easier to help there. And just so you know, its Easter holiday for me now, and I dont have access to my computer. Might be a little harder than usual to write spesific code until Im home.
I'm asking for advice on how to enter the code so that the icons on the card animate. for example, the fan icon would spin when turned on. I keep trying to make the icons move but I can't.
Hi, I'm not really an expert on Mushroom cards. But I find this thread very useful community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
This could be the subject of another video on how to make single icons move according to the state of the entity and your card would be perfect and the best in the world.
Hello there ! I really love your videos and your code. I 've got a weird problem with Room Card. I built my own cards, but everytime I try to include bubble card, the Room cards disappear, everything else is OK. I have to restart HA a lot of times, in order to re-appear on my dashboard again. I try a seperate Dashboard, only with Room Card, without Bubble card and its working OK.
When i edit a button card i dont have this big screen like that - edit yaml and the ui on the right. Where can i adjust it that i will have full screen like that?
You could just add a navigate tap action to the main card. Like this: type: custom:button-card tap_action: action: navigate navigation_path: /dashboard/page2 You need to edit navigation_path of course
@@niravpatel2468 I would just add a normal button somewhere with a navigation link to the frontpage. In the most basic form something like this would work: type: custom:button-card icon: mdi:arrow-left tap_action: action: navigate navigation_path: /page1
I am using those cards a lot now! thank you for sharing this video I have some issues on the initial load as the cards won't show up. only after a refresh or switchting back and forth between different dashboards they show up again. do you have any idea what issue this could be?
Yeah, you could use something like this: [[[ return Math.round((states['sensor.temperature'].state) * 100)/100 + '°']]] Change 100 into 10 or 1000 depending on how many decimals you want.
Is there an option to change icon in the action like this? --chip-icon: {{ 'mdi:door-open' if is_state('binary_sensor.doors_kontor_1_window_door_is_open_2', 'on') else 'mdi:door-closed'}};
@@koupourtiadis yes I did... --card-mod-icon: {{ 'mdi:door-open' if is_state('binary_sensor.doors_kontor_1_window_door_is_open_2', 'on') else 'mdi:door-closed'}}; Be sure to use the correct icons. Go the the website he talks about and find them there
This is great stuff, thank you. After recreating your kickass roomcard. When i add a template chip it appears on the top and not under the other 2. I dont understand what i am doing wrong, maybe you have an idea what i am doing wrong ?
@@My_Smart_Home thank you for your reaction. I will clarify, I watched the update video several times. And I got the base code down, so I thought. When I want to add the extra chips so that you get 4 in a row or 3 beneath each other. I get them next to the 2 that are in the top. They are horizontal instead of vertically added. And I don’t understand were I went wrong.
Your videos are great! I'm learning so much from following along and playing around to make things just how I like them. One question, I'd love to be able to change the background color of a button automatically to reflect the color of the bulb it is controlling. Is that possible?
Thats a great idea! Most my bulbs are just brightness and temperature. But if you have rgb lights you could do something like this: styles: card: - background: | [[[ return 'rgb(' + states['light.bulb'].attributes.rgb_color + ')' ]]] I guess its also possible to convert light temperature (kelvin) into RGB, but that would be a bit more work.
@@My_Smart_Home Great thanks, I couldn't get it to work on the buttons, but was able to apply it to the background of the icon, which looks even better I think.
Thanks so much, I learn so much from you! I noticed in some of your screnshots on Gumroad you have added the Temperature and Humidity icons to the right of these 2 custom fields (temp/hum). I tried playing around adding an icon and Googling a bit but cant seem to get the format correct. Is that something you could also help share? Thank you!
Hi, something like this inside the javascript code should work: custom_fields: temp: | [[[ return '' +states['sensor.temperatur_bad_oppe_temperature'].state + '°C' ]]] Play around with the size and color.
Hey. Bought this code and modded it to work with my room. Trying to get the circle around the icon to change colour depening on whether the lights are on or not. I'm trying: img_cell: - justify-content: start - position: absolute - width: 120px - height: 120px - left: 0 - bottom: 0 - margin: 0 0 -20px -20px - background: "{{ 'yellow' if is_state('light.living_room', 'on') else 'grey' }}" - border-radius: 500px but it just makes the circle dissapear. Any idea how to fix it?
@@yasp0127 It´s not working to me the animation, any example?. I bought the code and everything is working but i would be wonderfull to have some animated icons
I purchased the card code as it was exactly what I was looking for in a room card. Is there a way to add ifelse to the --chip-background: {{ 'rgba(138, 205, 215, 1)' if is_state('switch.bedroom', 'on') else 'rgba(138, 205, 215, 0.3)' }};? The climate entity im using returns 3 states (off, cool, heat) and I want to have a different color for each. I have the icon changing and the color of the icon changing but cant seem to get the background to change on more than 2 states. Great cards, thanks.
I think you could maybe use something like this: I'm not a jinja expert so there might be a simpler way, but this should work. --chip-background: {% if is_state('climate.livingroom', 'off')%}rgb(173, 136, 198){% elif is_state('climate.livingroom', 'cool') %}rgb(109, 197, 209){% elif is_state('climate.livingroom', 'heat') %}rgb(238, 78, 78){% endif %}
@@My_Smart_Home Thank you for the fast reply. Turns out your solution is very similar to what I had devised. When implemented in my modified card it fails. However importing your full template again and adding it works. Not 100% sure of the cause till I get home and have a better look. Finally, dont listen to the people complaining about the $5. All your code is in the videos. You are not pay-walling anything. Your presentation both in the videos and in the yml download are 11/10.
Amazing video and I bought your code. After applying my own entities the style is not applied (e.g. background color). The other stuff is working fine. What could be the issue? - type: template icon: mdi:lamp tap_action: action: toggle entity: light.overloop_light_dimmer card_mod: style: | ha-card { --chip-background: {{ 'green' if is_state('light.overloop_light_dimmer', 'on') else 'red' }}; padding: 5px!important; border-radius: 100px!important; }
@@My_Smart_Home of course, thank you. I guess TH-cam got rid of my comment because it contained url so please check the pastebin url ending with /hRqciV0F
Also, I should add. I really think that its best to follow the tutorial and write the code yourself, you'll learn a lot more. The code is just there if you dont want to/have time.
I bought some of your codes, but I had already reproduced them thanks to your videos, it was only to make a donation to people like you who deserve it :)
Thanks for sharing! I love the style of your cards and dashboards.
---
J'ai acheté certains de vos codes, mais je les avais déja reproduit grace à vos vidéos, c'etait uniquement pour faire un don aux personne comme vous qui le mérite :)
Merci pour le partage ! J'adore le style de vos cartes et dashboards.
Thank you very much 😊
Thanks for the update. Following your guides since the very beginning. Personally i would be very interested in some nice looking electricty / price / solar card or section like in your dashboard.
Especially into coding the templates to state and visualize the right costs for different devices while using dynamic electricity prices like from tibber.
Keep up the good work.
Cheers! Thanks for the suggestion. Definitely something I could do. I'm mostly using www.home-assistant.io/dashboards/energy/ for the graphs, not very customizable, but I like that you can flick through the dates. Something similar is very hard with Apex for example.
Great videos as always, one of my favourite HA creators.
I’ll check out the updated code :)
I would love to see a cleverly designed dashboard for thermostats.
Thanks for this update!
Noted! I'll add it to the list.
Personally don't have that many thermostats (yet).
Thanks for this wonderful tutorial.
I was wondering how to set up the colours, in order to work with light and dark theme?
As far as I know, you will need to add the colors to your theme file so that you can use variables in the dashboard. Kinda like this:
Theme file:
modes:
light:
gradient: linear-gradient(145deg, rgba(251,192,217,1) 0%, rgba(255,212,193,1) 100%)
background: "#f5f7fa"
dark:
gradient: linear-gradient(145deg, rgba(255,212,193,1) 0%, rgba(251,192,217,1) 100%)
background: "#28282A"
In the dashboard you can use:
styles:
card:
- background: var(--background)
For example
Would be awesome if you'd do a wider card that included thermostat controls in this style - would literally make this perfect
I would love to incorporate a mushroom-like brightness slider on my room cards
I think, with some fiddling. You could add any mushroom card to the bubble card the same way as we've done with the chip cards.
Great card set up. I got both of your room cards today, I'm looking to have it set up to when lights are on in a room, the cards background changes to a gradient color, similar to what you did in another video. How do I do that?
Cheers!
Can be done with something like this:
entity: light.masterlight
state:
- value: "on"
styles:
card:
- background: '#FDE7BB'
But this only works if just one light (light.masterlight) will control the background color. If you have more lights I dont really know how you would combine them to one controlling light.
There is a way to show the icon for TEMP and HUMIDITY before the state?
It would be great to have either some movement or even change of colour when you press a light so you know it worked. Thanks for the videos.
It does this already doesnt it? You can choose the on and off background color of the chips. I explain this in more detail in the first video.
Amazing tutorial, thanks for sharing.
Thanks for watching!
Another great video thank you. Is there away that if the device button triggers a timed automation like turning on a fan for 2 hours to shows that the automation trigger is active for that time? For example turning the background colour from red to blue.
I would set up an input boolean helper. Then in the automation turn it on. Then turn it off again at the end of the automation. You could then use this boolean in the CSS code to change the background color while it is on. Same as I do with on/off.
Wonderful tutorial as always. I'm trying to create a garage card with everything you just show how but if the garage door is open I want to show how long is open instead of temperature/humidity. Is possible?
awesome video. thank you very much. I have one question. I'm left handed and I want the toggles to be left, the name and the sensor right. How do i to that? The Icon moved to the right, but the in your example Living room can the temprature sensor wont move.
:)
Hi, tricky question. You will need to invert the grid-template-areas code, as well as the grid-template-columns. So it will look something like this:
grid:
- grid-template-areas: '"btn1 btn2 n" "btn1 btn2 temp " "btn1 btn2 hum" "btn1 btn2 i"'
- grid-template-columns: min-content min-content 1fr
Then you need to set whatever properties has justify-self: start to end instead (temp, hum, name).
img_cell should have right and bottom: -20px instead. Then you can remove the margin.
Let me know if that is closer to what you need. (havent tested)
@@My_Smart_Home thank you very much. I’ll try it next ☺️
Hey, your card looks amazing. I have only one issue with it. It won't change the color when I switch to dark mode. I'm using the theme of minimalist as default but changing to dark doesn't overwrite my color codes. Any idea how to do that?
Hi. I guess you have to change the color codes to the color variables in your theme. Im not quite sure how that theme is set up
Hello, I bought your code and I love it. I would like to have the first and second rows closer together, reduce the distance between the different devices and align both very close to the edge on the right. Can you help me with that?
If I use 2 room cards in a horizontal stack, the distances are unfortunately far too large
Would you send me an email about this? Maybe with a quick sketch of what you're after? You should have my email from the receipt. It would be easier to help there. And just so you know, its Easter holiday for me now, and I dont have access to my computer. Might be a little harder than usual to write spesific code until Im home.
I'm asking for advice on how to enter the code so that the icons on the card animate.
for example, the fan icon would spin when turned on.
I keep trying to make the icons move but I can't.
Hi, I'm not really an expert on Mushroom cards. But I find this thread very useful
community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
This could be the subject of another video on how to make single icons move
according to the state of the entity and your card would be perfect and the best in the world.
Hello there !
I really love your videos and your code. I 've got a weird problem with Room Card. I built my own cards, but everytime I try to include bubble card, the Room cards disappear, everything else is OK. I have to restart HA a lot of times, in order to re-appear on my dashboard again. I try a seperate Dashboard, only with Room Card, without Bubble card and its working OK.
When i edit a button card i dont have this big screen like that - edit yaml and the ui on the right. Where can i adjust it that i will have full screen like that?
How can you add a tab action to navigate different pages using this as a button?
You could just add a navigate tap action to the main card.
Like this:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /dashboard/page2
You need to edit navigation_path of course
@@My_Smart_Home Thanks. How do you add a back button from the navigated page back to home?
@@niravpatel2468 I would just add a normal button somewhere with a navigation link to the frontpage. In the most basic form something like this would work:
type: custom:button-card
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /page1
I am using those cards a lot now! thank you for sharing this video
I have some issues on the initial load as the cards won't show up. only after a refresh or switchting back and forth between different dashboards they show up again. do you have any idea what issue this could be?
Hi, haven't had that issue before. Do you still have that issue if you remove any buttons you might have added?
Thanks for the vid, amazing as usual. I have a problem with temp and hum, the numbers show a lot of decimals. how can i show only two. thanks
Yeah, you could use something like this:
[[[ return Math.round((states['sensor.temperature'].state) * 100)/100 + '°']]]
Change 100 into 10 or 1000 depending on how many decimals you want.
@@My_Smart_Home Awesome! working perfectly. Thanks for your help and your work with the channel.
@@My_Smart_Home
Is there an option to change icon in the action like this?
--chip-icon: {{ 'mdi:door-open' if is_state('binary_sensor.doors_kontor_1_window_door_is_open_2', 'on') else 'mdi:door-closed'}};
I am also trying the same thing but didn't make it. Did you figure out?
@@koupourtiadis yes I did...
--card-mod-icon: {{ 'mdi:door-open' if is_state('binary_sensor.doors_kontor_1_window_door_is_open_2', 'on') else 'mdi:door-closed'}};
Be sure to use the correct icons. Go the the website he talks about and find them there
This is great stuff, thank you. After recreating your kickass roomcard. When i add a template chip it appears on the top and not under the other 2. I dont understand what i am doing wrong, maybe you have an idea what i am doing wrong ?
Not sure I understand exactly. Are you trying to add a 2nd row of chips, or a 2nd chip (button)?
@@My_Smart_Home thank you for your reaction. I will clarify, I watched the update video several times. And I got the base code down, so I thought. When I want to add the extra chips so that you get 4 in a row or 3 beneath each other. I get them next to the 2 that are in the top. They are horizontal instead of vertically added. And I don’t understand were I went wrong.
Your videos are great! I'm learning so much from following along and playing around to make things just how I like them. One question, I'd love to be able to change the background color of a button automatically to reflect the color of the bulb it is controlling. Is that possible?
Thats a great idea! Most my bulbs are just brightness and temperature. But if you have rgb lights you could do something like this:
styles:
card:
- background: |
[[[ return 'rgb(' + states['light.bulb'].attributes.rgb_color + ')' ]]]
I guess its also possible to convert light temperature (kelvin) into RGB, but that would be a bit more work.
@@My_Smart_Home Great thanks, I couldn't get it to work on the buttons, but was able to apply it to the background of the icon, which looks even better I think.
Thanks so much, I learn so much from you! I noticed in some of your screnshots on Gumroad you have added the Temperature and Humidity icons to the right of these 2 custom fields (temp/hum). I tried playing around adding an icon and Googling a bit but cant seem to get the format correct. Is that something you could also help share? Thank you!
Hi, something like this inside the javascript code should work:
custom_fields:
temp: |
[[[ return '' +states['sensor.temperatur_bad_oppe_temperature'].state + '°C' ]]]
Play around with the size and color.
@@My_Smart_Home Awesome, this has worked brilliantly, thank you!!
Great video, i downloaded the code. Is it possible to change the background of the card?
Yes. Under styles:
Card:
- background: #000000
Find hex code on colorhunt.co for example
Thanks for your swift answer but I am looking for a way to display a picture as background. Not to change the color.@@My_Smart_Home
Hey. Bought this code and modded it to work with my room. Trying to get the circle around the icon to change colour depening on whether the lights are on or not. I'm trying:
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: "{{ 'yellow' if is_state('light.living_room', 'on') else 'grey' }}"
- border-radius: 500px
but it just makes the circle dissapear. Any idea how to fix it?
Is it possible to make icons spin when on (like for a fan)
Thats possible with card mod.
Something like:
card_mod:
style:
ha-state-icon {
animation: rotating 2s linear infinite;
}
@keyframes rotating {
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
@@yasp0127 It´s not working to me the animation, any example?. I bought the code and everything is working but i would be wonderfull to have some animated icons
I purchased the card code as it was exactly what I was looking for in a room card.
Is there a way to add ifelse to the --chip-background: {{ 'rgba(138, 205, 215, 1)' if is_state('switch.bedroom', 'on') else 'rgba(138, 205, 215, 0.3)' }};?
The climate entity im using returns 3 states (off, cool, heat) and I want to have a different color for each. I have the icon changing and the color of the icon changing but cant seem to get the background to change on more than 2 states.
Great cards, thanks.
I think you could maybe use something like this:
I'm not a jinja expert so there might be a simpler way, but this should work.
--chip-background: {% if is_state('climate.livingroom', 'off')%}rgb(173, 136, 198){% elif is_state('climate.livingroom', 'cool') %}rgb(109, 197, 209){% elif is_state('climate.livingroom', 'heat') %}rgb(238, 78, 78){% endif %}
@@My_Smart_Home Thank you for the fast reply. Turns out your solution is very similar to what I had devised. When implemented in my modified card it fails. However importing your full template again and adding it works. Not 100% sure of the cause till I get home and have a better look.
Finally, dont listen to the people complaining about the $5. All your code is in the videos. You are not pay-walling anything. Your presentation both in the videos and in the yml download are 11/10.
Would it be possible to hire you to develop one of these for me?
Send me an email. You'll find it in the channel description.
Amazing video and I bought your code.
After applying my own entities the style is not applied (e.g. background color). The other stuff is working fine.
What could be the issue?
- type: template
icon: mdi:lamp
tap_action:
action: toggle
entity: light.overloop_light_dimmer
card_mod:
style: |
ha-card {
--chip-background: {{ 'green' if is_state('light.overloop_light_dimmer', 'on') else 'red' }};
padding: 5px!important;
border-radius: 100px!important;
}
Nevermind, card mod was not installed properly 😅
does anyone have issue with the ha-card style? it just doesn't work, nothing happens, the icon stays default black with the white background
Did you use the custom Button Card from HACS? The built in one is also called Button Card but it wont work
@@My_Smart_Home yes, the card is "type: custom:button-card" which is the HACS one
@@stickerey Strange. Do you mind posting a code example from what you've tried to make?
@@My_Smart_Home of course, thank you. I guess TH-cam got rid of my comment because it contained url so please check the pastebin url ending with /hRqciV0F
Use :host {
instead of ha-card {
Btw, @My_Smart_Home…you are so amazing man!! Love your works
Amazing
I would so buy all your codes! But 5 dollars each is too much... 😢
I understand, and maybe you're right. It is expensive and time consuming to make these videos too. TH-cam pay me $0. I could just not make them.
Also, I should add. I really think that its best to follow the tutorial and write the code yourself, you'll learn a lot more. The code is just there if you dont want to/have time.