Could you please post the code for changing the main icon size / properties? Your “lamp” icon is bigger than the others, that’s what I’m after! Thanks in advance!
Thanks, I got what I wanted:
title: ''
styles:
'--mdc-icon-size': 60px
Hi, sorry to bump an old post.
I’m trying to get the fan speed displayed for my sonoff ifan04.
Is there an example how I could add it to the config? Since there’s no specific sensor for the speed
@ferbulous that’s going to be difficult I guess. My fan has an rpm attribute which makes it easy.
Only thing you can do this calculate it based on the percentage. You would need to know the max rpm and minimum rpm if that isn’t zero.
Since I’m not that familiar with templates
Is there some example how I could extract the values for the percentage speed?
No need for templates, you can just do this in the room-card.
- entities:
- entity: fan.ifan04
attribute: percentage
show_icon: true
show_state: true
show_name: false
will show your percentage.
1 Like
Thanks, that’s exactly what I need.
As for some animation, some css style is required like in this discussion?
Has anyone used the styles to make room card look more like a mushroom-style card? If so let me copy your homework please and thank you very much.
Hello
how to:
- Change font size for entities?
Thanks
Looking for some help please, I am trying to change an info entities icon based on the value of a different entity. Is this possible please?
Current code below, frustratingly the icon does not change to a blue, thermometer_off icon if I toggle on the switch for climate_standby_study.
type: custom:room-card
title: Study
entities:
- entity: light.study_lamp
name: Lamp
icon: mdi:lamp
tap_action:
action: toggle
show_icon: true
info_entities:
- entity: climate.study
tap_action:
action: more-info
show_icon: true
icon:
conditions:
- condition: equals
entity: switch.climate_standby_study
value: 'on'
styles:
color: blue
icon: mdi:thermometer-off
- condition: equals
attribute: hvac_action
value: idle
styles:
color: white
icon: mdi:home-thermometer-outline
- condition: equals
attribute: hvac_action
value: heating
styles:
color: red
icon: mdi:thermometer-chevron-up
Another plea for help please. I want a tap action to open more info but for a different entity. I cannot get this to work with…
tap_action:
entity: climate.study
action: more-info
I have read the thread and others report this as working, but for an older version. Any pointers appreciated.
Hello! I need some help, please:
- I managed to get a popup with room card to my likings, something like this:
And this is the code:
type: custom:room-card
title: ''
styles:
margin-top: '-25px'
'--mdc-icon-size': 60px
'--card-mod-icon-color': aquamarine
entity: scene.cozinha_off
show_icon: true
tap_action:
action: none
double_tap_action:
action: call-service
service: scene.turn_on
target:
entity_id: scene.cozinha_off
hold_action:
action: more-info
state_color: true
column: false
rows:
- entities:
- entity: switch.luz_da_bancada
name: Bancada
tap_action:
action: toggle
state_color: true
- entity: switch.luz_do_teto
name: Teto
tap_action:
action: toggle
state_color: true
- entity: input_boolean.luz_do_exaustor
name: Exaustor
tap_action:
action: toggle
state_color: true
hide_if:
conditions:
- condition: equals
entity: input_boolean.luz_do_exaustor
value: 'off'
- entities:
- entity: switch.maquina_de_cafe
name: Café
tap_action:
action: toggle
state_color: true
- entity: switch.localtuya_power_02
name: Loiça
tap_action:
action: toggle
state_color: true
- entity: switch.triturador
name: Triturador
tap_action:
action: toggle
state_color: true
- entity: switch.ficha_cozinha
name: F.Bancada
tap_action:
action: toggle
state_color: true
- entity: switch.airfry
name: AirFry
tap_action:
action: toggle
state_color: true
hide_if:
conditions:
- condition: equals
entity: sensor.airfry_power
value: 0
- condition: equals
entity: switch.airfry
value: 'on'
- entity: input_boolean.placa_do_fogao
name: Fogão
tap_action:
action: toggle
state_color: true
hide_if:
conditions:
- condition: equals
entity: input_boolean.placa_do_fogao
value: 'off'
- entity: input_number.exaustor
name: Exaustor
tap_action:
action: toggle
state_color: true
hide_if:
conditions:
- condition: equals
entity: input_number.exaustor
value: 0
info_entities:
- entity: binary_sensor.porta_cozinha_contact
show_icon: true
- entity: binary_sensor.movimento_cozinha_occupancy
show_icon: true
- entity: sensor.ambiente_cozinha_humidity
show_icon: false
format: precision0
- entity: sensor.ambiente_cozinha_temperature
show_icon: false
format: precision1
card_mod:
style: |
div.entities-row {
justify-content: center;
flex-wrap: wrap;
}
ha-card {
border: none;
--mdc-icon-size: 35px;
}
What I want to do that I can’t: template the color of the main icon.
I want, if I have certain entities active, the icon colored, otherwise gray. I have a scene to turn of all devices in a room associated to the main icon, and the main icon would be colored if makes sense to activate a turn_off in that room (something on that sould be off), makes sense? Thanks to anyone that can help!
For whatever it’s worth to everyone I took a stab at making this look a little bit more at home in a Mushroom layout. There’s still some clunky behavior on first load for phones where things look a bit weird but overall I’m happy. I have the hide condition for the info icons set to “off2” for now because I’m not sure if I want to hide the icons when they aren’t active yet.
There is almost certainly cleaner CSS to get this all done so if anyone wants to do that for me I won’t complain.
type: custom:room-card
title: Livingroom
show_icon: true
entity: light.livingroom_lights
tap_action:
action: toggle
card_mod:
style: |
.entities-row{
margin-left: auto;
margin-top: -35px;
padding: 0px 16px 12px 16px !important;
!border: 1px solid red;
height: 35px
}
.entities-row .entity{
width: 35px;
height: 35px;
margin-left: 10px !important;
margin-right: 0px !important;
--mdc-icon-size: 50%;
}
.entities-row .entity .icon-small{
width: auto;
height: auto;
margin-top: -3px;
margin-left: 0px;
}
.entities-info-row{
padding: 0 !important;
margin: -20px -3px;
}
.entities-info-row .entity{
!border: 1px solid red;
padding: 0 !important;
--mdc-icon-size: 50% !important;
}
.entities-info-row .entity .icon-small{
width: 35px;
height: 35px;
margin-left: -5px;
margin-top: -8px;
}
.main-icon{
height: 63px !important;
width: 80px !important;
margin-top: 18px !important;
}
.main-state{
margin-top: -16px;
max-width: none;
max-height: none;
}
.title{
font-weight: bold;
!border: 1px solid red;
margin-top: 16px;
}
card_styles:
'--ha-card-header-font-size': 16px
styles:
template: >
if (entity.state == 'on' & entity.attributes.rgb_color!=null) return
'background-color: rgba(' + entity.attributes.rgb_color + ',0.15);
border-radius: 50%; --mdc-icon-size: 50%;'; if (entity.state == 'on' &
entity.attributes.rgb_color==null) return 'background-color:
rgba(var(--rgb-accent-color),0.15); border-radius: 50%; --mdc-icon-size:
50%;'; else return 'background-color: rgba(var(--rgb-disabled-color),0.2);
border-radius: 50%; --mdc-icon-size: 50%;'
icon:
template:
icon: return 'mdi:sofa'
styles: >
return 'width: 100%; height: 100%; margin-top: auto; margin-left: .01em;
color: var(--disabled-color)';
templates:
- name: info_icon_entity
template:
show_icon: true
state_color: false
hide_if:
conditions:
- condition: equals
value: off2
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important;'; else return 'color: var(--disabled-color)
!important;';
- name: info_text_entity
template:
show_icon: false
state_color: true
styles:
template: |
return 'width: auto; font-size: 90%; 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(--disabled-color);';
icon:
template:
styles: |
return 'color: var(--disabled-color) !important;';
- name: media_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
return 'background-color: rgba(var(--rgb-primary-color),.2);
border-radius: 50%; border: 1px solid var(--divider-color); ';
icon:
template:
icon: >
if (entity.state == "playing") return 'mdi:speaker-play'; else
return 'mdi:speaker-pause';
styles: |
return 'color: var(--disabled-color) !important;';
- name: entity_button
template:
show_icon: true
state_color: true
show_name: false
tap_action:
action: toggle
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;';
info_entities:
- entity: binary_sensor.aqara_motion2_motion_2
template: info_icon_entity
- entity: sensor.lucas_steammonitor
show_icon: true
state_color: false
hide_if:
conditions:
- condition: equals
value: 2
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "1") return 'color: var(--accent-color)
!important;'; else return 'color: var(--disabled-color) !important;';
- entity: binary_sensor.livingroom_smoke_detector_smoke_detected_2
template: info_icon_entity
- entity: binary_sensor.livingroom_smoke_detector_carbon_monoxide_detected_2
template: info_icon_entity
- entity: sensor.aqara_motion2_illuminance_2
template: info_text_entity
entities:
- entity: light.hall_light
tap_action:
action: toggle
template: light_button
- entity: light.hanging_light
tap_action:
action: toggle
template: entity_button
- entity: switch.sonoff_zb_1_switch
tap_action:
action: toggle
template: entity_button
- entity: light.sunroom_light
tap_action:
action: toggle
template: entity_button
3 Likes
Per the documentation: Configuration · marcokreeft87/room-card Wiki · GitHub
You can color the main icon using icon templating and can thus use if statements as needed.
icon:
template:
styles: >
return 'color: var(--accent-color)';
1 Like
Marco thanks again for your hard work 
, I really like what you can do with this card !
Using PowerCalc and some zigbee plugs to get my powerconsumption displayed.
Using HEOS+Enigma-integration to show playing station or sat-TV program details.
Lights are only shown when it’s getting dark.
2 Likes
Thank you! Finnaly got the sintax of the templating right 
1 Like
I’m trying to use the new-ish custom_template feature to cut down on boilerplate in my Custom Room Cards, but I’ve run into a weird issue. Has anyone seen this before?
I have a file, area_card_tools.jinja, with some small sample content:
{% macro main_cardmod_css() %}
ha-card{background-color: #c6def155;}
{% endmacro %}
I can use this template in the cardmod block for a normal card just fine. This works, I get an entity card with a blue background:
- type: entity
entity: light.office_room_lights
card_mod:
style: >
{% from 'area_card_tools.jinja' import main_cardmod_css %}
{{ main_cardmod_css() }}
But the exact same code in a Room Card doesn’t work. HA shows a red exclamation mark icon and a “reload UI” button (which doesn’t work.) The JS console fills up with errors Unhandled Promise Rejection in translations-mixin.js, due to Connection lost.
- type: custom:room-card
title: A Room
show_icon: true
entity: light.office_room_lights
card_mod:
style: >
{% from 'area_card_tools.jinja' import main_cardmod_css %}
{{ main_cardmod_css() }}
Putting the exact same CSS into the Room Card’s YAML declaration for code_mod directly works fine. I can also call the custom_template in the developer tools without priblem:
Testing CSS template for Room Cards:
'{% from 'area_card_tools.jinja' import main_cardmod_css %}
{{ main_cardmod_css() }}'
returns
Testing CSS template for Room Cards: '
ha-card{background-color: #c6def155;overflow: clip;}
'
Why is Room Card not behaving the way other cards seem to here? Is there some syntax I can use to make this work?
@marcokreeft87 Thanks for the great card!
@aredon I love your configuration of the Room card! However, I have a few problems adapting them to my needs.
Firstly, I would like to create a 2nd row of Entities but after I have done that the icons overlap. I have a lot of lights and sockets in the living room and would like to put the lights in the top row and the sockets in the bottom row.
rows:
- entities:
- entity: light.wohnzimmer_spots
tap_action:
action: toggle
template: light_button
- entities:
- entity: light.wohnzimmer_strips
tap_action:
action: toggle
template: light_button
Secondly, I added my Alexa as a media player in the info_entities and configured it as in your example. The only difference is that my status is “playing”. Now when I play a playlist or a web radio, the cover is also displayed, which is great, but the size of the cover is too big for the info bar, how can I change that and can make it smaller?
- entity: media_player.wohnzimmer
show_icon: true
state_color: false
hide_if:
conditions:
- condition: equals
value: 2
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "playing") return 'color: var(--accent-color)
!important;'; else return 'color: var(--disabled-color) !important;';
I tried to change the 'width: auto; but that only changed the distance between the info items.
I would also like to display the temperature of the room directly under the title “Living room”. Is that possible somehow? If not, it would also be OK to add it directly to the title - apparently the title can also be defined using a template. Since I have no idea about templating I hope someone can help me here.
I’ve actually changed it a lot and fixed the row issue. I believe I used :nth-child to correct the rows and add margin. It’s generally way more compact than before so if you preferred the old look well… I hope you know CSS 
. The new design, when a single row is present, it only slightly bigger than the default mushroom icons. You can probably look at my code and make a hybrid?
Here’s my setup so far. I’m currently trying my damndest to figure out background color from an attribute (not a state) so I can color the climate button correctly. I also can’t figure out what gray-color variable mushroom uses for icon backgrounds. Currently on the “light” theme my setup doesn’t have gray around the icons like standard mushroom does. I’m still not quite sure I’m happy with the sizing yet. Trying to find a balance between not having to scroll forever but also not making everything so cramped I can’t hit buttons accurately.
I also had to move as much of the code out of card_mod as I could figure out how to do because card mod renders late and makes the card jump around on load. Which I found annoying.
type: custom:room-card
title: Dining Room
show_icon: true
state_color: false
entity: light.dining_room_lights
tap_action:
action: toggle
card_mod:
style: |
.entities-row{
margin-left: auto;
padding: 0px 16px 12px 16px !important;
height: 28px;
}
.entities-row:nth-child(2){
margin-top: -28px;
}
.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: 2px;
}
card_styles:
'--ha-card-header-font-size': 14px
'--mdc-icon-size': 60%
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:chandelier'
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
hide_if:
conditions:
- condition: equals
value: 'off'
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_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: media_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == "playing") return 'background-color:
rgba(var(--rgb-primary-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color); '; if (entity.state != "playing") return
'background-color: rgba(var(--rgb-disabled-color),.2); border-radius:
50%; border: 1px solid var(--divider-color); ';
icon:
template:
icon: >
if (entity.state == "playing") return 'mdi:speaker-play'; else
return 'mdi:speaker-pause';
styles: |
return 'color: var(--disabled-color) !important;';
- name: entity_button
template:
show_icon: true
state_color: true
show_name: false
tap_action:
action: toggle
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.third_reality_motion_dining_room_motion_2
template: info_icon_entity
- entity: vacuum.binjamin
template: info_icon_entity
- entity: sensor.dining_room_humidity
template: info_text_entity
- entity: sensor.dining_room_temperature
template: info_text_entity
rows:
- entities:
- entity: light.dining_room_ceiling
tap_action:
action: toggle
template: light_button
- entity: climate.dining_room
template: climate_button
- entity: switch.nest_fan
tap_action:
action: toggle
template: entity_button
- entity: switch.printer
template: entity_button
- entities:
- entity: light.dining_room_ceiling
tap_action:
action: toggle
template: light_button
- entity: climate.dining_room
template: climate_button
- entity: switch.nest_fan
tap_action:
action: toggle
template: entity_button
- entity: switch.printer
template: entity_button
Secondly, I added my Alexa as a media player in the info_entities and configured it as in your example. The only difference is that my status is “playing”. Now when I play a playlist or a web radio, the cover is also displayed, which is great, but the size of the cover is too big for the info bar, how can I change that and can make it smaller?
I ended up overriding the media player icon via the media_button template so it doesn’t show the art. I couldn’t figure out a good way to clean up the art being displayed. Or rather I gave up.
I would also like to display the temperature of the room directly under the title “Living room”. Is that possible somehow? If not, it would also be OK to add it directly to the title - apparently the title can also be defined using a template. Since I have no idea about templating I hope someone can help me here.
This is also something I wanted to do since it’s common with Mushroom cards. Right now room card doesn’t really have an additional space for a subtitle or anything like that. I’m considering doing some goofy stuff with the CSS :after tag to see what I can do but I haven’t had time or motivation to do it yet.
3 Likes
Is there a way to do templates across all room cards on a page so I don’t have to keep copy-pasting my lil brains out?