🟣 Rounded - Dashboard guide

[beecho01 (James Beeching)]

Based on the energy cost buttons that @mjinx27 has in his tablet view. I have created the following:

type: grid
columns: 2
square: false
cards:
  - type: custom:button-card
    color_type: label-card
    layout: label
    show_name: false
    show_state: false
    show_units: false
    show_label: true
    show_icon: true
    entity: sensor.james_energy_cost_daily
    icon: fas:bolt
    label: |
      [[[
        return 'Today £' + states['sensor.james_energy_cost_daily'].state ;
      ]]]
    aspect_ratio: 3/1
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      icon:
        - width: 9px
        - top: 0%
      img_cell:
        - justify-content: flex-end
      grid:
        - grid-template-areas: '"i l"'
        - grid-template-columns: min-width min-width
        - height: 20px
      card:
        - background-color: var(--yellow)
        - padding: 20px
      label:
        - font-size: 14px
        - margin-left: 5%
        - justify-self: flex-start
  - type: custom:button-card
    color_type: label-card
    layout: label
    show_name: false
    show_state: false
    show_units: false
    show_label: true
    show_icon: true
    icon: fas:plug
    entity: sensor.james_power_usage
    label: |
      [[[
        return 'Currently ' + states['sensor.james_power_usage'].state + 'W';
      ]]]
    aspect_ratio: 3/1
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      icon:
        - width: 9px
        - top: '-10%'
      img_cell:
        - justify-content: flex-end
      grid:
        - grid-template-areas: '"i l"'
        - grid-template-columns: min-width min-width
        - height: 20px
      card:
        - background-color: var(--red)
        - padding: 20px
      label:
        - font-size: 14px
        - margin-left: 5%
        - justify-self: flex-start

Hope its of use to someone!

[kajmaj]

Hi, after update to 2023.5.1 if I use “bottom tabbar” there is back an empty space in the place where top navbar was located. And “bottom tabbar” overlaps part of cards on the bottom of my view.
With 2023.4 it was fine the issue emerged after update to 2023.5.

This is config functional before update:

  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContainer {
        display: flex;
        justify-content: center;
      }
      
    .: |

      /* ___________ Bottom tabbar ___________  */

      #view {
        margin-top: 0 !important;
      }
      .header {
        top: auto !important;
        bottom: 0 !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: 80px !important;
        padding: 4px 4px 16px 4px !important;
      }

      /* This hides the help button, menu button and title */
      a.menu-link[target="_blank"], ha-button-menu, [main-title] {
        display: none !important;
      }
      
      ha-menu-button, ha-icon-button {
        display: none !important;
      } 

      ha-tabs: {
        height: var(--header-height);
        --paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
        color: var(--app-header-text-color) !important;
      }
      paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
        color: var(--button-card-background-color-on) !important;
      }

      /* Color selected tabs */
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--primary-color) !important;
      }

Any idea how to solve it?

[schmierlappe]

what happened if your try this in the theme rounded.yaml

masonry-view-card-margin: 0px 20px

dont forget to reload the theme through dev tools

[kajmaj]

A little bit better on some views, but empty space on the top is still there.

Edit:
It changed gaps between cards so my views look weird. It means masonry-view-card-margin: 0px 20px does not solve this case

[CM000n (Simon)]

I have also noticed some changes since 2023.5. The bottom bar is now transparent again, but not blurred. In addition, the bottom bar feels higher and the distance between the page content and the top feels increased.

[schmierlappe]

try adding padding-top to #view section in your theme yaml

    #view {
      margin-top: 0px !important;
      padding-top: 0px !important;
    }

[kajmaj]

Yes !!! It is it. Thank you

As usual - I did not see it

[Nicone (Niko)]

I have the same problem like @CM000n. The bottom bar is much higher and covers even the “add card” button. The solution provided by @schmierlappe unfortunately doesn’t work for this problem.

Any suggestions to solve this issue would be highly appreciated!

[CM000n (Simon)]

I have fixed it again for myself. The bottom bar now has an acceptable size again and is blurred
homeassistant/rounded.yaml at main · CM000n/homeassistant · GitHub

[Arroma]

HI! Thanks for your code, it works perfectly!
I would like to ask you for a little help, on my theme I put the minimalist theme navbar.
However, I would like to put the blur effect there too, but I’m not capable of it … could you help me?

  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
      }
    .: |
      /* ___________ Bottom tabbar ___________  */
      div#view{
        transform: initial;
        padding: 0 !important;
        position: fixed !important;
        margin: 0 !important;
        width: 100%;
      }
      .header {
        top: auto !important;
        bottom: 0px !important;
        transform: translate3d(0px, 0px, 0px) !important;
        backdrop-filter: blur(50px) !important;
        -webkit-backdrop-filter: blur(50px) !important;
        -moz-backdrop-filter: blur(50px);
        -o-backdrop-filter: blur(50px);
        -ms-backdrop-filter: blur(50px);
        background-color: rgba(var(--contrast1-RGB),0.6) !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: var(--header-base-height) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        background-color: rgba(0,0,0,0) !important;
      }
      #view {
        margin-top: calc(-1 * var(--header-height)) !important;
        padding-bottom: var(--header-height);
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
        --mdc-icon-size: 26px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        height:50px !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--header-active-tab-color);
        background-color: var(--header-active-tab-bg-color);
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 25px;
        height:50px;
        /*width: calc(100% / 4);
        padding: 0;*/
        padding-left: 20px;
        padding-right: 20px;
      }

      ha-menu-button, ha-button-menu {
        color: var(--contrast10);
      }

[mjinx27]

Hi, apologies for the late reply, only just seen this Will clean up my code and upload to Github soon

[Harsh_Tone (Anthony)]

Is there anyone that can lend a hand? I’m trying to recreate this in my HA but I’m running into trouble with a specific slider card where the gradient in the background isn’t much of a gradient so the color looks solid.

type: custom:button-card
name: Living Room Strip
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: light.hue_gradient_lightstrip_1
      colorMode: brightness
      styles:
        container:
          - border-radius: 100px
          - overflow: visible
          - background: none
        card:
          - height: 40px
          - padding: 0 20px
          - background: var(--brightness)
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: var(--black)
          - top: 2px
          - right: '-18px'
          - height: 36px
          - width: 36px
          - border-radius: 100px
styles:
  grid:
    - grid-template-areas: '"n" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: var(--brightness-tint)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 12px 0
    - color: var(--contrast20)

[jessevd (Jesse)]

I think this might be due to your display settings. The change in color is minimal, but seems to be exactly the same as in the pictures of le0n.

[jessevd (Jesse)]

Did you manage to remove the gap at the top? If so, how did you? Thanks!

[CM000n (Simon)]

Exactly as @schmierlappe has already described it:

Rounded - Dashboard guide

try adding padding-top to #view section in your theme yaml #view { margin-top: 0px !important; padding-top: 0px !important; }

[Proche72 (Jiri Pragr)]

Hi, I am using the part of the theme for moving the tapbar. But after the update I have the tapbar overlaping my cards:

How can I fix this? I tried adjusting height but it won’t help. I think I need to prolong the space for the cards and not just change size of tapbar.

[andreadannibale (Andrea)]

me too… anyone have solution?

[RaA11]

not the best solution… i’m using the custom gap card at the end of the view.

GitHub - thomasloven/lovelace-gap-card: A lovelace card that does nothing and looks like nothing. Incredibly useful! No, really.

[Arroma]

For those who want, I made a pill for states of garbage + alarm (or whatever you want)

it’s meant for black background, so i didn’t use var(–contrast)

type: grid
square: false
columns: 2
cards:
  - type: custom:stack-in-card
    mode: horizontal
    keep:
      margin: true
      border_radius: true
      background: true
      outer_padding: false
    card_mod:
      style: |
        ha-card {
          background-color: #2b2b2b;
          border-radius: 25px;
          }
    cards:
      - type: custom:button-card
        name: '[[[return states["calendar.trash"].attributes.message]]]'
        show_label: false
        show_icon: false
        entity: calendar.trash
        tap_action:
          action: more-info
          haptic: light
        styles:
          card:
            - background: '#2b2b2b'
            - font-weight: 500
            - line-height: 18px
            - border-radius: 24px
            - padding: 6px 10px
            - font-size: 12px
            - box-shadow: none
          name:
            - color: '#EAEDF6'
            - font-family: Poppins
          label:
            - color: '#777A83'
        state:
          - value: 'on'
            styles:
              card:
                - background: var(--white2)
              name:
                - color: var(--black)
          - value: 'off'
            name: Empty
            styles:
              name:
                - color: var(--white8)
      - type: custom:button-card
        name: Alarm
        show_label: false
        show_icon: false
        entity: alarm_control_panel.alarm
        tap_action:
          action: more-info
          haptic: light
        styles:
          card:
            - background: '#2b2b2b'
            - font-weight: 500
            - line-height: 18px
            - border-radius: 24px
            - padding: 6px 10px
            - font-size: 12px
            - box-shadow: none
          name:
            - color: var(--black8)
            - font-family: Poppins
        state:
          - value: disarmed
            name: Alarm
            styles:
              card:
                - background: var(--green)
              name:
                - color: var(--black)
          - value: armed_home
            name: At home
            styles:
              card:
                - background: var(--red)
              name:
                - color: var(--black)
                - justify-self: center
          - value: armed_away
            name: Away
            styles:
              card:
                - background: var(--red)
              name:
                - color: var(--black)
          - value: armed_night
            name: Night
            styles:
              card:
                - background: var(--red)
              name:
                - color: var(--black)
          - value: armed_vacation
            name: Holiday
            styles:
              card:
                - background: var(--red)
              name:
                - color: var(--black)
          - value: armed_custom_bypass
            name: Bypass
            styles:
              card:
                - background: var(--red)
              name:
                - color: var(--black)

[mzus]

Did you solve it? I’m stuck at the same issue.

I really love the design, great work!

It is the first dashboard I am trying to set up and so far so good. But I can’t get the tapbar to the bottom of the screen. I already tried the current Beta version as well as the last Rounded.yaml posted by @CM000n .

My Rounded.yaml looks currently like this:

Rounded:
  ########################################################
  ############### Default global variables ###############
  ########################################################

  # Spacings and radius
  horizontal-stack-card-margin: 0px 8px
  vertical-stack-card-margin: 8px 0px
  grid-card-gap: 16px
  ha-card-border-width: "0px" # Removes default 1px line
  ha-card-border-radius: 24px
  masonry-view-card-margin: 40px 20px
  # Main Interface Colors
  primary-color: var(--blue)
  accent-color: var(--blue)
  primary-background-color: var(--contrast1)
  secondary-background-color: var(--contrast2)
  divider-color: var(--contrast3)
  # Text
  primary-text-color: var(--contrast20)
  secondary-text-color: var(--contrast9)
  text-primary-color: var(--contrast20)
  disabled-text-color: var(--contrast6)
  text-accent-color: var(--contrast1)
  # Header:
  app-header-background-color: var(--contrast1)
  app-header-text-color: var(--contrast20)
  app-header-selection-bar-color: transparant
  app-header-edit-background-color: var(--contrast2)
  app-header-edit-text-color: var(--contrast20)
  # Cards
  card-background-color: var(--contrast2)
  ha-card-background: var(--contrast2)
  ha-card-border-color: var(--contrast6)
  paper-listbox-background-color: var(--contrast3)
  # Tile card
  state-unavailable-color: var(--contrast6)
  state-light-off-color: var(--contrast10)
  state-light-on-color: var(--yellow)
  # Sidebar Menu
  sidebar-icon-color: var(--contrast6)
  sidebar-text-color: var(--contrast20)
  sidebar-background-color: var(--contrast2)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)
  # Buttons
  paper-item-icon-color: var(--contrast9)
  mdc-button-outline-color: var(--contrast6)
  # States and Badges
  state-icon-color: var(--contrast9)
  # Sliders
  paper-slider-knob-color: var(--contrast20)
  paper-slider-knob-start-color: var(--contrast15)
  paper-slider-pin-color: var(--contrast5)
  paper-slider-pin-start-color: var(--contrast4)
  paper-slider-active-color: var(--contrast15)
  paper-slider-secondary-color: var(--contrast7)
  paper-slider-container-color: var(--contrast5)
  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--green)
  switch-unchecked-button-color: var(--contrast9)
  switch-unchecked-track-color: var(--contrast6)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--contrast2)
  table-row-alternative-background-color: var(--contrast3)
  data-table-background-color: var(--contrast1)
  mdc-text-field-fill-color: var(--contrast3)
  # Input
  input-fill-color: var(--contrast3)
  input-dropdown-icon-color: var(--contrast9)
  material-background-color: var(--contrast2)
  input-ink-color: var(--contrast20)
  input-label-ink-color: var(--contrast9)
  input-idle-line-color: var(--contrast7)
  input-hover-line-color: var(--contrast20)
  mdc-select-fill-color: var(--input-fill-color)
  mdc-select-ink-color: var(--input-ink-color)
  mdc-select-label-ink-color: var(--input-label-ink-color)
  mdc-select-idle-line-color: var(--input-idle-line-color)
  mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
  mdc-select-hover-line-color: var(--input-hover-line-color)
  mdc-text-field-disabled-fill-color: var(--contrast3)
  # Modal screen
  mdc-theme-surface: var(--contrast2)
  # Checkboxes
  mdc-checkbox-unchecked-color: var(--contrast15)
  # Colors
  orange-color: var(--orange)
  green-color: var(--green)
  blue-color: var(--blue)
  red-color: var(--red)
  purple-color: var(--purple)
  yellow-color: var(--yellow)
  grey-color: var(--contrast10)

  #######################################################
  ############### Custom global variables ###############
  #######################################################

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
  # Color RGB variables
  purple-rgb: 239, 177, 255
  yellow-rgb: 255, 218, 120
  orange-rgb: 255, 181, 129
  red-rgb: 255, 145, 138
  green-rgb: 206, 245, 149
  blue-rgb: 144, 191, 255
  # Gradient RGB variables
  brightness-low-rgb: 232, 176, 29
  brightness-high-rgb: 255, 211, 94
  temperature-low-rgb: 177, 197, 255
  temperature-high-rgb: 255, 175, 131
  # Contrast variables
  black1: "#000000"
  black2: "#111318"
  black3: "#171A21"
  black4: "#1C1F27"
  black5: "#262A35"
  black6: "#353946"
  black7: "#434856"
  black8: "#535865"
  black9: "#636774"
  black10: "#777A83"
  white10: "#898C94"
  white9: "#969AA6"
  white8: "#A4A9B6"
  white7: "#B3B8C6"
  white6: "#C3C8D5"
  white5: "#D4D8E2"
  white4: "#E1E5EF"
  white3: "#EAEDF6"
  white2: "#F4F6FB"
  white1: "#FFFFFF"

  ########################################################
  ############### Variables based on modes ###############
  ########################################################

  modes:
    dark:
      # Black white contrats
      contrast1: var(--black1)
      contrast2: var(--black2)
      contrast3: var(--black3)
      contrast4: var(--black4)
      contrast5: var(--black5)
      contrast6: var(--black6)
      contrast7: var(--black7)
      contrast8: var(--black8)
      contrast9: var(--black9)
      contrast10: var(--black10)
      contrast11: var(--white10)
      contrast12: var(--white9)
      contrast13: var(--white8)
      contrast14: var(--white7)
      contrast15: var(--white6)
      contrast16: var(--white5)
      contrast17: var(--white4)
      contrast18: var(--white3)
      contrast19: var(--white2)
      contrast20: var(--white1)
      # Color tint transparancy
      color-tint: "0.15"
      # Contrast RGB variables
      contrast1-RGB: 0,0,0

    light:
      # Black white contrats
      contrast1: var(--white1)
      contrast2: var(--white2)
      contrast3: var(--white3)
      contrast4: var(--white4)
      contrast5: var(--white5)
      contrast6: var(--white6)
      contrast7: var(--white7)
      contrast8: var(--white8)
      contrast9: var(--white9)
      contrast10: var(--white10)
      contrast11: var(--black10)
      contrast12: var(--black9)
      contrast13: var(--black8)
      contrast14: var(--black7)
      contrast15: var(--black6)
      contrast16: var(--black5)
      contrast17: var(--black4)
      contrast18: var(--black3)
      contrast19: var(--black2)
      contrast20: var(--black1)
      # Color tint transparancy
      color-tint: "0.20"
      # Contrast RGB variables
      contrast1-RGB: 255,255,255

  card-mod-theme: "Rounded"
  card-mod-view-yaml: |
    hui-masonry-view:
      $: |
        /* Swipecard full width on mobile */
        @media screen and (max-width: 599px) {
          #columns .column swipe-card {
            margin-left: -4px;
            margin-right: -4px;
          }
        }
  card-mod-card-yaml: |
    .: |
      /* General changes */
      ha-card {
        transition: none !important;
        font-family: 'hk nova semibold', 'Roboto', 'Noto', sans-serif !important;
      }
      /* Vacuum card load transition disabled */
      .type-custom-xiaomi-vacuum-map-card {
        transition: none !important;
      }
      /* Graph card style */
      .graph {
        background: var(--blue-tint);
        display: flex;
        overflow: hidden; /* Temporary fix for graph overflow bug */
      }
      .graph .name {
        font-size: 12px;
        line-height: 18px;
        background: var(--black);
        color: var(--white);
        padding: 6px 10px;
        border-radius: 100px;
        z-index: 1;
      }
      .graph .icon {
        display: none;
      }
      .graph .info {
        margin-top: 0;
        padding: 24px 24px 0 24px;
        order: 1;
      }
      .graph hui-graph-header-footer {
        order: 3;
      }
      .graph .header {
        padding: 0 24px;
        order: 2;
        margin: 4px 0 -16px 0;
        z-index: 1;
      }
      /* Entities card style */
      .type-entities {
        background: none;
      }
      .type-entities .card-header {
        padding: 0 0 12px 0;
      }
      .type-entities .card-content {
        padding: 0;
      }
  card-mod-root-yaml: |
    .: |
      /* ___________ Bottom tabbar ___________  */
      #view {
        margin-top: 0 !important;
        padding-top: 0px !important;
      }
      .header {
        top: auto !important;
        bottom: 0;
        transform: translate3d(0px, 0px, 0px) !important;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        -moz-backdrop-filter: blur(50px);
        -o-backdrop-filter: blur(50px);
        -ms-backdrop-filter: blur(50px);
        background-color: rgba(var(--contrast1-RGB),0.6) !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: 60px !important;
        padding: 4px 8px 20px 8px;
        background-color: rgba(0,0,0,0) !important;
      }
      paper-tab {
        color: var(--contrast10);
        border-radius: 16px;
      }
      paper-tab.iron-selected {
        color: var(--contrast20);
      }
      ha-menu-button, ha-button-menu {
        color: var(--contrast10);
      }
  card-mod-row: |
    /* Entities card row style */
    :host {
        display: block;
        background: var(--contrast2);
        border-radius: 24px;
        padding: 6px 12px 6px 6px;
    }

Any help is highly appreciated!