That did the trick! Do you have a way to customize the colors? Trying to match the original colours of the person card - orange when home - grey when away/work.
But whatever I change, nothing happens. Not so used to the declutter card yet 
Hi @LE0N ,
could you (or anybody else) share your code for the template sensor for the television card with me, to display the correct source from the media_player source list? Thanks a lot.
Try this - I don’t have a suitable bin calendar to test but the rest should work.
type: custom:button-card
template: title_card
entity: sensor.greeting_time
show_icon: false
show_label: true
name: >
[[[
const emojis = ["!", ".", ". 😉", "! 👍", ". 🤩"];
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
return (entity.state) + ', ' + hass.user.name + randomEmoji
]]]
label: >
[[[
const weather = states['weather.buienrader'].state;
const outdoorTemperature = states['sensor.outdoor_temperature'].state;
const evBatteryLevel = states['sensor.ev6_ev_battery_level'].state;
const evRange = states['sensor.ev6_ev_range'].state;
const binsMessage = states['calendar.bins'].attributes.message;
const binsStartTime = states['calendar.bins'].attributes.start_time;
const weatherString = `☁🌡 The weather is ${weather} and it's ${outdoorTemperature}°C outside.`;
let evStatusString = `<br> 🚗`;
if (evBatteryLevel === 'unavailable') {
`<br> 🚗`
} else if (parseFloat(evBatteryLevel) > 50) {
evStatusString += ` EV6 battery is almost empty, battery level is ${evBatteryLevel}% (${evRange} KM range)`;
} else {
`<br> 🚗`;
}
const binsDateString = `<br>♻️ ${binsMessage} on ${new
Date(binsStartTime).toLocaleDateString('en-US', {
day: 'numeric',
month: 'short'
})}`;
return weatherString + evStatusString + binsDateString
]]]
1 Like
Heya,
This is a really simple change. Under the state section and style, just add “background” and then the colour you want. So for example;
- value: home
styles:
card:
- background: '#CEF595'
entity_picture:
- border: 2px solid var(--severity-5)
Hope this helps 
Very much! Thanks a lot 
Focused to much on the “background_color”
1 Like
Hello,
I like very much this theme 
. I’ll try to implement it
1 Like
Thank you very much! This has definitely helped me with my “2 card layout”. This will help me a lot with the dashboard in the mobile version.
In the meantime I have also realized that it is easier for me to work with rectangular button-cards only. For one thing, it looks better and more uniform, and for another, it makes the layout easier for me.
Unfortunately, I still can’t manage to write the layout in such a way that the height adapts to the tablet… But since I don’t want to annoy you with my constant questions, I’ve created a thread here in the hope that the community will know what to do. If you still don’t mind, I would of course, as always, be very happy about your help =)
1 Like
Hey @jeells102, could you please share your code from one of your plug cards? I’d really appreciate it!
Hey!
Yeah you’ve got it!
type: custom:button-card
entity: switch.media_centre
name: Media Centre
show_icon: false
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background-color: |
[[[
return states['switch.media_centre'].state === 'on' ? '#CEF595' : '';
]]]
grid:
- grid-template-areas: '"icon_cells" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 15px
- color: |
[[[
return states['switch.media_centre'].state === 'on' ? 'black' : 'grey';
]]]
custom_fields:
icon_cells: |
[[[
var state = states['switch.media_centre'].state;
if(state == "on")
return `<ha-icon
icon="mdi:television-classic"
style="width: 25px; height: 25px; color: black;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:television-classic-off"
style="width: 25px; height: 25px; color: grey;">
</ha-icon>
`;
]]]
button:
card:
type: custom:button-card
entity: switch.media_centre
show_icon: false
show_name: false
styles:
card:
- border-style: none
- margin-top: '-4%'
- margin-bottom: '-5%'
- background-color: transparent
grid:
- grid-template-areas: '"state icon_cells"'
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content
custom_fields:
state:
- justify-self: start
- align-self: middle
- font-size: 12px
- filter: opacity(50%)
- margin-left: 15px
- margin-top: 1.6px
icon_cells:
- justify-self: end
- align-self: start
- margin-right: 15px
- width: 45px
custom_fields:
icon_cells: |
[[[
var state = states['switch.media_centre'].state;
if(state == "on")
return `<ha-icon
icon="mdi:toggle-switch"
style="color: #000000;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:toggle-switch-off"
style="color: grey;">
</ha-icon>
`;
]]]
state: |
[[[
var state = states['switch.media_centre'].state
var power = states['sensor.media_centre_power'].state
if(state == "on")
return `<span style="color: black;">${power}W</span>
`;
else
return `<span style="color: grey;">Off</span>
`;
]]]
1 Like
the plugs cards look great. Can you maybe share the code? that would be really nice
Hey,
I posted my plug card in this post - 🟣 Rounded - Dashboard guide - #382 by jeells102
Take a look there
1 Like
Unbelievable, I’ve probably gone through this whole thread 5 times and must have missed it. It was so close that I almost hit my head on it thank you very much
1 Like
Awesome theme and instructions. Love this material design. Combined with bubble card, this is incredible. Created a custom HVAC Button-Card for my Aquara E1 as well.
How does it look like?
Hello guys, I just started with the cool theme today and I’m thrilled.
But I have a small problem that I can’t get any further at the moment.
I can no longer click the edit button because it disappears under the “bottom bar”.
And is it possible to use Bubble Card without this offset to the right (I hope you can see it in this bright picture). It’s no longer in the middle.
Thanks for your help
How do I have to adapt the code so that I have the edit button higher up?
I dont know how to fix that:
I think i’ve tried everything in this thread to minimize the margin between cards but i can’t seem to fix it.Whats the easiest way of setting the top and bottom margin for all cards?
In the generated html i see this for example:
<hui-horizontal-stack-card style="margin-bottom: 40px;margin-top: 5px;">
I’ve done nothing fancy. Just copied the examples from Leon…
1 Like
Ok, found it: masonry-view-card-margin: 10px 20px
I’ll show you another dashboard that I created by collecting ideas from the community and revisiting them a bit, thanks to all the people who shared their creations!
9 Likes
Hi @Arroma. That looks great! Simple but professional
Is there any way you could share the code for your dashboard/theme with us. GitHub or something similar?
It would be great to be able to try that out for myself
1 Like
Proud to see that you are interested!
I added the link to github
1 Like