🟣 Rounded - Dashboard guide

[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!

[RaA11]

Hi,

This is what I’m using:

  ########################################################
  ############### 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)
  pink-color: var(--pink)
  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))
  pink: rgb(var(--pink-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))
  pink-tint: rgba(var(--pink-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
  pink-rgb: 255, 153, 204
  # 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-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;
    }

Hope it will help you

[jessevd (Jesse)]

That unfortunately didn’t do it for me. I asked chatGPT and man, that is a solution to a lot!

[beecho01 (James Beeching)]

Have you tried clearing the browser cache. I’ve had similar issues before and that’s helped.

[itinerantmarshmallow]

Hi @CM000n,

Is it possible to split the templates from the dashboard YAML do you know?

I was trying something like:

default_templates: !include cards/rounded/rounded_templates.yaml

But that doesn’t work to include them in a separate dashboard file.

[CM000n (Simon)]

No, yaml Anchors are only working inside the same .yaml file. You can’t add them via !include

[panhans]

Put this on top of your dashboard yaml:

button_card_templates: !include_dir_merge_named "path/to/template_directory"

I did my own templates and some custom cards based on this project. Thank btw.

[itinerantmarshmallow]

Those cards are beautiful.

Really well done.

Also as CM00n’s cards aren’t button templates I couldn’t get anything to work. I’ve pivoted but the exercise was useful for figuring out how stuff work.

[PaNiCo]

Your dashboard is stunning!
I would love to see how you did this :grinning
Any chance of letting us peek in your code?

[panhans]

I can upload my templates into my github. Maybe it needs a little bit polish and documentation for make it more reliable and multilingual.

[PaNiCo]

That would be awesome!
I can polish it myself and the language ain’t a problem (we learn German at school in Holland )

[panhans]

Here you are: homeassistant/rounded at main · panhans/homeassistant · GitHub

If you have questions simply ask. Maybe it needs a little bit of documentation.

//Edit: I did some updates for language support. Just create your own language yaml in template directory and switch the template of the base.yaml

Here are some examples:

- type: 'custom:button-card'
  template: pill
  entity: sensor.processor_use
  label: "%"

- type: custom:button-card
  template:
  - sensor
  - background_color
  variables:
    background_color: green # delete variable if you want random color
  name: SSD
  entity: sensor.disk_use_percent

- type: 'custom:button-card'
  template: caption
  name: Caption
  label: Label

- type: 'custom:button-card'
  template:
  - sensor
  - background_color
  - extra_status
  entity: sensor.one_sensor
  variables:
    extra_status: sensor.another_sensor

 - type: 'custom:button-card'
   name: Script name
   template:
   - button_script
   - background_color
   entity: script.your_script

- type: 'custom:button-card'
  template: input_number
  entity: input_number.your_input_number

- type: 'custom:button-card'
  template: 
  - sensor
  - background_color
  variables:
    background_color: green
  entity: input_datetime.your_input_date_time

- type: 'custom:button-card'
  entity: calendar.your_calendar
  template: calendar

- type: 'custom:button-card'
  template: person
  entity: person.any_person

- type: 'custom:button-card'
  entity: alarm_control_panel.your_alarm_entity
  template: alarm
  name: House alarm

- type: custom:button-card
  template:
  - sensor
  - background_color
  entity: sensor.roborock_vacuum_last_clean_end
  name: Ende der letzten Reinigung
  variables: 
    force_date: true #activate if status is date but entity has no attribute for e.g. has_time