Custom card: Room Card

Share your Projects!
436

Have you tried show_state? If that doesn’t help share your yaml. If it would be the card, more people should have it

437

It’s weird… I copied another example, started from scratch and rebuild my config. Now it works. Maybe some hidden spaces/newlines which are not detected by the parser?

Screenshot_2023-10-23-08-48-28-68_c3a231c25ed346e59462e84656a70e50
Screenshot_2023-10-23-08-48-28-68_c3a231c25ed346e59462e84656a70e501079×1370 128 KB

438

Did you ever manage to make the icons bigger? This is the only thing stopping me from rolling room cards out :confused:

439

Nope, sorry… :confused:

440

Try this:

type: custom:room-card
entity: light.woonkamer_lampen
show_icon: true
title: Woonkamer
styles: 
  '--mdc-icon-size': 50px;
441

I love the look of this card, however my header style is not working. Can someone please tell me what I am doing wrong…

On the phone the “Master Bedroom” overlaps the icons
image

type: custom:room-card
title: Master Bedroom
style: |
  .card-header {font-size: 20%}
entity: light.bedroom_main_lights
icon: mdi:bed
show_icon: true
tap_action:
  action: toggle

Ideally I would like to show like this with temperature separated by a “|” from the humidity. With the contact door and motion sensor justified to the right
image

Thanks

442

Try

styles:
  font-size: 20%

But it’s better to use px imo

443

Thanks for the quick reply @marcokreeft87

However :frowning: doesn’t work I tried different values it seems to adjust the height of the card

type: custom:room-card
title: Master Bedroom
styles:
  font-size: 5px
entity: light.bedroom_main_lights
444

Hmm was just a guess. Let me get back to you after work with a working answer :slight_smile:

445

How about this:


card_styles: 
  '--ha-card-header-font-size': 54px;
2 Likes
446

Can someone explain how I make the width between cards smaller? This distance here, between two cards. It’s driving me nuts. The CSS doesn’t seem to show anything useful that I can change. I’m using a horizontal masonry layout to hold room card cards with a soft UI theme.

image
image375×673 20 KB

447

That must be the theme that you are using. Can you share your yaml?

1 Like
448

Yes, you’re right. It was in the soft-ui yaml, but it needed to be reloaded before it took effect. Thanks!

1 Like
449

That did the trick – this card is awesome. Thanks for your hard work!
Once I complete my room cards I will share the YAML

1 Like
450

Hi, is it possible to use a state in the style definition? For example, change this:

    icon:
      template:
        styles: |
          if (entity.state == 'on') return 'color: rgb(var(--lounge-color))';

with this:

    icon:
      template:
        styles: |
          if (entity.state == 'on') return "color: {{states('input_text.color_lounge')}}";

I can’t get it to work and I’ve searched everywhere for a working example.

Thanks

451

Try states.input_text.color_lounge.state or maybe without the .state on the end

452

Thanks for your response Marco. Unfortunately neither of those suggestions worked. I’m stumped, having tried

{{states('input_text.color_lounge')}}
{{states.input_text.color_lounge.state}}
{{states.input_text.color_lounge}}

They should all return:

image

but the icon color isn’t changing.

453

Without the {{ and }} ?
The way you define the template is gets parsed to javascript. And javascript doesn’t know about jinja templating

454

Hi, just to close the loop on this. I asked the question about using entities for colours elsewhere and have been warned against it. It’s not easy to do and HA isn’t designed to use it in the way I want to. I’m sticking with using theme variables, which means that I don’t have the issue with the room card any more.

455

Thanks for the update Matt!