Lovelace Soft UI - Simple and Clean Lovelace Configuration

It seems that card-mod text alignment styling is broken in 0.117. There is an issue open on GitHub. If anyone has something that’s working, please share it here or GitHub :grinning:

Custom header has also been deprecated. Anything to replace the custom header is also appreciated! Thanks

Latest update solved the issue for me. Thanks!

Since upgrading to 0.117.2, I am seeing a large gap between the markdown card text that wasn’t previously there. See below

Capture

Does anyone know how to fix this gap? Here is the styling:

    - cards:
        - content: |
            # Other Area
          style:
            .: |
              ha-card {
                --ha-card-background: none !important;
                box-shadow: none !important;
                height: 20px;
                margin-top: 15px;
                color: {% if states('sensor.other_area_lights_on') | float > 0 %} gold {% endif %};
              }
            ha-markdown:
              $: |
                h1 {
                  font-size: 20px;
                  font-weight: bold;
                  font-family: Helvetica;
                  letter-spacing: '-0.01em';
                }
          type: markdown
        - content: >
            There {% if is_state('sensor.other_area_lights_on', '0') %} are
            currently no lights on {% elif
            is_state('sensor.other_area_lights_on', '1') %}   is currently
            {{states('sensor.other_area_lights_on')}} light on  {% else %}
            are currently {{states('sensor.other_area_lights_on')}} lights
            on  {%
                   endif %}
          style:
            .: |
              ha-card {
                --ha-card-background: none !important;
                box-shadow: none !important;
                color: {% if states('sensor.other_area_lights_on') | float > 0 %} gold {% endif %};
              }
            ha-markdown:
              $: |
                h1 {
                  font-size: 15px;
                  font-weight: thin;
                  font-family: Helvetica;
                  letter-spacing: '-0.01em';
                }
          type: markdown

FYI: I came across this issue myself as well and created a ticket at HA Frontend: https://github.com/home-assistant/frontend/issues/7578#issuecomment-720539351

I came across this issue myself with my own UI. Saw your thread here and the ticket on Github after that. Figured I’d share this with you, so you can stay up to date.

1 Like

Thank you! I’ll keep an eye on it

Same problem here!

I have the same problem. Does anyone have a solution for this “issue”?

Try asking over on the card-mod forum.

Hopefully someone knows a viable workaround, because it doesn’t look like the changes will be reverted :frowning: !important variable is not a viable solution in this case btw.

I just use a h1 (#) and a h2 (##) in the same markdown card so you don’t have the issue of the gap between the cards:

content: >
  # Lights

  {% set lights = states |
  selectattr('entity_id','in',['light.big_lamp','light.small_lamp','light.tv_lamp','light.backlight'])|selectattr('state','eq','on')
  | list | count %} ## There {% if lights == 0 %}are currently no lights{% elif
  lights == 1 %}is 1 light{% else %}are {{ lights }} lights{% endif %} on
style:
  .: |
    ha-card {
      --paper-card-background-color: none;
      box-shadow: none;
      margin-top: 15px;
    }
  ha-markdown:
    $: |
      ha-markdown-element {
        letter-spacing: 0;
      }
      h1 {
        font-size: 20px !important;
        margin-bottom:5px;
      }
      h2 {
        font-size: 15px !important;
        margin-top:0;
        opacity: 1;
      }
type: markdown

2 Likes

I’ve been testing updating my UI to use the new lovelace Grid card in 0.118 - particularly for the smaller button groups. These have been fixed width up until now, which looked fine on my Android, but my partner’s iPhone cuts off the last icon.

The advantage is that you can adjust how many buttons you have per row, and any extra wrap below quite nicely. Had to use card-mod to set the width as CSS as % width within the button card didn’t work for me. I adjusted the width/height to 90% as this gave a nice gap between each for the shadows, and 6 buttons per row with these settings gives the closest match to the current styling

type: grid
columns: 6
cards:
  - entity: input_boolean.night_mode
    icon: >-
      [[[ if (entity.state == "off") return "mdi:sleep-off"; else return
      "mdi:sleep" ]]]
    show_icon: true
    show_name: false
    state:
      - styles:
          card:
            - box-shadow: |
                [[[if (states['input_boolean.dark_mode'].state == 'off')
                    return "inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03)";
                  return "inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3)";
                ]]]
          icon:
            - color: 'var(--paper-item-icon-active-color)  '
        value: 'on'
    styles:
      card:
        - padding: 0px
        - background: none
        - height: 90%
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: heavy
    type: 'custom:button-card'
    style:
      .: |
        ha-card {
            width:90% !important;
        }
  - entity: // more buttons here

3 Likes

Can you have a template in both h1 and h2? So two separate lines but each with a template markdown?

And what if you have 7 lines of template markdown? Like this:
image

How could I recreate this with markdown with the new stylings?

Or a markdown header above a mini-media-player card so it’s near the top of the card, like this:

Edit: I think for the first problem I can use h1, h2 etc till h6 (so 6 lines). Which would not be enough for my setup. I’ll experiment and see what I can do. Though I really hope I can just delete the stylesheet someway… Thanks for the tip in any case!

2 Likes

You can use IDs for that maybe, use #id to target an ID

Can you elaborate this or point me somewhere to read up about this?

type: markdown
content: |
  <h1 id="part1">thing</h1>
style: |
  #part1 {
    color: red;
  }

Of course I haven’t bothered using shadow-roots in this example, you’ll need to add them.

1 Like

Hi I wanted to know if there is the possibility of being able to change the color of an icon based on a certain value reached. For example, I would like the temperature icon green if the temperature is between 20 and 25 degrees, orange if the temperature is between 25 and 30 degrees and red if it is greater than 30 degrees. How can you create a condition within a card?

Using card-mod. Try asking over in that thread.

Hello and thanks for the suggestion I’m studying above, I wanted to tell you something strange despite having followed your guides on how to install “layout-card-griddier” I keep getting the message "Custom element doesn’t exist: layout-card-griddier . " if I use “layout-card” everything works. Can you help me? Thanks

I don’t know which card you mean, I don’t see it in the docs.

sorry if i was unclear you are right, i meant i am trying to use this link: https://github.com/kdw2060/hassio-custom-cards/tree/master/layout-card-griddier
but when I use this “layout-card-griddier” card it tells me that it doesn’t exist even though I have followed the link I put you