šŸŒ» Lovelace UI ā€¢ Minimalist

Just follow the instructions in my post. Thats the way to add custom cards. Dont know if they are persistent if you add it directly.

Yea, that doesnā€™t work, the dashboards are setup with.

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

Which is where all of the templates live.

https://ui-lovelace-minimalist.github.io/UI/setup/configuration/#custom-cards
https://ui-lovelace-minimalist.github.io/UI/setup/custom_cards/#custom-cards

Your instructions and the above documentation, are for custom_cards. Why would I want color templates under custom_cards, when they clearly go in card_templates/colors/

Cleaner and maintains directory structure :point_down:

configuration.yaml

# Include Shell Commands
shell_command: !include shell_commands.yaml

Automation

alias: COPY - UI Minimalist Templates
description: Copy Template files to custom_components directory
trigger:
  - platform: time_pattern
    hours: /23
condition: []
action:
  - service: shell_command.copy_custom_card_templates
  - service: shell_command.copy_custom_actions_templates
  - service: shell_Command.copy_custom_popup_template
mode: single

/config/shell_commands.yaml

copy_card_templates: >-
  cp -R /config/ui_lovelace_minimalist/custom_card_templates/*
  /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/custom_card_templates/
  
copy_custom_actions: >-
  cp -R /config/ui_lovelace_minimalist/custom_actions/*
  /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/custom_actions/
  
copy_custom_popup_templates: >-
  cp -R /config/ui_lovelace_minimalist/custom_popup_templates/*
  /config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/custom_popup_templates/

Skipped ā€˜custom_cardsā€™ directory as its the only automatic one.

It is a custom card. If you want it to be part of the project branch it, add the card and do a pull request. :wink:

It doesnt matter where the card is locates. In the end all cards and templates become one big yaml file. My custom cards and templates are all in the same directory together with the official custom cards.

Seems messy. especially when the actual ulm_templates directory is nicely manicured structure.

It isnt. Its your special use case, not part of the main project and thats why its a custom component. In my case I would create custom_colors directory and put the template you need named custom_blue_not_off into. So you have it structured in the right place.
On the other hand its hard to get support if you have a problem and own modifications in the main part of the project.
But I think this gets a little offtopic.

This docs does explains it correctly Configuration - UI Lovelace Minimalist

As long as you but any files/dirs under custom cards they will be copied over to the custom components dir when reload or restart is triggered. And HA will just make one big YAML out of it. So I recommend create your custom stuff in /config/ui_lovelace_minimalist/custom_cards dir. And if you want to see changes or have improvements please create a issue or an MR.

1 Like

Hello all, I need help once. I am in the process of creating a tablet view. However, I just have problems with the alignment of the cards.

I would like the cards (rooms) to fill the whole screen. But there is always a gap in the lower part. I would also like to resize the media card on the left side.

But it does not work for me. Here are a screenshot and my code. Maybe you have a tip for me. :slight_smile:

button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "Minimalist_Tablet"
theme: "minimalist-desktop"
background: "var(--background-image)"
# views:!include_dir_merge_list "views/"

###################
# Grid Layout     #
###################

views:
  - type: custom:grid-layout
    title: home
    path: 0
    layout:
      grid-column-gap: 1px 1px
      grid-template-columns: 30% 35% 35%
      grid-template-rows: 100% 0% 0%
      grid-template-areas: |
        "sidebar  rooms  rooms"

    background: center / cover no-repeat fixed url('/local/background_grey2.jpg')
    cards:
.
.
.
.

Hi,

The sizes of the cards are defined by the available width of a card. So the height is a ratio of the width. I would not recommend to stretch the cards and change the ratio of it. That can have some nasty effects.

Although you can change the overall alignment with CSS. There is a great guide online to use A Complete Guide to Grid | CSS-Tricks - CSS-Tricks.

Edit: most cards have a fixed height defined by margins and icon sizes others use the ratio I have described.

Could you tell me where to put the popup code ?
In button-card-template in ui-lovelace.yaml ? Do i need minimalist for it ?

Yes itā€™s included in minimalist

The code needs to be added within the card config in the dashboard.yaml (under the dashboard/views folder). You need minimalist and browser_mod (HACS)

Hi guys, is there a way to animate the icons?
For example in this card rotate the icon when the device is on? Thanks.

- type: "custom:button-card"
        template: card_power_outlet
        entity: switch.fan
        name: Fan
        variables:
          ulm_card_power_outlet_icon: "mdi:fan"
1 Like

Hi guys! I just switched to minimalist theme and I like it so much, itā€™s amazing.

I need your help a little bit. I need to make a button for resetting a helper but I need to have a confirmation dialog like ā€˜are you sureā€¦ Yes/noā€™.

Do you know how can I achieve something like this?

Thanks a lot!

1 Like

Reloading through the Developer tools ā†’ UI Lovelace Minimalist entry (the entry in the documentation seems to be outdated as far as where this setting is) has never worked for me, even after forcing the browser used to access HA to refresh the cache. Only a complete restart of HA works which can get pretty tedious when working on custom cards.

Am I doing something wrong and are others here able to get things to properly refresh without having to restart HA?

edit: Found I had to use ā€œrefreshā€ under the three dots in the top right in the dashboard views, HA seems to have itā€™s own cache independent of the browser and that one wasnā€™t getting cleared.

Where exactly are you seeing these dots? The ones Im clicking on dont have a refresh option and this could be the answer to my prayers with a cache issue iā€™ve been having

I see that youā€™ve been linked here from the Mushroom Cards topic. The refresh option I mentioned doesnā€™t apply to dashboards in the ā€œoverviewā€ tab. Minimalist right here creates itā€™s own entry and has different options.

Ah ok then lol Thanks for the reply. I have a weird one where clearing the cache works fine everything looks great and then every once in a while it reverts back to the previous cache and I have to pull down on my phone or hit refresh on the browser to clear it again. My mission continues to find an answer

Iā€™ve had that happen in the overview panel as well when switching between different tabs that use a similar theme but have different styles declared in the yaml for example, HA definitely caches some styles. Refreshing clears it like you said, youā€™re going to have to ask in HAā€™s own discussions because Iā€™m pretty sure that this is something inherent to the program.

Hi, where can I find this scene card template code?

Am using the Scenes Card (the one where you can have up to 7 entities - here), and the Minimilist Github shows that each Pill has its full complement of text (ā€œnameā€) underneath it. See below screenshot from the above link, specifically see the ā€˜Film Sceneā€™ pill and its full complement of text under it:

Now see my attempt at this below, and note that two of my pills cuts short the text shown (e.g. ā€˜Videoā€¦ā€™ should be ā€˜Video Callā€™, and ā€˜Eveniā€¦ā€™ should obviously be ā€˜Eveningā€™)

How do I get it to show all text?
Have hacked around with the card_scenes_welcome.yaml (having put it into config\ui_lovelace_minimilist\custom_card), but cannot find the place where I can get required text under the Pill(s) to show correctly.

Any help much appreciated!

1 Like