Lovelace Soft UI - Simple and Clean Lovelace Configuration

Tags: #<Tag:0x00007f7399528ca8>

Amazing thanks!

I may just install this lovelace. I like simple.

This looks amazing - between everyone’s hard work and little bit of personal tweaking my dashboard is looking super slick.

5 Likes

Great, very nice! How did you color the border around your cards?

Thanks! – Almost my entire dashboard is built with custom button cards and I make heavy use of templates. In some ways this probably makes things harder than they need to be, but my previous setup was already setup this way.

Light entities point to a ‘light’ template that says to change the border when the state is on. And my other entities that require different colors in my set up also have their own template(s).

Lovelace yaml entry:

- entity: switch.kitchen_overhead
  icon: 'mdi:track-light'
  name: Ceiling
  template: light
  type: 'custom:button-card'

And my button template is as follows:

button_card_templates:
  light:
    template: base
    state:
      - value: 'on'
        styles:
          card: [border-color: var(--primary-yellow), border-width: 3px, box-shadow: var(--ha-card-box-shadow-inset)]
          icon: [color: var(--primary-yellow)]
          state: [color: var(--dark-primary-yellow)]
          name: [color: var(--dark-primary-yellow)]
2 Likes

hello my friends,
have setup this in yaml but text size looks a bit… odd :laughing:
What have i done wrong?

Possible causes:

  • Card-mod is uninstalled
  • You aren’t using the right styling code - make sure to choose the right style code based on your HA version
  • You’re using the night theme during daytime. If you always use dark mode, just use that for the shadows.

Another self-promotion: if you use the theme(s) I made, the shadows should match the theme automatically…

Installed your theme and it looks much better. Thanks for your tip

What did you mean with this?
Still got problems with font and size

What version are you using? Here’s code for 0.110 and lower:

# Example entry
content: |
  # Enter what you want to display here
style: |
  ha-card {
     --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
     box-shadow: 2px 2px rgba(0,0,0,0.0);
  }
  h1 {
    font-size: 20px;
    font-weight: bold;
    font-family: Helvetica;
    letter-spacing: '-0.01em';
  }
type: markdown

Here’s code for later:

# Example entry
content: |
  # Enter what you want to display here
style:
  .: |
    ha-card {
      --ha-card-background: none !important;
      box-shadow: none !important;
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 20px;
        font-weight: bold;
        font-family: Helvetica;
        letter-spacing: '-0.01em';
      }
type: markdown
1 Like

Ah, now it works. Great. Thanks again

Is the video tutorial in the works? I so want to set this up but afraid it will go down south.

@hawk
Very nice looking setup. Do you have this in github. This would be a great starter setup.

Thanks, almost working it’s missing your base template, want to share that one also?

sure thing - most of it can probably be removed (or tweaked to your liking) as this just sets up the button grid and sets the general style for when the button isn’t active.

base:
    aspect_ratio: 1/1
    size: 80%
    show_state: 'on'
    styles:
      card: [font-family: 'Google Sans, Roboto', font-weight: 500, border-style: solid, border-color: '#F5F5F5', border-width: 1px]
      grid:
        - grid-template-areas: '"i i . ." "i i . ." ". . . ." "n n n n" "s s s s"'
        - grid-template-columns: 1fr 1fr 1fr 1fr
        - grid-template-rows: 1fr 1fr .25fr .75fr .75fr
        - padding: 14px
      name: [justify-self: start, font-size: 20px, font-weight: 400, align-self: center, color: var(--primary-name-text-color)]
      state: [justify-self: start, font-size: 16px, font-weight: 500, align-self: center, color: var(--primary-state-text-color)]
      icon: [color: var(--primary-icon-color), justify-self: start, align-self: start]

EDIT:
There are a few CSS call outs that are custom in my code as well which I set in the theme yaml. My var(–primary-name-text-color) and similar are just various shades of light grey.

Hey! I unfortunately am pretty new to this side of tinkering, so I have nothing there at the moment. My life usually revolves around design files so github is still very foreign to me… but I will look into it and see what I can do. :slight_smile:

I modified your card stuff a little. Given that technically anything you share is under copyright, are you fine if I add this to Soft UI docs?

entity: light.infinity_mirror
state:
  - value: 'on'
    styles:
      icon:
        - color: var(--primary-color)
      name:
        - color: var(--primary-color)
      state:
        - color: var(--primary-color)
      card:
        - border-color: var(--primary-color)
        - border-width: 2px
        - box-shadow: var(--soft-ui-pressed)
show_state: true
style: |
  #aspect-ratio {
    margin: 10px;
  }
  * {
    --soft-ui-pressed: {% if is_state('sun.sun', 'above_horizon') %}
           inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
         {% elif is_state('sun.sun', 'below_horizon') %}
           inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
         {% endif %}
    --soft-ui-shadow: {% if is_state('sun.sun', 'above_horizon') %}
          -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
        {% elif is_state('sun.sun', 'below_horizon') %}
          -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
        {% endif %}
  }
styles:
  card:
    - font-family: 'Google Sans, Roboto'
    - font-weight: 500
    - background-color: var(--primary-background-color)
    - border-radius: 15px
    - box-shadow: var(--soft-ui-shadow)
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: 33% 40% 27%
    - padding: 15px
  name:
    - font-size: 20px
    - font-weight: 400
  state:
    - font-size: 20px
    - font-weight: 500
  icon:
    - color: var(--primary-text-color)
type: 'custom:button-card'

No problem here! Share and modify as you wish! :slight_smile:

1 Like

@hawk, your dashboard is so awesome! Definitely the single best one I’ve ever seen :laughing:

Unfortunately @duceduc, there will probably be no video. The readme is even more clear and detailed now. You can always just start a new dashboard and try the code. If you really are afraid of messing up your config, just try @KTibow’s themes, they should work without really changing anything. Cheers.

1 Like

Cards similar to ones used in @hawk’s dashboard have been added to the docs, check the Button Cards section of the readme for more details. :tada:

4 Likes

Any chance you would share your .yaml files? :upside_down_face: