šŸŸ£ Rounded - Dashboard guide

It worked, thank you @matmann

1 Like

Hi all. I do have seen the template from panhans on Github and wanted to integrate this.
However Iā€™ll not be able to find the ui-lovelace.yaml as I have been using the editor most times.

One part of the Template are cards that are moved to a folder and should be included into the ui-lovelace.yaml. If I try to add this to the Dashboard with button_card_templates: !include_dir_merge_named ā€œui/templatesā€ Iā€™ll get the error that this is not possible.

Any other suggestion to add this?

I wanted to avoid creating the templates manually from within Home Assistant.

Thanks in advance.

Redirecting to template files/folders just works if have your dashboard in yaml mode and not visual (as most have).
You need to add the button code in the raw dashboard at the very top.

Hi All ,

Im hoping to find someone that can help rewrite this card in rounded way , i have created this mainly using stack in card and bubble card , it has swiper and drop down list with some action buttons



type: custom:stack-in-card
cards:
  - type: custom:bubble-card
    card_type: separator
    name: Xiaomi Air Purifier 4 Lite
    icon: mdi:air-purifier
    card_layout: normal
  - type: custom:swipe-card
    swiper_parameters:
      pagination:
        el: .swiper-pagination
        clickable: true
    cards:
      - type: glance
        title: null
        entities:
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_humidity
            name: Humidity
            icon: mdi:water-percent
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_motor_speed
            name: Motor Speed
            icon: mdi:speedometer
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_pm2_5
            name: PM2.5
            icon: mdi:cloud-outline
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_temperature
            name: Temperature
            icon: mdi:thermometer
        card_mod:
          style: |
            ha-card {
              background: transparent !important; /* Remove glance card background */
              border: none !important; /* Remove glance card border */
            }
      - type: glance
        title: null
        entities:
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_filter_lifetime_left
            name: Filter Lifetime Left
            icon: mdi:filter
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_filter_lifetime_remaining
            name: Filter Lifetime Remaining
            icon: mdi:filter-outline
          - entity: sensor.xiaomi_smart_air_purifier_4_lite_filter_use
            name: Filter Usage
            icon: mdi:filter-variant
        card_mod:
          style: |
            ha-card {
              background: transparent !important; /* Remove glance card background */
              border: none !important; /* Remove glance card border */
            }
  - type: custom:bubble-card
    card_type: button
    card_layout: large
    button_type: name
    show_icon: false
    show_name: false
    sub_button:
      - name: Power
        icon: mdi:power
        show_background: true
        tap_action:
          action: toggle
        entity: fan.xiaomi_smart_air_purifier_4_lite
      - name: Buzzer
        entity: switch.xiaomi_smart_air_purifier_4_lite_buzzer
        icon: mdi:volume-high
        tap_action:
          action: toggle
      - entity: switch.xiaomi_smart_air_purifier_4_lite_child_lock
        name: Child Lock
        show_state: false
        icon: mdi:lock
        tap_action:
          action: toggle
      - name: Preset Mode
        icon: ''
        tap_action:
          service: input_boolean.toggle
          target:
            entity_id: fan.xiaomi_smart_air_purifier_4_lite
          action: toggle
        show_icon: true
        show_arrow: false
        show_name: false
        show_attribute: false
        show_state: false
        show_background: true
        show_last_changed: false
    styles: >-
      .card-content {
        width: 100%;
        margin: 0 !important;
      }


      .bubble-button-card-container {
        background: none;
      }


      .bubble-sub-button-container {
        width: 100%;
        justify-content: space-between !important;
      }


      .bubble-sub-button-2 {
        background-color: none !important;
      }


      /* Change volume button icon to mute when triggered */

      ${subButtonIcon[1].setAttribute("icon",
      hass.states['switch.xiaomi_smart_air_purifier_4_lite_buzzer'].state ===
      'on' ? 'mdi:volume-high' : 'mdi:volume-off')}


      /* Change lock button icon to unlock when triggered */

      ${subButtonIcon[2].setAttribute("icon",
      hass.states['switch.xiaomi_smart_air_purifier_4_lite_child_lock'].state
      === 'on' ? 'mdi:lock' : 'mdi:lock-open')}


      /* Change preset mode icon based on the fan's preset_mode attribute */
        ${subButtonIcon[3].setAttribute("icon", hass.states['fan.xiaomi_smart_air_purifier_4_lite'].attributes.preset_mode === 'Favorite' ? 'mdi:heart-outline' : (hass.states['fan.xiaomi_smart_air_purifier_4_lite'].attributes.preset_mode === 'Auto' ? 'mdi:refresh-auto' : 'mdi:weather-night'))}

        
    auto_order: false
    entity: input_select.air_purifier_preset
    icon: ''

1 Like

Has anyone had any issues recently the bottom navigation bar? I added it my theme and went through reloading the themes, restarted HA, but still no dice. Any guidance would be appreciated.

can you share this dashboard code? please? im interested security section

Hi,

i have same problemā€¦ any fix?
image
i have not edited yaml
i have installed this theme via HACS

if I uncheck this the problem is solved.
How do I insert it into the theme?
this is google chromeā€™s ā€œinspect elementā€.

image

<div style="--row-size: 1;" class="card fit-rows full-width "> <!--?lit$715172238$--> </div>
@LE0N