šŸŒ» Lovelace UI ā€¢ Minimalist

So the only option using automation is to have two themes one dark one light and not a dual mode theme. Otherwise the only possibility is os managed.

So the only way is to duplicate the standard minimalist theme and set this to a dark theme? Then after every release I have to do this again, correct?

Why would you have to do that?

I would have thought, that the theme YAMLS will change with some releases?

I think I had to edit my themes once in the last year when some paper controls were replaced with MWC. Took about 3 minutes.

Anyone have any ideas how to make an icon for a media player in the room card show on/off status? Media players under developer tools ā†’ states, show

off, idle, standby, playing

But donā€™t actually show an ā€˜onā€™ state, which I believe the room card relies on an on/off state

image
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/

        - type: "custom:button-card"
          template:
            - card_room
            - purple_no_state
          name: Living Room
          entity: light.couch_lamp_zha_group
          icon: mdi:sofa
          tap_action:
            action: navigate
            navigation_path: "living_room"
          variables:
            label_use_temperature: false
            label_use_brightness: false
            entity_1:
              entity_id: light.couch_lamp_zha_group
              templates:
                - yellow_on
              tap_action:
                action: toggle
            entity_2:
              entity_id: media_player.living_room_nvidia_shield
              templates:
                - blue_on
              tap_action:
                action: call-service
                service: media_player.turn_on
                service_data:
                  entity_id: media_player.living_room_nvidia_shield
              hold_action:
                action: call-service
                service: media_player.turn_off
                service_data:
                  entity_id: media_player.living_room_nvidia_shield

Any tips would be appreciated, Iā€™ve tried searching and am coming up dry.

EDIT:
I tried adding a template state - which also didnā€™t work

            entity_2:
              state: >
                     {% set lrs = states('media_player.living_room_nvidia_shield') %}
                     {{ 'on' if lrs != 'off' else 'off' }}
              entity_id: media_player.living_room_nvidia_shield
              templates:
                - blue_not_off
              tap_action:
                action: call-service
                service: media_player.turn_on
                service_data:
                  entity_id: media_player.living_room_nvidia_shield
              hold_action:
                action: call-service
                service: media_player.turn_off
                service_data:
                  entity_id: media_player.living_room_nvidia_shield

So I ended up going to here and making ā€™blue_not_off.yamlā€™ template as well as one for green, yellow, pink, red, and purple

/config/custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/card_templates/colors/

example template

---
blue_not_off:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-blue),1)"
        label:
          - color: "rgba(var(--color-blue-text),1)"
        name:
          - color: "rgba(var(--color-blue-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-blue), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-blue), var(--opacity-bg))"
      id: "not_off"
      operator: template
      value: >
             [[[
               return (entity.state != "off" )
             ]]]
# Legacy
blue:
  template: "blue_not_off"

Hi guys,

been using the theme for a while now, but was wondering if anybody already implemented some nice solution for using a vacuum map??

Dennsi

First: Never edit cards in the custom_components directory!

Try this:

  1. Go to your config/ui_lovelace_minimalist/custom_cards directory
  2. create a directory, e.g. my_templates
  3. create a blue_not_off.yaml
blue_not_off:
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-blue),1)"
        label:
          - color: "rgba(var(--color-blue-text),1)"
        name:
          - color: "rgba(var(--color-blue-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-blue), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-blue), var(--opacity-bg))"
      value: "off"
      operator: '!='
  1. apply the template to your card
  2. go to developer settings and hit the ui lovelace minimalist button
  3. refresh your dashboard
1 Like

I know not to edit the cards as theyā€™ll get overwritten with updates.

Didnā€™t think cards that donā€™t exist in the repo have an issue of being overwritten, as thereā€™s nothing to overwrite them from the repo?

Iā€™ll move them, but it shouldnā€™t matter with templates that donā€™t exist.

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)