Your welcome 
Hello, super cool card! Can I ask for the code? I canāt even adjust the transparency. Or change the font design. 
Here is my card, but I didnāt work on it any further afterwards:
type: custom:room-card
title: Wohnzimmer
show_icon: true
state_color: false
entity: light.wohnzimmer_licht
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id:
- light.wohnzimmer_strips
card_mod:
style: |
.entities-row{
margin-left: auto;
padding: 0px 16px 12px 16px !important;
height: 28px;
}
.entities-row:nth-child(2){
margin-top: -48px;
}
.entities-row .entity{
width: 30px;
height: 30px;
margin-left: 10px !important;
margin-right: 0px !important;
--mdc-icon-size: 60%;
}
.entities-row .entity .icon-small{
width: auto;
height: auto;
margin-top: -5px;
margin-left: 1px;
}
.entities-info-row{
padding: 0 !important;
margin: -22px -3px;
}
.entities-info-row .entity{
!border: 1px solid red;
padding: 0 !important;
--mdc-icon-size: 80% !important;
margin-left: 8px !important;
margin-right: 0px !important;
}
.entities-info-row .entity .icon-small{
width: 20px;
height: 44px;
!border: 1px solid red;
}
.main-icon{
height: inherit !important;
width: 45px !important;
margin-top: 0px !important;
}
.main-state{
margin-top: 1px;
max-width: none;
max-height: none;
border-radius: 50%;
height: 45px;
}
.title{
font-weight: 500;
!border: 1px solid red;
margin-top: 20px;
}
card_styles:
"--ha-card-header-font-size": 17px
"--mdc-icon-size": 65%
styles:
template: >
if (entity.state == 'on' & entity.attributes.rgb_color!=null) return
'background-color: rgba(' + entity.attributes.rgb_color + ',0.15) '; if
(entity.state == 'on' & entity.attributes.rgb_color==null) return
'background-color: rgba(var(--rgb-accent-color),0.15); '; else return
'background-color: rgba(var(--rgb-disabled-color),0.2);'
icon:
template:
icon: return 'mdi:sofa'
styles: >
if (entity.state == 'on' & entity.attributes.rgb_color!=null) return
'margin-left: .01em; color: rgba(' + entity.attributes.rgb_color + ',1) ';
if (entity.state == 'on' & entity.attributes.rgb_color==null) return
'margin-left: .01em; color: var(--accent-color) '; else return
'margin-left: .01em; color: var(--disabled-color)';
templates:
- name: info_icon_entity
template:
show_icon: true
state_color: false
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important;'; if (entity.state == "unavailable") return 'color: red
!important;'; else return 'color: var(--disabled-color)
!important;';
- name: info_window_icon_entity
template:
show_icon: true
state_color: false
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important;'; if (entity.state == "unavailable") return 'color: red
!important;'; if (entity.state == "off") return 'color: green
!important;';else return 'color: var(--disabled-color)
!important;';
- name: info_media_icon_entity
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == "playing") return 'background-color: transparent';
if (entity.state != "playing") return 'background-color:
rgba(var(--rgb-disabled-color),.2);';
icon:
template:
icon: >
if (entity.state == "playing") return 'mdi:speaker-play'; else
return 'mdi:speaker-pause';
styles: |
return 'color: var(--disabled-color) !important;';
- name: info_text_entity
template:
show_icon: false
state_color: true
styles:
template: |
if (entity.state == "unavailable") return 'color: red !important;';
else return 'width: auto; font-size: 75%; color: grey;';
- name: light_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == 'on') return 'background-color: rgba(' +
entity.attributes.rgb_color + ',0.15); border-radius: 50%; border: 1px
solid var(--divider-color);'; else return 'background-color:
rgba(var(--rgb-disabled-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color);';
icon:
template:
styles: |
return 'color: var(--disabled-color) !important;';
- name: cover_button
template:
show_icon: true
state_color: false
show_name: false
styles:
template: >
if ((entity.state == "closed") || (entity.attributes.current_position
< 50)) return 'background-color: rgba(var(--rgb-accent-color),.2);
border-radius: 50%; border: 1px solid var(--divider-color);'; else
return 'background-color: rgba(var(--rgb-disabled-color),.2);
border-radius: 50%; border: 1px solid var(--divider-color);';
icon:
template:
icon: >
if (entity.attributes.current_position < 10 ) { if
(entity.entity_id.includes('fenster')) return
'kuf:fts_garage_door_100'; else return 'mdi:window-shutter'}; if
(entity.attributes.current_position < 20 ) return
'kuf:fts_shutter_90'; if (entity.attributes.current_position < 30
) return 'kuf:fts_shutter_80'; if
(entity.attributes.current_position < 40 ) return
'kuf:fts_shutter_70'; if (entity.attributes.current_position < 50
) return 'kuf:fts_shutter_60'; if
(entity.attributes.current_position < 60 ) return
'kuf:fts_shutter_50'; if (entity.attributes.current_position < 70
) return 'kuf:fts_shutter_40'; if
(entity.attributes.current_position < 80 ) return
'kuf:fts_shutter_30'; if (entity.attributes.current_position < 90
) return 'kuf:fts_shutter_20'; else { if
(entity.entity_id.includes('fenster')) return 'kuf:fts_shutter_10';
else return 'mdi:window-shutter-open'};
- name: entity_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == "on") return 'background-color:
rgba(var(--rgb-accent-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color);'; else return 'background-color:
rgba(var(--rgb-disabled-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color);';
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important; width: auto; height: auto;'; else return 'color:
var(--disabled-color) !important; width: auto; height: auto;';
- name: climate_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == 'cooling') return 'background-color:
rgba(--rgb-primary-color,.2) !important; border-radius: 50%; border:
1px solid var(--divider-color);'; else return 'background-color:
rgba(var(--rgb-disabled-color),.2) !important; border-radius: 50%;
border: 1px solid var(--disabled-color);';
icon:
template:
styles: |
return 'color: var(--disabled-color) !important;';
info_entities:
- entity: binary_sensor.eg_wohnzimmer_bewegungsmelder
template: info_icon_entity
- entity: binary_sensor.eg_wohnzimmer_fenster_fensterkontakt
template: info_window_icon_entity
- entity: binary_sensor.eg_wohnzimmer_terrassentur_fensterkontakt
template: info_window_icon_entity
- entity: binary_sensor.eg_wohnzimmer_fenster_beschattung_status
template: info_icon_entity
- entity: media_player.wohnzimmer
template: info_media_icon_entity
- entity: sensor.wohnzimmer_tenmperatur
template: info_text_entity
rows:
- entities:
- entity: light.wohnzimmer_spots
tap_action:
action: toggle
template: light_button
- entity: light.wohnzimmer_strips
tap_action:
action: toggle
template: entity_button
- entity: light.wohnzimmer_aussenlicht_2
tap_action:
action: toggle
template: entity_button
- entities:
- entity: switch.steckdosenleiste_fernseher
tap_action:
action: toggle
template: entity_button
- entity: switch.sonosleiste
tap_action:
action: toggle
template: entity_button
- entity: switch.steckdosenleiste_couch
tap_action:
action: navigate
navigation_path: "#Wohnzimmer-Steckdosen"
template: entity_button
- entity: climate.wohnzimmer_heizung
template: climate_button
- entity: cover.wohnzimmer_schiebetur_rollo
template: cover_button
- entity: cover.eg_wohnzimmer_fenster_rollo
template: cover_button
sooooo many style settings. thank you very much
Hi,
Frist I want to say thank you @marcokreeft87 for keeping this running, Iām enjoying the card a lot and starting to build my dashboard.
I have a question I was hoping someone could help me with. I have the template below, the style works for the text, the style works for the icon type but not the icon color. Is this becuase I canāt change the color of the icon, or have I got the syntax wrong?
type: custom:room-card
rows: null
title: People
templates:
- name: home_visual_change
template:
show_icon: true
state_color: true
show_state: true
styles:
template: >
if (entity.state == 'home') return 'color: green'; else return
'color: orangered';
icon:
template:
icon: >
if (entity.state == 'home') return 'mdi:home-account';
else return 'mdi:home';
styles: >
if (entity.state == 'home') return 'color: green';
else return 'color: orangered';
entities:
- entity: device_tracker.jon_iphone
name: Jon
template: home_visual_change
- entity: device_tracker.emma_iphone13
template: home_visual_change
name: Emma
- entity: device_tracker.william_iphone
template: home_visual_change
name: Limlim
- entity: device_tracker.joe_iphone
template: home_visual_change
name: Dodo
- entity: device_tracker.bob_iphone
template: home_visual_change
name: Bob
Itās ok, I fixed it - the state_color: true was the issue.
J
Hi Again
How would you guys go about showing multiple attributes about the same entity, for example;
I have a list of people and if they are home, then the distance from home below. Obviously they donāt align, what would be you approach whilst keeping this top to bottom layout?
Thanks
J
Could you provide your yaml for this example? A workaround tho some might say itās a sloppy hack would be to use the custom:gap-card to spread out the bottom line (distance).
Sorry for slow reply, I just spotted the notification in my junk!
Here is the YAML, if I let is show an icon, then all is ok.
type: custom:room-card
title: People
templates:
- name: home_visual_change
template:
show_icon: true
state_color: false
show_state: false
styles:
template: >
if (entity.state == 'home') return 'color: green'; else return
'color: orangered';
icon:
template:
styles: >
if (entity.state == 'home') return 'color: green'; else return
'color: orangered';
icon: >
if (entity.state == 'home') return 'mdi:home-account'; else return
'mdi:home';
rows:
- entities:
- entity: device_tracker.jon_iphone
template: home_visual_change
name: Jon
- entity: device_tracker.emma_iphone13
template: home_visual_change
name: Emma
- entity: device_tracker.william_iphone
template: home_visual_change
name: Limlim
- entity: device_tracker.joe_iphone
template: home_visual_change
name: Dodo
- entity: device_tracker.bob_iphone
template: home_visual_change
name: Bob
- entities:
- entity: sensor.jon_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
- entity: sensor.emma_iphone13_home_distance
show_name: false
show_icon: false
show_state: true
- entity: sensor.william_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
- entity: sensor.joe_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
- entity: sensor.bob_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
Try this:
type: custom:room-card
title: People
templates:
- name: home_visual_change
template:
show_icon: true
state_color: false
show_state: false
styles:
template: >
if (entity.state == 'home') return 'color: green'; else return 'color: orangered';
icon:
template:
styles: >
if (entity.state == 'home') return 'color: green'; else return 'color: orangered';
icon: >
if (entity.state == 'home') return 'mdi:home-account'; else return 'mdi:home';
rows:
- entities:
- entity: device_tracker.jon_iphone
template: home_visual_change
name: Jon
style: "width: 20%;"
- entity: device_tracker.emma_iphone13
template: home_visual_change
name: Emma
style: "width: 20%;"
- entity: device_tracker.william_iphone
template: home_visual_change
name: Limlim
style: "width: 20%;"
- entity: device_tracker.joe_iphone
template: home_visual_change
name: Dodo
style: "width: 20%;"
- entity: device_tracker.bob_iphone
template: home_visual_change
name: Bob
style: "width: 20%;"
- entities:
- entity: sensor.jon_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
style: "width: 20%;"
- entity: sensor.emma_iphone13_home_distance
show_name: false
show_icon: false
show_state: true
style: "width: 20%;"
- entity: sensor.william_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
style: "width: 20%;"
- entity: sensor.joe_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
style: "width: 20%;"
- entity: sensor.bob_iphone_zone_distance
show_name: false
show_icon: false
show_state: true
style: "width: 20%;"
Here is a different way to display it, though youāll need to edit the yaml to ensure the entities and sensors are yours - I donāt have the same sensors:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
{{ states.device_tracker.galaxy_s24u.attributes.friendly_name }}
secondary: |
{{ states('sensor.device_tracker.galaxy_s24u_zone_distance') }} mi
icon: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
mdi:home-account
{% else %}
mdi:home
{% endif %}
icon_color: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
green
{% else %}
orangered
{% endif %}
fill_container: false
entity: device_tracker.jon_iphone
multiline_secondary: false
layout: horizontal
- type: custom:mushroom-template-card
primary: |
{{ states.device_tracker.galaxy_s24u.attributes.friendly_name }}
secondary: |
{{ states('sensor.device_tracker.galaxy_s24u_zone_distance') }} mi
icon: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
mdi:home-account
{% else %}
mdi:home
{% endif %}
icon_color: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
green
{% else %}
orangered
{% endif %}
fill_container: false
entity: device_tracker.emma_iphone13
multiline_secondary: false
layout: horizontal
card_mod:
style: |
ha-card {
height: 50px !important;
}
- type: custom:mushroom-template-card
primary: |
{{ states.device_tracker.galaxy_s24u.attributes.friendly_name }}
secondary: |
{{ states('sensor.device_tracker.galaxy_s24u_zone_distance') }} mi
icon: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
mdi:home-account
{% else %}
mdi:home
{% endif %}
icon_color: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
green
{% else %}
orangered
{% endif %}
fill_container: false
entity: device_tracker.emma_iphone13
multiline_secondary: false
layout: horizontal
card_mod:
style: |
ha-card {
height: 50px !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
{{ states.device_tracker.galaxy_s24u.attributes.friendly_name }}
secondary: |
{{ states('sensor.device_tracker.galaxy_s24u_zone_distance') }} mi
icon: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
mdi:home-account
{% else %}
mdi:home
{% endif %}
icon_color: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
green
{% else %}
orangered
{% endif %}
fill_container: false
entity: device_tracker.emma_iphone13
multiline_secondary: false
layout: horizontal
card_mod:
style: |
ha-card {
margin: 30px;
}
- type: custom:mushroom-template-card
primary: |
{{ states.device_tracker.galaxy_s24u.attributes.friendly_name }}
secondary: |
{{ states('sensor.device_tracker.galaxy_s24u_zone_distance') }} mi
icon: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
mdi:home-account
{% else %}
mdi:home
{% endif %}
icon_color: |
{% if states('device_tracker.galaxy_s24u') == 'home' %}
green
{% else %}
orangered
{% endif %}
fill_container: false
entity: device_tracker.emma_iphone13
multiline_secondary: false
layout: horizontal
card_mod:
style: |
ha-card {
margin: 30px;
}
Hereās what the end product should look like (with the names showing of each person. I donāt use a friendly name for my phone - thatās why it says Galaxy S24U as the name):
Guys, the HACS team is very slow with approving PRs and they wonāt give room card a bit more prio because of the situation
( there was a guy that made a PR for the removal of room card from HACS because he was asking a lot of questions that he could have answered himself by reading the readme. He was mad i didnt answer all of them, made bug reports that werent bugs and such )
I need your help convincing the HACS team. Please comment here why we want room card back in HACS:
afraid this wonāt help, just make it available as custom repo, and be done with it.
some wait for almost a year or more iirc. my last one took 10 months
itās just the way this integration goes, no use fighting that
ofc it is remarkable the PR requesting removal did get approvedā¦ can you link that? so we can see what, who and why?
We are neighbors in the HACS file haha
right, so this happened because the card was archivedā¦ seems nothing personal?
no other way around it then
Thank you!!!
1 Like