🌻 Lovelace UI • Minimalist

I want to do some sort of a adaptive dashboard in the sense that for wide displays I’ll display 3 cards, while for narrower displays only 2 (hiding the 3rd one).

Just by using grid-template-areas, it doesn’t seem possible that I can hide a card named by a grid-area entry. Am I getting this wrong? Or what’s the approach to hide/show some cards for a certain display width?

edit: I know I can use extra_styles and css to hide it, but I was wondering if there’s a way to make use of the grid configuration yaml.

try using state-switch

2 Likes

Hmmm, I was able to switch between displaying 2 cards/entities depending on the width of the display, but I’m having a hard time figuring out how to set the narrow card to be empty.

For example

          - view_layout:
              grid-area: "card5"
            type: custom:state-switch
            entity: mediaquery
            states:
              "(min-width: 1000px)":
                type: markdown
                content: more than 1000 px
              "all":
                type: "custom:button-card"
                template: "card_generic"
                entity: light.office

This switches between the text and the light switch, but I’d like “all” to be empty instead, but it expects an element.

don’t use the all state, just remove it .

1 Like

Working on my first dashboard, and still pretty new to Home Assistant. Making good progress on my dashboard, but having a problem trying to change an icon in the Room Card. Specifically I’m trying to change one of the entities to have an icon that is different from what is assigned to the entity. Here is my yaml:

              entity_2:
                entity_id: cover.master_bedroom_slider
                icon: mdi:arrow-up-bold
                templates:
                  - green_on
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  service_data:
                    entity_id: cover.master_bedroom_slider

I’m trying to change the ‘cover’ icon to be an up arrow (mdi:arrow-up-bold)

Any help is appreciated!

Bill

that is not supported in the default room card, but take a look at my custom room card, it has loads of additional features.

https://community.home-assistant.io/t/my-custom-cards-for-minimalist-ui

I be happen to help in that thread i you need help settingup, or have any questions

Thanks! Checking it out now.

Hi there,
i’m working on my first simple custom card.

This is what i have, but i need the state under the friendly name:
image

Here is the template:

---
custom_card_test:
  template:
    - "icon_info_bg"
  show_name: true
  show_state: true
  show_label: false
  show_icon: true
  show_last_changed: false
  variables:
    ulm_custom_card_jb_test_icon_on: ""
    ulm_custom_card_jb_test_icon_off: ""
    ulm_custom_card_jb_test_icon_tilt: ""
    ulm_custom_card_jb_test_color_background: ""

  icon: >
    [[[ 
        if (entity.state == "Offen") 
        return variables.ulm_custom_card_jb_test_icon_on;

        if (entity.state == "Gekippt") 
        return variables.ulm_custom_card_jb_test_icon_tilt;

        else return variables.ulm_custom_card_jb_test_icon_off; 
    ]]]

Here is the card:

  - type: custom:button-card
    entity: sensor.wohnzimmer_tur_advanced
    template: custom_card_test
    name: WZ Tilted
    variables:
      ulm_custom_card_jb_test_icon_on: "mdi:door-open"
      ulm_custom_card_jb_test_icon_off: "mdi:door-closed"
      ulm_custom_card_jb_test_icon_tilt: "mdi:door-sliding"

I don’t get it… Thanks

you do this using styles

ie

  styles:
    state:
      - justify-self: "start"
      - font-size: "15px"
      - margin-left: "33%"
      - margin-top: "0%"
      - max-width: "65%"
      - text-overflow: "ellipsis"
      - overflow: "hidden"

Thanks for the hint…
I had to change the grid from label to state:

  styles:
    grid:
      - grid-template-areas: '"i n"  "i s"'
1 Like

Hi I’m running Home Assistant 2023.9.3 with the latest version of Minimalist.
It’s been a while since i started my custom dashboard and now I have some time to work some more on it.
Then i Noticed that I have these ugly borders now.
screen
I found that there is a fix and I see that is has been implemented

 # fix added border-lines in 2022.11
  ha-card-border-width: "0px"

Yet it does not work :frowning: Have been googling and trying all sorts of fixes I found but no luck.
Any one been having tha same problem?

You can do this for any entity by following the below!

Developer tool > states > search your entity in your case cover.master_bedroom_slider > click on " i " icon below it > click on the gear icon > you will get icon option to change it!

you can. but doing so, will stop the state icon changing, it will become a static icon.

Mine are working fine,I am using the default room cards.

Awesome, can you share the code when you finished it ? please :slight_smile:

1 Like

Great Dashboard!
How did you put the swipe card with the camera entities into minimalist and how is the schedule card working?

thanks for any help

Excuse me, one Q, where I have to locate/put the template section?

My first trials to get tabs to work…

Not sure what I am doing wrong here…all I get is an empty dashboard!?

I have follow the description for adding tabs as it it described here:
https://ui-lovelace-minimalist.github.io/UI/setup/customizing/#how-to-customize-the-dashboard

Currently the yaml file looks something like this (where I expect 2 tabs to show up one “Main” and one “Vito”:

button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
title: "Home trials"
theme: "minimalist-desktop"
background: "var(--background-image)"


views:
  - title: "Main"
    path: 0
    icon: "mdi:home"
    cards:
      - type: vertical-stack
        cards:
    ##########
    ########## TOP CHIPS/PILLS
    ##########
          - type: horizontal-stack
            cards:
################### REMOVED STUFF

  - title: "Vito"
    path: vito
    icon: "mdi:car"
    cards:
      - type: vertical-stack
        cards:
    ##########
    ########## TOP CHIPS/PILLS
    ##########

################### REMOVED STUFF

Hi,
I’m working at an adaptive dashboard version for my tablet and I don’t know why, my dashboard is loading very slow. I double checked the code and it seems fine. Does anyone have an ideea why it is working slow and also, after a few minutes it crashes, especially when I’m in Home page? HASS is running on a virtual machine on Synology. I tried on MS Edge, Google Chrome. On FullyKioskBrowser it is even worse. Also I tried on a iPad with HA Companion app, and again it is worse. It could be because I used horizontal-stack in a vertical-stack, some kind of stack-in-stack on a single grid-area? I didn’t used this on all views, but all views are loading very slowly.

slow ui best

how do you center the entities like adblue inspektion licht usw