Custom card: Room Card

Thank you so much for taking the time to adapt this!!!

Here is the current status of my customisation
image

I assume that the main icon and the title can no longer be moved to the centre of the map with 2 entity lines. I have tried but my CSS knowledge is rudimentary and therefore failed.

Do you have a solution for dealing with roller shutters? I still have to integrate them into my living room card. I have a window and a door in my living room. I’m thinking about not displaying them individually but via a group, just like the rest of the sockets. Otherwise there will be too many entity “buttons”.

The size is perfect for a smart phone. But there is more space on a tablet or PC. Is there a way to define the CSS classes so that it automatically distinguishes whether it is output on a phone or on a tablet?

1 Like

You should be able to adjust the position of the icon and title with margin:

The icon, title, and entity rows are all contained in “.title” so you need only add to margin-top there and subtract the same amount from “.entities-row:nth-child(2)” margin-top to adjust the title position. To me 20px and -48px looks about right but YMMV.

My recommendation for anything more complicated is to use a bubble card popup when the room card is clicked. I don’t have shutters so can’t speak to those. Alternatively, clicking for more info isn’t too bad. You could maybe use css animations or something but that’s a bit outside of my wheelhouse.

I don’t know about css classes but conditional cards/sections can do that just fine. So just duplicate the cards and have them edited to your liking?

I’m trying add animation to some of my ceiling fan icons, but can’t seem to get anything to work. I’d really like them to spin, but I found an example from @marcokreeft87 about making an icon blink so I figured I’d start with that. @marcokreeft87 's original code is in Post #457.

Here’s the code I’m using:

type: custom:room-card
title: Living Room
info_entities:
  - entity: binary_sensor.living_room_occupancy
    show_icon: true
    icon:
      conditions:
        - icon: mdi:motion-sensor
          condition: equals
          value: 'on'
        - icon: mdi:motion-sensor-off
          condition: equals
          value: 'off'
  - sensor.living_room_temperature
  - sensor.living_room_humidity
entities:
  - entity: fan.living_room_ceiling_fan
    name: Ceiling Fan
    show_icon: true
    tap_action:
      action: toggle
    card_mod:
      style: |
        {% if is_state('fan.living_room_ceiling_fan','on') %}
          ha-card {
            animation: blink 1s linear infinite;
          }
          @keyframes blink {
            50% {opacity: 0;}
          } 
        {% endif %}

Unfortunately, no matter what I try the ceiling fan doesn’t blink.

You have the wrong indentation, you have to use card_mod under custom room-card…

blink for ha-card
type: custom:room-card
title: Living Room
info_entities:
  - entity: binary_sensor.movement_backyard
    .
    .

entities:
  - entity: fan.ceiling_fan
    name: Ceiling Fan
    show_icon: true
    tap_action:
      action: toggle
card_mod:
  style: |
    {% if is_state('fan.ceiling_fan','on') %}
      ha-card {
        animation: blink 1s linear infinite;
      }
      @keyframes blink {
        50% {opacity: 0;}
      }
    {% endif %}

- type: custom:room-card
  title: Living Room
  info_entities:
    - entity: binary_sensor.movement_backyard
    .
    .
  entities:
    - entity: fan.ceiling_fan
      name: Ceiling Fan
      show_icon: true
      tap_action:
        action: toggle
      icon:
        conditions:
          - condition: equals
            value: 'on'
            styles:
              color: yellow
              animation: blink 0.75s ease infinite
  card_mod:
    style: |
      @keyframes blink {
        50% {opacity: 0;}
      }
      @keyframes spin {
          from {
              transform:rotate(0deg);
          }
          to {
              transform:rotate(360deg);
          }
      }

change to spin if you want …
animation: spin 2s linear infinite
CleanShot 2024-07-09 at 22.36.47

@VietNgoc Thank you! That worked perfectly.