🌻 Lovelace UI • Minimalist

Share your Projects!
,
2072

Hello everyone. I want to change the background color for the on state but it only works for the off state.
I am clearly changing the state of the card before it turns yellow. Does anyone know where I should change the background color?

  styles:
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - background-color: >
          [[[
            return (entity.state == "off")
              ? 'rgba(115, 115, 115, 0.2)'
              : 'rgba(255, 255, 255, 0.8)';
          ]]]
    grid:
      - grid-template-areas: "'i toggle' 'n n' 'l l'"
      - grid-template-columns: "1fr 1fr"
      - grid-template-rows: "min-content"
    icon:
      - color: "rgba(var(--color-theme),0.2)"
2073

try this

type: 'custom:button-card'
styles:
  card:
    - background-color: 'rgba(255, 255, 255, 0.8)'
state:
- value: 'off'
  styles:
    card:
      - background-color: 'rgba(115, 115, 115, 0.2)'
2074

Absolutely amazing work! Thanks for sharing!

I am just making myself a bit more familiar with your design. I really like the popup cards and its very intuitive design :heart:

I have not figured out yet how to get the cover card popup working. I have enabled ulm_card_cover_enable_popup assuming a hold action will bring up the popup for the cover card. After having a look at the /card_cover.yaml I see that there are the hold sections are commented out:

Here is my code:

      - type: "custom:button-card"
        template: card_cover
        entity: cover.living_room_window
        variables:
          ulm_card_cover_enable_slider: true
          ulm_card_cover_enable_horizontal: true
          ulm_card_cover_enable_popup: true

Can anyone help me to get my cover card popup working? Thanks in advance - you are all awsome!

2075

Thank you. When I change the color in on, it changes the background of the bulb icon but not the card.
What I want is the other way around. I want the tag to go blank when it’s on. But if I do it in the on, the only thing that changes is the background of the icon

2076

I’ve looked in the docs of the button card:

You can merge states together by id when using templates. The states you want to merge have to have the same id. This id parameter is new and can be anything (string, number, …). States without id will be appended to the state array. Styles embedded in a state are merged together as usual. See here for an example.

So its not possible with this template. You have two possibilities. First you can create an issue or pull request so the states in the light-card template gets an ID. So they can be overwritten or you simply copy the light-card template, rename it an modify it for four needs.

1 Like
2077

Yes. I copied and changed the name to the template to see if I could change it. But I’m not getting it. I’m going to better see the info you gave me to see what I’m doing wrong. Thank you so much

2078

Hello,

Im trying to add the apexcharts card to a view, but I get a TypeError. I’ve installed the Apexcharts from HACS and can run it in a normal dashboard. I have the custom_card_apexcharts and corresponding yaml file inside ui lovelace minimalist but it wont work. Any ideas?

ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'attributes') in 'return entity.attributes.icon'

  - type: "custom:button-card"
    template: "custom_card_apexcharts"
    variables:
      chart_type: "line"
      graph_span: "1d"
      entity_1:
        entity_id: "sensor.documentserver"
        name: "Documentserver"
        color: "blue"
        max_value: 300
2079

Hi All! I’m barely new to Minimalist. I’m trying to build my tablet dashboard.
There’s a way to put cards in specific columns?
I cannot find a way to adjust cards to fit my tablet.
Thank you!

2080

You can do this with the layout custom card. Using the grid mode you will have full control over the look of your dashboard.

1 Like
2081

You can find the template under following path:
/config/custom_components/ui_lovelace_minimalist/ui_minimalist/ulm_templates/card_templates/cards/card_light.yaml

The problem is this section:

state:
  - value: "on"

It can only be overwritten when there is an id, like this:

state:
  - value: "on"
    id: "on_id"

You can add this to the code, but with the next update the change is gone.
So you can simply copy the card template and put it in /config/ui_lovelace_minimalist/custom_cards
Then rename the template e.g. card_light_mod (not only the file. its the first line in the code) and make your changes int the state/style section.
Change the template for your lights in you ui-yaml to card_light_mod . Navigate to the developer-tools > yaml and push the ui lovelace- minimalist button. Navigate to your ui and hit f5 or reload the page using the top right menu. that’s it.

2082

i couldnt find the pollen card there, can you please share your code?

2083

I have a simple question, that might have a complicated answer. Is it possible to use any stock cards within Lovelace UI? I am trying to add this: GitHub - tmjo/charger-card: A lovelace card for electrical vehicle (EV) home chargers and charging robots. to my Lovelace UI dashboard but I cannot figure out how to get it in… Anyone has a quick how-to? Or could point me in the right direction?

2084

Sorry for asking stupid questions but it seems a quick reload after installing the custom component and it worked… no need for any more help :slight_smile:

2085

Hi, Thanks for the previous informations :slight_smile:
I’m now working on some automations recall buttons on the UI. Which will be the best way to to that? I have an automation triggered by an helper.
Will it be possible to use a chip to trigger an automation?

2086

Don’t forget to “fix” the styling :wink:

style: |
  ha-card {
    box-shadow: var(--box-shadow) !important;
    border-radius: var(--border-radius) !important;
    padding: 12px !important;
  }
1 Like
2087

Grand! :slight_smile: Thanks for this. Looks alot better.

2088

I thought you understood. I read the documentation you felt me. From what I understand, everything under the id is what changes, right?

I’ll pass you the code in case you see something wrong. The only thing I did was change the color of the icon when the state is on.

However I got the first few lines of code to work and changed the state from info to toggle

---
card_pablo_room:
  tap_action:
    id: "action_id"
    action: "more-info"
  color: "var(--google-grey-500)"
  show_icon: true
  show_name: true
  show_label: true
  size: "20px"
  label: >-
    [[[
        if (entity.state !="unavailable"){
          if (entity.state =="off"){
            var bri = Math.round(entity.attributes.brightness / 2.55);
            return "Off";
          }else{
            var bri = Math.round(entity.attributes.brightness / 2.55);
            return (bri ? bri : "0") + "%";
          }
        }else{
          return "Unavailable";
        }
    ]]]
  styles:
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
    grid:
      - grid-template-areas: "'i toggle' 'n n' 'l l'"
      - grid-template-columns: "1fr 1fr"
      - grid-template-rows: "min-content"
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    name:
      - align-self: "end"
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "14px"
      - margin-left: "12px"
      - margin-top: "12px"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
    state:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
  custom_fields:
    toggle:
      card:
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return name ]]]"
        state:
          - value: "on"
            id: "id_on"
            icon: "mdi:lightbulb"
            styles:
              icon:
                - color: "rgba(var(--color-yellow),1)"
              img_cell:
                - background-color: "rgba(var(--color-yellow), 0.2)"
          - value: "off"
            icon: "mdi:lightbulb-off"
        tap_action:
          action: "toggle"
        type: "custom:button-card"
        template: "widget_icon"

card_pablo_room_mod:
  template:
    card_pablo_room
  tap_action:
    id: "action_id"
    action: "toggle"
  custom_fields:
    toggle:
      card:
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return name ]]]"
        state:
          - value: "on"
            id: "id_on"
            icon: "mdi:sofa"
            styles:
              icon:
                - color: "rgba(var(--color-blue),1)"
              img_cell:
                - background-color: "rgba(var(--color-blue), 0.2)"
2089

is it possible to add a proximity sensor to the Person Card?

So my goal is to show “absent” and how far away a person is.

2090

Yes, it is possible, look around here:

2 Likes
2091

Hi,

If I don’t make a mistake, you must uncomment the code from line 17 to 35 in this file card_cover.yaml.
Don’t forget to reload UI-Minimalist by pressing the C key on your dashboard and reload UI-minimalist

ui