Customization of SoftUI

Share your Projects! Dashboards & Frontend
1

Hej!

I absolutely love the SoftUI theme and button styles, and I’m busy with configuring my dashboards to show this off. Right now Im trying to integrate the SoftUI remote; which looks a little better than my current setup. I am frustratingly close, but I can’t seem to get it to do what I want.

The code is as follows:

entities:
  - cards:
      - icon: 'mdi:power'
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px 10px 10px 155px
            - border-radius: 100px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_toggle
          entity: script.tv_toggle
        type: 'custom:button-card'    
    type: 'custom:hui-horizontal-stack-card'
  - cards:
      - entities:
          - cards:
              - icon: 'mdi:menu-up'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 69px
                    - box-shadow: none
                    - width: 50px
                    - height: 50px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: script.tv_arrow_up
                  entity: script.tv_arrow_up
                type: 'custom:button-card'    
            type: 'custom:hui-horizontal-stack-card'
          - cards:
              - icon: 'mdi:menu-left'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 10px
                    - box-shadow: none
                    - width: 50px
                    - height: 50px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: script.tv_arrow_left
                  entity: script.tv_arrow_left
                type: 'custom:button-card'
              - name: OK
                show_icon: false
                show_name: true
                style: |
                  ha-card {
                    box-shadow:
                        -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                  }
                styles:
                  card:
                    - width: 200px
                    - height: 50px
                    - border-radius: 100px
                    - background-color: var(--primary-background-color)
                  name:
                    - font-size: 20px
                    - font-weight: bold
                    - font-family: Helvetica
                    - letter-spacing: '-0.01em'
                tap_action:
                  action: call-service
                  service: script.tv_return
                  entity: script.tv_return
                type: 'custom:button-card'
              - icon: 'mdi:menu-right'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - box-shadow: none
                    - width: 50px
                    - height: 50px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: script.tv_arrow_right
                  entity: script.tv_arrow_right
                type: 'custom:button-card'
            type: 'custom:hui-horizontal-stack-card'
          - cards:
              - icon: 'mdi:menu-down'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 69px
                    - box-shadow: none
                    - width: 50px
                    - height: 50px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: script.tv_arrow_down
                  entity: script.tv_arrow_down
                type: 'custom:button-card'
            type: 'custom:hui-horizontal-stack-card'
        show_header_toggle: false
        style: |
          ha-card {
            box-shadow:
                inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3);
            border-radius: 30px;
            background-color: var(--primary-background-color)
          }
        type: 'custom:hui-entities-card'
    type: 'custom:hui-horizontal-stack-card'
  - show_icon: false
    show_name: false
    style: |
      ha-card {
        --ha-card-background: none !important;
        box-shadow: none !important;
      }
    styles:
      card:
        - width: 10px
        - height: 10px
    type: 'custom:button-card'
  - cards:
      - entities:
          - cards:
              - icon: 'mdi:minus'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 30px
                    - box-shadow: none
                    - width: 30px
                    - height: 30px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: script.sound_bar_sound_down
                  entity: script.sound_bar_sound_down
                type: 'custom:button-card'
              - name: VOL
                show_icon: false
                show_name: true
                styles:
                  card:
                    - margin-left: 50px
                    - box-shadow: none
                    - width: 30px
                    - height: 30px
                    - border-radius: 100px
                    - background-color: var(--primary-background-color)
                  name:
                    - font-size: 13px
                    - font-weight: bold
                    - font-family: Helvetica
                    - letter-spacing: '-0.01em'
                type: 'custom:button-card'
              - icon: 'mdi:plus'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 10px
                    - box-shadow: none
                    - width: 30px
                    - height: 30px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: script.sound_bar_sound_up
                  entity: script.sound_bar_sound_up
                type: 'custom:button-card'
            type: 'custom:hui-horizontal-stack-card'
          - cards:
              - icon: 'mdi:arrow-expand-down'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 30px
                    - box-shadow: none
                    - width: 30px
                    - height: 30px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  entity: switch.sonoff_1000ae39e0_1
                type: 'custom:button-card'
              - name: LIFT
                show_icon: false
                show_name: true
                styles:
                  card:
                    - margin-left: 10px
                    - box-shadow: none
                    - width: 30px
                    - height: 30px
                    - border-radius: 100px
                    - background-color: var(--primary-background-color)
                  name:
                    - font-size: 13px
                    - font-weight: bold
                    - font-family: Helvetica
                    - letter-spacing: '-0.01em'
                type: 'custom:button-card'
              - icon: 'mdi:arrow-expand-up'
                show_icon: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - margin-left: 10px
                    - box-shadow: none
                    - width: 30px
                    - height: 30px
                    - background-color: var(--primary-background-color)
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  entity: switch.sonoff_1000ae39e0_2
                type: 'custom:button-card'
            type: 'custom:hui-horizontal-stack-card'
        show_header_toggle: false
        style: |
          ha-card {
            background-color: var(--primary-background-color);
            border-radius: 15px;
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        type: 'custom:hui-entities-card'
    type: 'custom:hui-horizontal-stack-card'
  - cards:
      - icon: 'mdi:home'
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - margin-top: 10px
            - margin-left: 5px
            - width: 60px
            - height: 60px
            - border-radius: 15px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_home
          entity: script.tv_home
        type: 'custom:button-card'
      - icon: 'mdi:Netflix'
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - margin-top: 10px
            - margin-left: 8px
            - width: 60px
            - height: 60px
            - border-radius: 15px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_netflix
          entity: script.tv_netflix
        type: 'custom:button-card'
      - icon: 'mdi:amazon'
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - margin-top: 10px
            - margin-left: 8px
            - width: 60px
            - height: 60px
            - border-radius: 15px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_toggle
          entity: script.tv_toggle
        type: 'custom:button-card'
    type: 'custom:hui-horizontal-stack-card'
  - cards:
      - icon: 'mdi:home' #start of the second button rows  - these are now correct
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - margin-top: 10px
            - margin-left: 5px
            - width: 60px
            - height: 60px
            - border-radius: 15px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_home
          entity: script.tv_home
        type: 'custom:button-card'
      - icon: 'mdi:Netflix'
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - margin-top: 10px
            - margin-left: 8px
            - width: 60px
            - height: 60px
            - border-radius: 15px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_netflix
          entity: script.tv_netflix
        type: 'custom:button-card'
      - icon: 'mdi:amazon'
        show_icon: true
        show_name: false
        style: |
          ha-card {
            box-shadow:
                -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
          }
        styles:
          card:
            - margin-top: 10px
            - margin-left: 8px
            - width: 60px
            - height: 60px
            - border-radius: 15px
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: call-service
          service: script.tv_toggle
          entity: script.tv_toggle
        type: 'custom:button-card'
    type: 'custom:hui-horizontal-stack-card'
show_header_toggle: false
style: |
  ha-card {
    background-color: var(--primary-background-color);
    width: 300px;
    border-radius: 10px;
    margin: 10px auto;
    box-shadow:
        -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
  }
type: entities

which results in the following:

remote
remote1303×807 59 KB

I can’t seem to get the width right of three of the elements as shown in the picture. This is how it should look like, for those who don’t know:

remote_card_dark
remote_card_dark525×700 7.83 KB

Any help would be greatly appreciated!

Marnix

2

Which soft UI theme? The one I made? You can try !important, or setting the theme variable to something different.

3

This one right here!

I believe it has something to do with the indents; but i’m not sure.
I had to adapt it a little to run scripts instead of remote.send_command and needed some more buttons at the bottom. But other than that its copy paste from the github page

4

Aah, this one?

image
image843×172 8.44 KB

That’s the theme you use? I think that there are some invisible buttons that make it look that way.

5

I use the one from N-l1/. I set it up as a lovelace theme, and then apply again to cards used by this remote. Would that be a problem?

6

It sets ha-card-box-shadow. If you remove that and manually apply it to each card, it should work better.

7

That actually got me a lot closer to the end result!

Capture
Capture525×677 12.6 KB

I would like the universal theme to use the dark Soft UI though. I would need the stripped down version you mention?

8

What do you mean? N-L1 hasn’t made any Soft UI themes, they’ve made it possible to have stuff on cards if it’s labeled individually. I made a Soft UI theme, that you can set up like a regular Home Assistant theme. I think you’re confused. Can you provide a sample of code from your “universal theme”?

9

aha. yeah its seems that I was very confused.
I see that they have based their work on your theme… Sorry for that :slight_smile: --btw it looks awesome!

I’ve installed the theme via HACS; and as you have pointed out, that if the UI theme is set to the Soft UI, as well as in the cards (ha-card-box-shadow) then it mashes the card together…

Now what i’m looking to do is use the Soft UI and the remote. so i guess i need to change something in the theme?

10

Well, just make a copy of the theme. Delete the ha-card-box-shadow and card-mod-theme and everything below. Then set the theme to that copy (you’ll need to change the theme name).

11

Thanks! Ill try that at home and report back :slight_smile: