Hello guys, have someone created a shutter or cover card, to use it with rounded?
Hey, I will update my github repo with some new cards, stylings and some extra features soon. A documentation will be included.
3 Likes
I made this one using Mushroom card.
square: false
type: grid
cards:
- type: custom:mushroom-cover-card
entity: cover.livingroom
show_position_control: true
show_buttons_control: true
card_mod:
style: |
ha-card {
{% if states['cover.livingroom'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.livingroom'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.livingroom'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.livingroom'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.kitchen
show_position_control: true
show_buttons_control: true
card_mod:
style: |
ha-card {
{% if states['cover.kitchen'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
columns: 2
4 Likes
Climate Card
square: false
columns: 1
type: grid
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.bedroom_ac
name: ×××Ø ×©×× ×
hvac_modes:
- heat
- cool
- heat_cool
- 'off'
layout: horizontal
- type: custom:mushroom-climate-card
entity: climate.bedroom_ac
primary_info: none
secondary_info: none
show_temperature_control: true
icon_type: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: script.br_fan_speed
icon: |2-
{% if states.climate.bedroom_ac.attributes.fan_mode == "high" %}
mdi:fan-speed-3
{% elif states.climate.bedroom_ac.attributes.fan_mode == "medium" %}
mdi:fan-speed-2
{% elif states.climate.bedroom_ac.attributes.fan_mode == "low" %}
mdi:fan-speed-1
{% elif states.climate.bedroom_ac.attributes.fan_mode == "auto" %}
mdi:fan-plus
{% endif %}
icon_color: >-
{% if states.climate.bedroom_ac.attributes.fan_mode == "high" %}
blue
{% elif states.climate.bedroom_ac.attributes.fan_mode == "medium"
%}
blue
{% elif states.climate.bedroom_ac.attributes.fan_mode == "low" %}
blue
{% elif states.climate.bedroom_ac.attributes.fan_mode == "auto" %}
blue
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0);
--chip-height: 42px;
--chip-border-radius: 18px;
}
card_mod:
style: |
ha-card {
{% if states['climate.bedroom_ac'].state == 'cool' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.bedroom_ac'].state == 'heat' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.bedroom_ac'].state == 'heat_cool' %}
background-color: var(--green);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.bedroom_ac'].state == 'off' %}
background-color: var(--contrast2);
{% endif %}
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.livingroom
name: ×”×××
hvac_modes:
- heat
- cool
- 'off'
layout: horizontal
- type: custom:mushroom-climate-card
entity: climate.livingroom
primary_info: none
secondary_info: none
show_temperature_control: true
icon_type: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: script.lr_fan_speed
icon: |2-
{% if states.climate.livingroom.attributes.fan_mode == "high" %}
mdi:fan-speed-3
{% elif states.climate.livingroom.attributes.fan_mode == "mid" %}
mdi:fan-speed-2
{% elif states.climate.livingroom.attributes.fan_mode == "low" %}
mdi:fan-speed-1
{% endif %}
icon_color: |-
{% if states.climate.livingroom.attributes.fan_mode == "high" %}
blue
{% elif states.climate.livingroom.attributes.fan_mode == "mid" %}
blue
{% elif states.climate.livingroom.attributes.fan_mode == "low" %}
blue
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0);
--chip-height: 42px;
--chip-border-radius: 18px;
}
card_mod:
style: |
ha-card {
{% if states['climate.livingroom'].state == 'cool' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.livingroom'].state == 'heat' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.livingroom'].state == 'heat_cool' %}
background-color: var(--green);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.livingroom'].state == 'off' %}
background-color: var(--contrast2);
{% endif %}
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.agam
name: Room1
hvac_modes:
- heat
- cool
- heat_cool
- 'off'
layout: horizontal
- type: custom:mushroom-climate-card
entity: climate.agam
primary_info: none
secondary_info: none
show_temperature_control: true
icon_type: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: script.agam_fan_speed
icon: |2-
{% if states.climate.agam.attributes.fan_mode == "high" %}
mdi:fan-speed-3
{% elif states.climate.agam.attributes.fan_mode == "medium" %}
mdi:fan-speed-2
{% elif states.climate.agam.attributes.fan_mode == "low" %}
mdi:fan-speed-1
{% elif states.climate.agam.attributes.fan_mode == "auto" %}
mdi:fan-plus
{% endif %}
icon_color: |-
{% if states.climate.agamc.attributes.fan_mode == "high" %}
blue
{% elif states.climate.agam.attributes.fan_mode == "medium" %}
blue
{% elif states.climate.agam.attributes.fan_mode == "low" %}
blue
{% elif states.climate.agam.attributes.fan_mode == "auto" %}
blue
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0);
--chip-height: 42px;
--chip-border-radius: 18px;
}
card_mod:
style: |
ha-card {
{% if states['climate.agam'].state == 'cool' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.agam'].state == 'heat' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.agam'].state == 'heat_cool' %}
background-color: var(--green);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.agam'].state == 'off' %}
background-color: var(--contrast2);
{% endif %}
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.liad_ac
name: Room 2
hvac_modes:
- heat
- cool
- heat_cool
- 'off'
layout: horizontal
- type: custom:mushroom-climate-card
entity: climate.liad_ac
primary_info: none
secondary_info: none
show_temperature_control: true
icon_type: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: script.liad_fan_speed
icon: |2-
{% if states.climate.liad_ac.attributes.fan_mode == "high" %}
mdi:fan-speed-3
{% elif states.climate.liad_ac.attributes.fan_mode == "medium" %}
mdi:fan-speed-2
{% elif states.climate.liad_ac.attributes.fan_mode == "low" %}
mdi:fan-speed-1
{% elif states.climate.liad_ac.attributes.fan_mode == "auto" %}
mdi:fan-plus
{% endif %}
icon_color: |-
{% if states.climate.liad_acc.attributes.fan_mode == "high" %}
blue
{% elif states.climate.liad_ac.attributes.fan_mode == "medium" %}
blue
{% elif states.climate.liad_ac.attributes.fan_mode == "low" %}
blue
{% elif states.climate.liad_ac.attributes.fan_mode == "auto" %}
blue
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-blue), 0);
--chip-height: 42px;
--chip-border-radius: 18px;
}
card_mod:
style: |
ha-card {
{% if states['climate.liad_ac'].state == 'cool' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.liad_ac'].state == 'heat' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.liad_ac'].state == 'heat_cool' %}
background-color: var(--green);
}
:host {
--primary-text-color: black;
}
{% elif states['climate.liad_ac'].state == 'off' %}
background-color: var(--contrast2);
{% endif %}
}
5 Likes
RaA11 thank youverry much, that helps me great!
1 Like
So, I updated my repo. If there are questions or ideas just tell me.
4 Likes
Now itās much clearer how itās done. And special respect for the wonderful design. Thanks for sharing!
1 Like
When I add this intermediate: true the slider becomes very laggy and slow. It jumps all over the place when slidingā¦ Anyone else noticing this or having tips?
Very nice. Possible to have this also as a tablet version? Would love to have this as a dashboard on my wall 
I think I was in a hurry when I said that everything is clear)
According to your instructions, I tried to add the line button_card_templates: !include_dir_merge_named āui/templatesā to the beginning of the raw configuration from the custom editor. But got error 'YAMLException: unknown tag !button_card_templates: !include_dir_merge_named āui/templatesā
I studied the topic a little and realized that this should be done only in yaml mode. Through the raw editor will not work.
However, to go to yaml, you need to transfer all links to resources.
You may also need to install the UI Minimalist add-on to use your maps.
In general, everything is quite difficult for a beginner)
But you did a good creative job
Yes, the description is for yaml mode. I will add one for ui mode.
UI Minimalist is no need. Maybe its an advantage because it brings all of used custom cards.
3 Likes
My questions are probably more low level, feel free to ignore.
How have you setup up the dashboard in terms of layout style cards (vertical stack, layout card - grid etc.).
1 Like
No problem. Mainly itās all packed in a vertical stack. Pills are usually in a horizontal stack. Centering or right alignment can be done with help of button-card. Itās described in the github documentation.
The main part is a vertical stack wrapped by a mod-card:
- type: 'custom:mod-card'
style: |
ha-card {
background-color: var(--contrast4);
padding: 16px;
margin: 0px;
}
card:
type: vertical-stack
cards:
And then there are just grids for the cards e.g.:
type: grid
columns: 2
square: false
cards:
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: button_light
entity: light.wohnzimmer_deckenlicht
- type: 'custom:button-card'
template: button_light_slider
entity: light.wohnzimmer_ambient_lights
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
background-color: var(--orange-tint) !important;
}
ha-card .graph {
background: transparent !important;
}
line_color: "var(--orange)"
show:
icon: false
name: false
state: true
legend: false
fill: true
labels: false
points: false
graph: line
entities:
- sensor.wohnzimmer_temperatur
You can maximize the button cards like the custom graph card by set the max_height variable (just have a look in the docs ;))
Sometimes there is a swipe card:
- type: custom:swipe-card
parameters:
slidesPerView: 1.3
spaceBetween: 16
initialSlide: 0
cards:
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
name: Essbereich
template:
- button_script
- background_color
entity: script.reiner_reinigung_essbereich
- type: 'custom:button-card'
name: Teppich
template:
- button_script
- background_color
entity: script.reiner_reinigung_teppich
Hope that helps. Just ask if you need more detail. 
7 Likes
Nope, that was it.
I was certain it was vertical and then some other card types to layout the rest, I think it was the mod that threw me.
Now time to experiment. Thanks very much!
1 Like
Wow, love the theme! I have one issue though. The tab bar isnāt working for me. I have the updated rounded.ymal but it still remains as the default bar at the top. Any ideas?
Edit: figured it out. I had the hacs version installed. It was overriding my custom one.
Would you like to share your config?
Youāll find everything in the github repo
Hello,
love the design of this dashboard and I am trying to set it up -moving from minimalist to this.
Never really looked into sensors aside temp ones so far so I am struggling quite a bit with the sensor template for the TV card:
I have an AppleTV mediaplayer.apple_tv connected to a Sony TV media_player.sony_xr via HDMI 2, as well as a PS5 connected via HDMI 4
How do I get the sensor to show that the Apple TV is on and correctly display which app is running (Netflix, Apple TV+, Prime Video, HBO Max, Disney+) as well as showing that the TV is connected to HDMI 4 in case the PS5 is on?
And how do I prevent the displayed status to be āunknownā?
thank you
Does anyone been able to fix this issue?
1 Like