Custom card: Room Card

Check my screenshot I sent earlier…

the screenshot was made on the computer. dashboard is for tablet and there is no place for text only for the icon. But thanks so far, help me on computer dashboard.

@Vandana I found something. You wanted to change the color of the icon right?

Try this:

    entity: light.led_bureau_2
    name: Bureau
    show_icon: true
    icon: mdi:desk
    tap_action:
      action: toggle
    styles: 
      '--paper-item-icon-color': red;

Where ofcourse the entity is your entity and such

Thanks a lot this worked… finally the icon color changed.:blush::blush:

But I am still struggling to change the text color… :pensive::pensive:

1 Like

I wrote the exact same yaml but text color is just not changing. It’s really eating me.

I have tested on safari(Mac book air),
Firefox (windows laptop), chrome (android phone running on Android 12) and HA app running on Android 12. I don’t know what is going wrong​:pensive::pensive:

Try searching for the text with chrome developer tools. There you will find the css path needed

so after copying yaml from your screen shot. I changed the colour to cyan.

Now see the screenshot Style attribute is showing disabled for color: cyan.

2

The above pic with yaml
styles:
color: cyan

The below pic with manually injected style
3

I manually inject color: steelblue; in Style Attribute the color of the text changes to steelblue. But of course its temporary as after the refresh the text color changes back to default.

What changes I have to make in yaml to make the text color permanent?

Kindly guide.

Thats because the developer tools make temporary changes so you can see what it looks like if you put it in the code/yaml.

This is my last try at trying to hope and make it clear to you what to do:

As you can see I can change all text color. So the card works correctly. If this doesnt help, send me your full yaml of your dashboard, I will take one last look at it.

Yes I understand that.

2022-09-01-212246_1024x768_scrot
2022-09-01-212826_1024x768_scrot

type: custom:room-card
title: Garage
entity: switch.nest
icon: mdi:lightbulb
tap_action:
  action: toggle
entities:
  - entity: switch.nest
    name: Nest
    styles:
      color: red
  - entity: switch.fountain
    name: Fountain
    styles:
      color: green
info_entities:
  - sensor.cpu

Here is the Yaml… The color of the text “Nest” is not changing to red and the color of the text “Fountain” is not changing to green. You can see in the screenshot attached.

Is there a nice way to implement a cover entity?
like how to control the open and close action?

Check the examples at https://github.com/marcokreeft87/room-card
and especially:

cards:
    - type: custom:simple-thermostat
      entity: climate.radiator_mancave
      name: Radiator
      title: Mancave
      control:
        _headings: true
        _icons: true
        _names: true
        hvac:
          heat:
            icon: mdi:fire
            name: On
          'off':
            icon: mdi:power
            name: Off

this is a example of room card showing a radiator card inside.
Or if you meant to control the cover inside room card, you can just add the entity to the room card and click on it? But I think you ment the first example I’ve given

I want to have the controls.
But having the cover entity in de room card I can only execute the toggle action which doesn’t work properly

Super weird! Here is my HA with the same yaml :slight_smile:

Which version are you using? I just made a new release v0.0.13. Can you show me your console in chrome developer tools?

image

Then you have to search for a card that does the trick and add it to room card, or don’t if the other card is sufficient

Just updated to v0.0.13 and colors are now showing for text… thanks a lot…:blush::blush:

1 Like

Very good to hear! So apparently there was either a cache problem or HA wasnt giving you the correct version.

No idea what it was bit finally it worked… thanks again…

You have added multirow support for entities. Is it possible to add alignment for entities.

For example see in the screenshot. The row is aligned centered. Can it will left aligned or right aligned???

Try the styles: again, otherwise I dont know, mine are all aligned to the left.

Add some more entities until they go to the next line then see if they are aligned left or center

I was able to solve the issue with wrapping entities by using the width: property under styles: You can specify either px or %. I have 9 entities in my room card and had to test a few different sizes before finally finding that 7% worked best for me.

Still haven’t figure out how to left justify the entities row, but I’m happy with it for now.