Lovelace Soft UI - Simple and Clean Lovelace Configuration

Hi @Eldudemeister, no worries, glad to help. If you only access the UI from your phone, you can adjust the size of each button (so more will fit) by changing the width + height or by changing the margin. This, however, will probably mess up the sizing of the card on any other display. A better method would be responsive sizing by adjusting the margin here (shrink it to 2 or 1.5px)

      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }

You can find out more about it in a similar issue here, and in other closed issues on GitHub. Let me know if you need more help.

Thanks for this, is there a way to move a button onto the next line instead? I’ve tried changing the margin but it doesnt change on my phone…

You can always just create another card for the second row. However, if you would like to do it responsively, you would probably need something like state-switch. E.g. display one single row with 5 buttons when the screen size is big; then if the screen size is small, display 2 rows, one with 4 button and another with a single button :grinning:

1 Like

If you upgraded to 0.113 and have ‘broken’ markdown cards: see release notes -> breaking changes -> frontend: themes :slightly_smiling_face:

1 Like

A few questions:

  1. How can and middle align the text on the right of the icons under Home to the icon itself? How can I move them down a bit?

  2. The description “There are currently no lights on” is updated every minute. Is there any way for it to update as I turn on/off a light?

  3. Sensor element’s bottom half is not rounded.

Capture
22

As for that:
1.

  • First way with card-mod: Just change the margin attribute.
    • To keep the existing 20px on the left and right, but to change the top margin: 40px 20px (first is top/bottom).
    • To control each one: 10px 20px 30px 40px (clockwise starting from top)
  • Second way with button-card:
show_icon: false
show_name: false
style: |
  ha-card {
    --paper-card-background-color: none !important;
    box-shadow: none !important;
  }
styles:
  card:
    - width: 5px
    - height: 45px
type: 'custom:button-card'
# Modify height as needed
  1. If you’re using a template sensor, then specify entity_id as a string or list of strings. In 0.115, if not auto-detected, check out Heads up! Upcoming breaking change in the Template integration. I don’t know how to do it client-side.
  2. Use mod-card, just add a card: to the top, indent everything using Ctrl/Command + ] except style, and add type: 'custom:mod-card'
2 Likes

Thanks for your reply! I got the first on fixed and working with adjusting the margin attribute. I will try fix the second later but I can’t get the sensor card working.

I managed to warp it into a mod-card and both shadow and margin attribute works but not the rounded corners. Here is my code.

type: 'custom:mod-card'
style: |
  ha-card {
    margin: 10px;
    border-radius: 15px;
    background-color: var(--primary-background-color);
    box-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 %}                 
  }  
card:
  type: sensor
  entity: sensor.frigate_coral_fps
  graph: line

I replied down below.

Based on what you previously posted:

card:
  entity: sensor.frigate_coral_fps
  graph: line
  style: |
    ha-card {
      background-color: var(--primary-background-color);
      border-radius: 15px;
      box-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);
        {% else %}
          -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
        {% endif %}
    }
  type: sensor
style: |
  ha-card {
    margin: 10px;
  }
type: 'custom:mod-card'

I just tried it, the bottom part of the card is still not rounded.

I just tried it, the bottom part of the card is still not rounded.

@invinciberry Could you try this part to look like:


      box-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);
        {% else %}
          -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
        {% endif %}
    

You could also try mini graph card.

1 Like

It works! Thanks!

1 Like

Self-promotion (for the sake of it): I made some themes based off of JuanMTech’s, but I added soft UI styling.


Features:

  • Can instantly add soft-ui to an auto-generated dashboard, without needing to edit it (and disable auto-generation).
  • Works with auto-generated dashboards and handmade ones
  • Works with badges
  • Gives cards in dashboards and cards everywhere soft UI
  • Adds a compact header with no work required

They’re available as default HACS repos. Here’s the links on GitHub:


2 Likes

@N-l1 I noticed you put your old automations in a singular new one. I tried it but it gives me an error:

Says missed a comma in this line: {% if states('sun.sun') == "above_horizon" %}
I just don’t see the error though. I’m sure you do :slightly_smiling_face:

Good work, it certainly adds a bit of flair to cards. I just started making my remote card.

I few more color choices would be nice though.

I’ve updated the automation to use the new choose feature instead of using templates, should work now (if you are on >= 0.113) :slightly_smiling_face:

1 Like

Thanks! I have a slightly shorter version:


- id: set_theme
  alias: "Set theme"
  initial_state: 'on'
  trigger:
    - platform: homeassistant
      event: start
    - platform: sun
      event: sunrise
    - platform: sun
      event: sunset
  action:
    - choose:
      - conditions:
          - condition: state
            entity_id: sun.sun
            state: 'below_horizon'
        sequence:
          - service: frontend.set_theme
            data:
              name: "Google Dark Theme"
      default:  
        - service: frontend.set_theme
          data:
            name: "Google Light Theme"
1 Like

Since updating to 0.113.1 my markdown cards look like this? Anyone else affected?

N-L1 already updated the code, but basically instead of

--paper-card-background-color

use one of these:

--ha-card-background
--card-background-color
background-color

To make this easier, open the raw config editor, move it into another text editor and do a find/replace.

1 Like