Lovelace Soft UI - Simple and Clean Lovelace Configuration

TommyWelle · January 9, 2021, 1:48am

I use this one, but I was hoping to use it without the sun. Sun. Only dark but with the same style when I click the button.

Example entry

entity: light.example # Change this to the entity you want to control
icon: ‘mdi:lamp’ # Change this to the icon you want to display
show_icon: true
show_name: false
styles:
card:
- width: 60px
- height: 60px
- margin: 10px
- border-radius: 15px
- box-shadow: |
[[[ return states[‘sun.sun’].state == ‘below_horizon’
? ‘-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)’
: ‘-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)’;
]]]
- background-color: var(–primary-background-color)
icon:
- color: var(–primary-text-color)
state:

value: ‘on’
styles:
card:
- box-shadow: |
[[[ return states[‘sun.sun’].state == ‘below_horizon’
? ‘inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3)’
: ‘inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035)’;
]]]
icon:
- color: var(–paper-item-icon-active-color)
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
type: ‘custom:button-card’

KTibow · January 9, 2021, 1:49am

Please use the </> button.

TommyWelle · January 9, 2021, 1:51am

# Example entry
entity: light.example # Change this to the entity you want to control
icon: 'mdi:lamp' # Change this to the icon you want to display
show_icon: true
show_name: false
styles:
  card:
    - width: 60px
    - height: 60px
    - margin: 10px
    - border-radius: 15px
    - box-shadow: |
        [[[ return states['sun.sun'].state == 'below_horizon'
          ? '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
          : '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
        ]]]
    - background-color: var(--primary-background-color)
  icon:
    - color: var(--primary-text-color)
state:
  - value: 'on'
    styles:
      card:
        - box-shadow: |
            [[[ return states['sun.sun'].state == 'below_horizon'
              ? 'inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3)'
              : 'inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035)';
            ]]]
      icon:
        - color: var(--paper-item-icon-active-color)
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
type: 'custom:button-card'

KTibow · January 9, 2021, 1:53am

Change

    - box-shadow: |
        [[[ return states['sun.sun'].state == 'below_horizon'
          ? '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
          : '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
        ]]]

to

    - box-shadow: -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)

TommyWelle · January 9, 2021, 1:53am

Thank you

TommyWelle · January 9, 2021, 7:57am

Should i replace this also?

state:
  - value: 'on'
    styles:
      card:
        - box-shadow: |
            [[[ return states['sun.sun'].state == 'below_horizon'
              ? 'inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3)'
              : 'inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035)';
            ]]]

Minglarn · January 9, 2021, 9:11am

Must have missed your reply…
I don’t use card-mod at all… In this UI there is no mods at all.

KTibow · January 9, 2021, 2:32pm

The theme applies card-mod all on its own. You must somehow have it installed; the cards wouldn’t look like that if card-mod wasn’t there.

KTibow · January 9, 2021, 2:32pm

Replace that too.

Minglarn · January 9, 2021, 9:19pm

You were right.
After removing the card it worked out of the box.
Nice. Thanks for the tip.

bhuvan · January 11, 2021, 2:57am

Hi

Thank you guys for this Soft UI.

how to change the icon from ‘mdi:door’ to ‘door-open’ for this custom card if state changes.

entity: sensor.main_door_c
icon: 'mdi:door'
name: Main door
size: 30%
styles:
  img_cell:
    - padding-left: 25px
    - justify-content: start
  card:
    - width: 'min(25vw, 100px)'
    - height: 'min(25vw, 100px)'
    - border-radius: 15px
    - border-style: solid
    - border-color: var(--primary-background-color)
    - border-width: 1px
    - margin: 10px
    - box-shadow: '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
    - background-color: var(--primary-background-color)
  icon:
    - color: var(--primary-text-color)
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px
show_state: true
state:
  - value: violated
    styles:
      card:
        - border-width: 2px
        - box-shadow: '-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)'
        - border-color: var(--paper-item-icon-active-color)
      icon:
        - color: var(--paper-item-icon-active-color)
type: 'custom:button-card'

a|393x321

i just changed the light button to a door sensor.

And also how to stack cards horizontally.

KTibow · January 11, 2021, 2:58am

Couldn’t you just remove the custom icon and set device_class?

bhuvan · January 11, 2021, 3:19am

Sorry i am very new to HA or any coding.
Do i remove the icon in the above code and instead add
device_class : door

KTibow · January 12, 2021, 1:18am

Remove the icon in the code. Don’t add it into the button card.

Twours · January 14, 2021, 5:29am

Anyone figure out how to make the side bar scroll able? I have a few rooms and it would be cool if you could scroll up and down to have a list of rooms.

KTibow · January 14, 2021, 2:34pm

Could you clarify? Mockup?

CedricRBR · February 2, 2021, 1:30pm

This looks absolutely amazing! Love the color scheme of the buttons.

How do you handle the Downstairs, Upstairs and Media buttons ? Do you use a modified sidebar or are these button-cards with navigate actions ? (if so, how do you tell which button to keep depressed?)

KTibow · February 2, 2021, 2:44pm

I was working on something, but gave up on it. I had multiple tabs, and all of the buttons were navigate actions. They were hard-coded to be pressed based on which tab.

hazio · March 10, 2021, 7:03pm

Can the light template be simplified instead of naming each entity?

KTibow · March 10, 2021, 8:40pm

What do you mean? You can create a template sensor instead, and just reference that.