šŸŸ£ Rounded - Dashboard guide

Looks very nice! Still, was wondering about a layout for my desktop dashboard but something like this inspired me to finally make a choice, thanks!
And have my mobile one already done with the rounded theme, so continuing on that should be very simple.

One question, the scene buttons used on the left, are these opening a pop-up (bubble)? Or does the whole layout change except the top and the left?

And another, can you share your Spotify (media) tab? Still trying to design that one in proper way and canā€™t seem to find cards and layout that I really like.

Happy easter!

It changes to a new view. But sidebar and top stays the same. I used decluttering card to make them all the same on every page. So less work if you want to change something.

My Spotify view is not that great to be honest. I will see if I change it and I am happy with it I will share. But for not itā€™s not very good. :confused:

love this card, any ideas of how I can use this with my RM4 mini Broadlink that controls my ā€˜dumbā€™ A/c unit? Iā€™m pretty new to HA and trying to get my head around it. Iā€™ve mapped some buttons but canā€™t figure out how to actually imlement them into this code?

Hi Guys,

I have created a new light entity to control multiple hue lights in one room:

light:
  - platform: group
    name: All livingroom lights
    entities:
      - light.hue_play_links
      - light.hue_play_rechts
      - light.hue_lightstrip_livingroom
      - light.wohnzimmer_deckenlampe

This works pretty good, except for the brightness and temperature sliders, when changing values here always all lights are getting turned on. It would be cool if only the ones that are already on are being changed, any idea how to solve that?

Anyone who has managed to create a card for blinds ( cover card) can kindly share the code please?

Iā€™m using the solution posted here to create a ā€˜smart light groupā€™, works pretty good:

1 Like

hi

can you share the code for this Area?

Thank you.

1 Like

Sure, here it is:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 75px min-content auto 200px
  grid-template-rows: min-content
  grid-template-areas: |
    ". time status profile"
cards:
  - type: custom:paper-buttons-row
    styles:
      justify-content: space-between
      background: none
      margin: 0px 0px 0px 0px
      margin-top: 70px
    buttons:
      - name: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
        styles:
          name:
            font-weight: 300
            font-size: 40px
            letter-spacing: '-1px'
            position: relative
            margin-left: 15px
        tap_action:
          action: navigate
          navigation_path: home
      - layout: name_state
        name: '{{ now().strftime("%a") }}'
        state: '{{ now().strftime("%d")}}. {{ now().strftime("%b") }}'
        styles:
          button:
            width: 70px
            height: 32px
            position: relative
          name:
            position: absolute
            left: 0
            top: 0
            font-weight: 400
            white-space: nowrap
          state:
            position: absolute
            left: 0
            bottom: 0
            font-weight: 600
            white-space: nowrap
        tap_action:
          action: navigate
          navigation_path: home
      - entity: sensor.hue_motion_sensor_1_temperature
        icon: mdi:thermometer
        layout: icon|name_state
        name: '{{ states("sensor.humidity_range") }}'
        state: '{{ states("sensor.temperature_range") }}'
        styles:
          button:
            width: 120px
            height: 32px
            position: relative
            left: 0px
          icon:
            position: absolute
            left: 0px
          name:
            position: absolute
            left: 30px
            top: 0
            font-weight: 400
            white-space: nowrap
          state:
            position: absolute
            left: 30px
            bottom: 0
            font-weight: 600
            white-space: nowrap
        tap_action:
          action: navigate
          navigation_path: heating
    view_layout:
      grid-area: time
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.vacation_mode
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.vacation_mode
          content_info: none
          icon_color: black
          use_entity_picture: false
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--orange);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
          - condition: state
            entity: input_boolean.notifications_julians_iphone
            state: 'off'
        chip:
          type: entity
          entity: input_boolean.notifications_julians_iphone
          tap_action:
            action: navigate
            navigation_path: settings
          double_tap_action:
            action: toggle
          content_info: none
          icon_color: black
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--blue);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: light.all_lights
            state: 'on'
        chip:
          type: entity
          entity: sensor.lights_on_count
          double_tap_action:
            action: call-service
            service: light.turn_off
            data: {}
            target:
              entity_id: light.all_lights
          icon_color: black
          content_info: state
          tap_action:
            action: navigate
            navigation_path: lights
          hold_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--orange);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: binary_sensor.heating
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.heating
          icon_color: black
          icon: mdi:thermostat
          content_info: none
          tap_action:
            action: navigate
            navigation_path: heating
          hold_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--red);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: group.chores
            state: 'on'
          - entity: input_boolean.vacation_mode
            state: 'off'
          - entity: alarm_control_panel.security_system
            state: armed_home
        chip:
          type: entity
          entity: sensor.chores_on_count
          icon_color: black
          content_info: state
          tap_action:
            action: navigate
            navigation_path: chores
          hold_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--yellow);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: sensor.dishwasher_status
            state_not: 'Off'
        chip:
          type: template
          double_tap_action:
            action: call-service
            service: input_boolean.turn_off
            target:
              entity_id: input_boolean.chores_dishwasher
            data: {}
          entity: sensor.dishwasher_status
          icon: |-
            {% if is_state('sensor.dishwasher_status', 'Running') %}
              mdi:dishwasher
            {% elif is_state('sensor.dishwasher_status', 'Clean') %}
              mdi:dishwasher-alert
            {% elif is_state('sensor.dishwasher_status', 'Idle') %}
              mdi:dishwasher
            {% else %}
              mdi:dishwasher-off
            {% endif %}
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: kitchen
          card_mod:
            style: |
              ha-card {
                --chip-background: {% if is_state('sensor.dishwasher_status', 'Running') %} var(--blue) {% elif is_state('sensor.dishwasher_status', 'Clean') %} var(--green) {% elif is_state('sensor.dishwasher_status', 'Idle') %} var(--yellow) {% else %} var(--contrast10) {% endif %};
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: sensor.washing_machine_status
            state_not: 'Off'
        chip:
          type: template
          double_tap_action:
            action: call-service
            service: input_boolean.turn_off
            target:
              entity_id: input_boolean.chores_laundry
            data: {}
          entity: sensor.washing_machine_status
          icon: |-
            {% if is_state('sensor.washing_machine_status', 'Running') %}
              mdi:washing-machine
            {% elif is_state('sensor.washing_machine_status', 'Clean') %}
              mdi:washing-machine-alert
            {% elif is_state('sensor.washing_machine_status', 'Idle') %}
              mdi:washing-machine
            {% else %}
              mdi:washing-machine-off
            {% endif %}
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: kitchen
          card_mod:
            style: |
              ha-card {
                --chip-background: {% if is_state('sensor.washing_machine_status', 'Running') %} var(--blue) {% elif is_state('sensor.washing_machine_status', 'Clean') %} var(--green) {% elif is_state('sensor.washing_machine_status', 'Idle') %} var(--yellow) {% else %} var(--contrast10) {% endif %};
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: binary_sensor.octoprint_printing
            state: 'on'
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: sensor.octoprint_job_percentage
          icon_color: black
          content_info: state
          tap_action:
            action: navigate
            navigation_path: 3d-printer
          icon: mdi:printer-3d
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--orange);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.prusalink
            state: printing
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: sensor.prusalink_progress
          icon_color: black
          content_info: state
          tap_action:
            action: navigate
            navigation_path: 3d-printer
          icon: mdi:printer-3d
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--orange);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: input_boolean.readytoclean
            state: 'on'
        chip:
          type: entity
          entity: input_boolean.readytoclean
          content_info: none
          icon_color: black
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--purple);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: vacuum.dobby
            state_not: docked
          - condition: state
            entity: vacuum.dobby
            state_not: unavailable
        chip:
          type: entity
          entity: vacuum.dobby
          content_info: none
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: vacuum
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--yellow);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: switch.coffee_maker_outlet
            state: 'on'
        chip:
          type: entity
          entity: switch.coffee_maker_outlet
          content_info: none
          icon_color: black
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--green);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: switch.fan_outlet
            state: 'on'
        chip:
          type: entity
          entity: switch.fan_outlet
          content_info: none
          icon_color: black
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--blue);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: switch.desk_webcam
            state: 'on'
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: switch.desk_webcam
          content_info: none
          icon_color: black
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--green);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
              - 82def695e9504f63b1eb09150073737d
          - condition: or
            conditions:
              - condition: and
                conditions:
                  - entity: binary_sensor.is_alarm_on
                    state: 'on'
                  - entity: sensor.time_of_day
                    state_not: day
                  - entity: sensor.time_of_day
                    state_not: morning
                  - entity: alarm_control_panel.security_system
                    state_not: armed_away
                  - entity: alarm_control_panel.security_system
                    state_not: triggered
              - condition: state
                entity: input_boolean.sound_alarm_is_running
                state: 'on'
        chip:
          type: entity
          entity: sensor.wake_time_1
          icon: mdi:alarm
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: alarm
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--yellow);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
              .content {
                {{ 'animation: alarm 0.8s ease infinite;' if is_state('input_boolean.sound_alarm_is_running','on') }}
                transform-origin: 50% 90%;
              }
              @keyframes alarm {
                0%, 80%, 100% { transform: translateY(0); }
                10% { transform: translateY(-2px) rotate(-8deg); }
                20% { transform: translateY(-2px) rotate(9deg); }
                30% { transform: translateY(-2px) rotate(-5deg); }
                40% { transform: translateY(-2px) rotate(4deg); }
                50% { transform: translateY(0); }
                60% { transform: translateY(-1.2px) }
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.guest_room_is_alarm_on
            state: 'on'
          - entity: sensor.time_of_day
            state_not: day
          - entity: sensor.time_of_day
            state_not: morning
          - entity: alarm_control_panel.security_system
            state_not: armed_away
          - entity: alarm_control_panel.security_system
            state_not: triggered
          - condition: user
            users:
              - 4a8a45a495f54e808c3f4c4cd1639291
        chip:
          type: entity
          entity: sensor.guest_room_wake_time_1
          icon: mdi:alarm
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: guest-room-alarm
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--yellow);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
              .content {
                {{ 'animation: alarm 0.8s ease infinite;' if is_state('input_boolean.guest_room_sound_alarm_is_running','on') }}
                transform-origin: 50% 90%;
              }
              @keyframes alarm {
                0%, 80%, 100% { transform: translateY(0); }
                10% { transform: translateY(-2px) rotate(-8deg); }
                20% { transform: translateY(-2px) rotate(9deg); }
                30% { transform: translateY(-2px) rotate(-5deg); }
                40% { transform: translateY(-2px) rotate(4deg); }
                50% { transform: translateY(0); }
                60% { transform: translateY(-1.2px) }
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.raspberry_pi_health_attention
            state: 'on'
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: binary_sensor.raspberry_pi_health_attention
          icon_color: black
          icon: mdi:minidisc
          content_info: none
          tap_action:
            action: navigate
            navigation_path: wifi
          hold_action:
            action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-background: var(--red);
              --icon-color: var(--black);
              --text-color: black;
              padding: 0px!important;
              border-radius: 100px!impportant;
              --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: sensor.junglemoneynas_volume_1_status
            state_not: normal
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: sensor.junglemoneynas_volume_1_status
          icon_color: black
          icon: mdi:nas
          content_info: none
          tap_action:
            action: navigate
            navigation_path: nas
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--red);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: sensor.backup_state
            state_not: backed_up
        chip:
          type: entity
          entity: sensor.backup_state
          icon_color: black
          icon: mdi:cloud-alert-outline
          content_info: none
          tap_action:
            action: navigate
            navigation_path: wifi
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--red);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: binary_sensor.battery_health_attention
            state: 'on'
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: binary_sensor.battery_health_attention
          icon: mdi:battery-10
          icon_color: black
          content_info: none
          tap_action:
            action: navigate
            navigation_path: battery
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--red);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - condition: state
            entity: todo.arbeit
            state_not: '0'
          - condition: state
            entity: input_boolean.chores_grocery_shooping
            state: 'on'
          - condition: state
            entity: alarm_control_panel.security_system
            state_not: armed_night
        chip:
          type: entity
          entity: todo.arbeit
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: settings#shopping-popup
          icon: mdi:cart-outline
          double_tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--blue);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
          - condition: state
            entity: todo.julian
            state_not: '0'
        chip:
          type: entity
          entity: todo.julian
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: settings
          icon: mdi:list-status
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--purple);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: template
        entity: alarm_control_panel.security_system
        icon: >-
          {% if is_state('alarm_control_panel.security_system', 'armed_home') %}
            mdi:shield-home-outline
          {% elif is_state('alarm_control_panel.security_system', 'armed_away')
          %}
            mdi:shield-lock-outline
          {% elif is_state('alarm_control_panel.security_system', 'triggered')
          %}
            mdi:shield-alert-outline
          {% elif is_state('alarm_control_panel.security_system', 'armed_night')
          %}
            mdi:shield-moon-outline
          {% elif is_state('alarm_control_panel.security_system', 'disarmed') %}
            mdi:shield-off-outline
          {% else %}
            mdi:shield-alert-outline
          {% endif %}
        icon_color: black
        content: |-
          {% if is_state('alarm_control_panel.security_system', 'triggered') or
                is_state('alarm_control_panel.alexa_guard_431b6', 'triggered')  %}
                  TRIGGERED
                {% elif is_state('alarm_control_panel.security_system', 'armed_home') %}
                  Home
                {% elif is_state('alarm_control_panel.security_system', 'armed_night') %}
                  Night
                {% elif is_state('alarm_control_panel.security_system', 'armed_away') or
                is_state('alarm_control_panel.alexa_guard_431b6', 'armed_away') %}
                  Armed Away
                {% else %}
                  Error
                {% endif %}
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-background: {% if is_state('alarm_control_panel.security_system', 'armed_home') %} var(--green) {% elif is_state('alarm_control_panel.security_system', 'armed_night') %} var(--blue) {% else %} var(--red) {% endif %};
              --icon-color: var(--black);
              --text-color: black;
              padding: 0px!important;
              border-radius: 100px!impportant;
              --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - entity: group.window_sensors
            state: 'on'
        chip:
          type: entity
          entity: group.window_sensors
          icon_color: black
          tap_action:
            action: more-info
          content_info: none
          icon: mdi:window-open-variant
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--red);
                --icon-color: var(--black);
                --text-color: black;
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
      - type: template
        double_tap_action:
          action: call-service
          service: lock.lock
          data: {}
          target:
            entity_id: lock.flat_door
        entity: lock.flat_door
        icon: |-
          {% if is_state('lock.flat_door', 'locked') %}
            mdi:lock
          {% else %}
            mdi:lock-open
          {% endif %}
        icon_color: black
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-background: {{ 'var(--green)' if states('lock.flat_door') == 'locked' else 'var(--red)' }};
              --color: var(--black);
              padding: 0px!important;
              border-radius: 100px!impportant;
              --primary-text-color: var(--contrast20);
      - type: conditional
        conditions:
          - condition: state
            entity: binary_sensor.home_assistant_update
            state: 'on'
          - condition: user
            users:
              - 3eea636aa3de4c7f9c662ad29c6e92e0
        chip:
          type: entity
          entity: binary_sensor.home_assistant_update
          content_info: none
          icon_color: black
          tap_action:
            action: navigate
            navigation_path: update
          card_mod:
            style: |
              ha-card {
                --chip-background: var(--red);
                --icon-color: var(--black);
                padding: 0px!important;
                border-radius: 100px!impportant;
                --primary-text-color: var(--contrast20);
    alignment: end
    view_layout:
      grid-area: status
    card_mod:
      style: |
        ha-card {
          margin-top: 70px;
          --color: black;
        }
  - type: custom:button-card
    entity: |
      [[[
        if (user.name == "Julian") return "person.julian";
        else return "person." + user.name.toLowerCase();
      ]]]
    name: '[[[return "Hey, " + user.name +"!"]]]'
    label: |
      [[[
        if (entity.state == "home") return "Welcome home.";
        else return "See you later.";
      ]]]
    show_label: true
    icon: mdi:account
    show_entity_picture: true
    layout: icon_state_name2nd
    tap_action:
      action: navigate
      navigation_path: settings
      haptic: success
    styles:
      icon:
        - width: 40px
      img_cell:
        - justify-content: center
      name:
        - font-family: Helvetica
        - justify-self: end
        - color: var(--contrast20)
        - font-size: 14px
        - font-weight: 600
        - margin-top: '-16px'
        - margin-bottom: 2px
        - overflow: visible
        - padding-right: 20px
      card:
        - background-color: transparent
        - box-shadow: none
        - border-radius: 24px
        - border: 0
        - z-index: 1
        - margin-top: 60px
        - margin-bottom: 5px
      entity_picture:
        - border-radius: 50%
        - border: |
            [[[
              if (entity.state == 'home') {
                return '2px solid var(--green)';
              } else {
                return 'none';
              }
            ]]]
      label:
        - font-family: Helvetica
        - justify-self: start
        - color: var(--contrast20)
        - font-size: 12px
        - padding-right: 20px
      custom_fields:
        badge:
          - position: absolute
          - left: 38px
          - top: 5px
    custom_fields:
      badge:
        card:
          type: custom:button-card
          entity: '[[[ return entity.entity_id ]]]'
          show_icon: true
          show_name: false
          icon: mdi:home
          state:
            - value: home
              icon: mdi:home
              styles:
                card:
                  - background: var(--green)
            - value: not_home
              icon: mdi:home-export-outline
              styles:
                card:
                  - background: var(--red)
          styles:
            card:
              - border-radius: 50%
              - width: 16px
              - height: 16px
              - background: none
            icon:
              - color: black
              - width: 12px
    view_layout:
      grid-area: profile
view_layout:
  grid-area: header

6 Likes

Thank you.

I took your code and also what you wrote before that. And I did like this:
Itā€™s OKā€¦? Or is there another way

views:
  - type: custom:grid-layout
    title: Home
    layout:
      grid-template-columns: 120px 90%
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        "sidebar . main"
        "footer footer footer"
    cards: 
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 75px min-content auto 200px
          grid-template-rows: min-content
          grid-template-areas: |
            ". time status profile"
        view_layout:
          grid-area: header    
        cards:

It is not entirely correct. The first Grid for the homepage you can put underneath the home view. So if you click on edit on the view you can pick Grid and then add the layout code there. Hope that makes sense.

1 Like

Thanks, Iā€™ll try to play it.
One more little thing please

Can you please share the washing machine code? to this code.

                  entity: sensor.washing_machine_status
                  icon: |-
                    {% if is_state('sensor.washing_machine_status', 'Running') %}
                      mdi:washing-machine
                    {% elif is_state('sensor.washing_machine_status', 'Clean') %}
                      mdi:washing-machine-alert
                    {% elif is_state('sensor.washing_machine_status', 'Idle') %}
                      mdi:washing-machine
                    {% else %}
                      mdi:washing-machine-off
                    {% endif %}

Quick question. Did anybody already make the new section dashboards work with the rounded template?

how you made the pages bar up (or down) to disappear and can use this space ?

Someone succeeded to make sticky buttons? I need to add something before to raw configuration?

You can use kiosk mode for that. Get it form HACS.

Like this but only thing I canā€™t work out is how you have set up the sensor to record the ranges for both humidity and temperature

name: ā€˜{{ states(ā€œsensor.humidity_rangeā€) }}ā€™
state: ā€˜{{ states(ā€œsensor.temperature_rangeā€) }}ā€™

I have a sensor that states the minimum and the maximum for each temperature and humidity through helpers (combine state of multiple sensors) and then I have a template sensor set up like this:

{{ states('sensor.temperature_minimum') + " - " + states('sensor.temperature_maximum') + " Ā°C" }}```

Thanks for that, was trying to find out how to do that before asking but everything I found seemed really complicated and a lot of effort.

What do you use the input_boolean.notifications_julians_iphone for?

you succeeded to create with it sticky button card? did add something to the raw configuration? the Version from has is 0.1, not the new one he put here.

I did, made a toggle for hide this. but now struggeling with this

he explain how to create, with rounded theme. but I get it still on the top. I need to add something more?

1 Like