I suggest you take a look at this: CSS Tutorial
2 Likes
Hi. Super-awesome card, thanks for it! Is it possible to organize informational entities in two rows or in table form? I would like to have temperature and humidity values one above the other and/or just divide perception entities with security related entities
Thank you @marcokreeft87 for the linkā¦ I tried a lot but failed to align them.
The above screen shot is what I currently have with room-card
I want the items with less spacing in between like the screenshot below (manually edited screenshot)
We would really appreciate, If you could please tell the exact styling parameters. I know many of us would want this.
Thank you again for adding new options to the card.
How can show the name of the entites again? Something happend and the names of the entites vanished. Now Iām trying show_name, but it doesnāt do anything.
Also, could you please update the Wiki page as it doesnāt align with the current versions working, and I have no idea what I can do and how.
Thank you!
Hereās what I do to change the spacing between the entities in the entity row:
style: |
.entities-row .entity {
margin-right: 3px;
margin-left: 3px;
}
If you remove the show_name from the config it should work again
- type: horizontal-stack
cards:
- type: custom:room-card
hide_title: true
entities:
- entity: switch.nest
name: Nest
style: |
.entities-row .entity {
margin-right: 3px;
margin-left: 3px;
}
is this correct ? Because its not changing the spacing. Can you plz share your yaml !!
Unfortunately there is no show_name but the names are not showing:
Also somehow tha backgroung of the card wonāt change anymore 
Oh I see now! Let me fix that
Check out version 1.3.0!
Nvm Check out version 1.3.0
1 Like
Thnx! Checkout version 1.3.0. My hands were itching 
With that CSS it needs to apply to the entire room card, not the entities. You might try
style: |
.entity {
margin-right: 3px;
margin-left: 3px;
}
I donāt know if that will work, but since you are applying the style to the entities row, that might work, as you donāt need to tell the css to use the .entity of the .entity row. That said, hereās the entire YAML for the card I built to show the status of my HDHomerun tuners. Thereās a bunch going on here, but you can see the CSS applied at the room-card level. Thereās one other hiccup here. Calling it with style instead of styles might be changing it using card-mod, which is another addon to allow you to restyle cards. The styling part of room-card still seems a bit like black magic to me. You have to sacrifice something to get the incantation right.
type: custom:room-card
style: |
.entities-info-row {
padding: 0px;
right: 0px;
top: 0px;
}
div {
margin: 0px;
padding: 0px;
}
ha-card {
background: none;
box-shadow: none
}
.entities-row .entity {
padding-top: 15px;
margin-right: 7px;
}
.entity span {
color: var(--primary-text-color);
}
title: HD Home Run
hide_title: true
entities:
- entity: sensor.hdhomerun_tuner_1
name: Tuner
icon:
conditions:
- condition: equals
value: In Use
styles:
color: var(--state-icon-active-color)
- entity: sensor.hdhomerun_tuner_2
name: Tuner
icon:
conditions:
- condition: equals
value: In Use
styles:
color: var(--state-icon-active-color)
- entity: sensor.hdhomerun_tuner_3
name: Tuner
icon:
conditions:
- condition: equals
value: In Use
styles:
color: var(--state-icon-active-color)
- entity: sensor.hdhomerun_tuner_4
name: Tuner
icon:
conditions:
- condition: equals
value: In Use
styles:
color: var(--state-icon-active-color)
- entity: sensor.hdhomerun_tuner_5
name: Tuner
icon:
conditions:
- condition: equals
value: In Use
styles:
color: var(--state-icon-active-color)
- entity: sensor.hdhomerun_tuner_6
name: Tuner
icon:
conditions:
- condition: equals
value: In Use
styles:
color: var(--state-icon-active-color)
2 Likes
Thank you very much. It workedā¦ I really appreciate your help and explanation in detailā¦
HI, AWESOME card.
Is below not supposed to work or did I do something wrong. Would expect the Power icon to not show up.
type: custom:room-card
title: Bedroom
entities:
- entity: light.bathroom_strip
name: ceiling
icon: ghi:ceiling-being
- entity: sensor.plug_bedroom_power
name: power
show_state: true
show_icon: false
info_entities:
- entity: binary_sensor.security_bedroom_door_contact
show_icon: true
icon:
state_on: mdi:door-open
state_off: mdi:door-closed
- entity: sensor.climate_bedroom_temperature
format: precision1
- entity: sensor.climate_bedroom_humidity
format: precision0
I would like to show the total power used in the room to show on the right hand side of the line as a distinct item. That I most likely can do using the css-style, but first getting the icon out.
I said it in the question above, this card is really awesome to show details about the rooms in a condensed manner. Sofar I have only been adding sensors showing states.
But I really like it, another picture just to show what can be done.
The Location is a custom:button-card the others are room-cards.
Thanks a lot for creating this Marco !
1 Like
I donāt think you did anything wrong. I tried the same thing awhile back, and it appears the icon shows in the entities row no matter what. The only place that the show_icon boolean seems to change the display is in the info_entities row at the top.