🌻 Lovelace UI • Minimalist

Added the following lines to the card
z-index: 9
margin-top: -56px;

card_graph:
    variables:
      ulm_card_graph_color: var(--info-color)
      ulm_card_graph_name: n/a
    triggers_update:
      - '[[[ variables.ulm_card_graph_entity ]]]'
    styles:
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 0px
    custom_fields:
      item1:
        card:
          type: custom:button-card
          template:
            - icon_info
            - card_generic
          styles:
            card:
              - box-shadow: none
              - border-radius: var(--border-radius) var(--border-radius) 0px 0px
              - padding: 12px
              - background: none
              - z-index: 9
          entity: '[[[ return variables.ulm_card_graph_entity ]]]'
          name: ' '
      item2:
        card:
          type: custom:mini-graph-card
          entities:
            - entity: '[[[ return variables.ulm_card_graph_entity ]]]'
          line_color: '[[[ return variables.ulm_card_graph_color ]]]'
          show:
            name: false
            icon: false
            legend: false
            state: false
          style: |
            ha-card {
              box-shadow: none;
              border-radius: var(--border-radius);
              margin-top: -56px;
            }

I don’t know how to fix this. But what could help you debug this is to log the variables to somewhere you can easily see whats going on:

sequence:
  - service: persistent_notification.create
    data:
      message: "Light entity: {{ light_entity }}"
      title: "DEBUG"
  - service: persistent_notification.create
    data:
      message: "Snapshot entities: {{ expand(state_attr('{{ light_entity }}', 'entity_id'))
        |map(attribute='entity_id')|list }}"
      title: "DEBUG"

But know that i look at it, it seems your using {{ inside of other {{. I dont know if this works.
Can you try you template {{ expand(state_attr('{{ light_entity }}', 'entity_id') |map(attribute='entity_id')|list }} inside de Developer Tools > Templates, but with the light_entity filled in as a real entity instead of the variable. There you can try and get it to work.

Thanks good suggestion to debug. {{ light entity }} gives the right entity but the state_attr doesn’t (i.e empty list). The command without the variable works fine:

{{ expand(state_attr('light.dimmer....', 'entity_id'))
        |map(attribute='entity_id')|list }}"

So question is how to get this variable to be executed within the state_attr command.

I’m not sure but can you try this:

{{ expand(state_attr(light_entity, 'entity_id')) | map(attribute='entity_id')|list }}

Instead of

{{ expand(state_attr('{{ light_entity }}', 'entity_id')) | map(attribute='entity_id')|list }}

That’s it! Indeed, big thanks!!

Is it possible to combine scenes together with welcome?

      - type: custom:layout-card
        layout_type: grid

        cards:
          - type: 'custom:button-card'
            template: custom_card_paddy_welcome
            variables:
              ulm_custom_card_paddy_welcome_time: sensor.time

          - type: "custom:button-card"
            template:
              - card_scenes
            variables:
              entity_1: "scene.bad_time"
              entity_2: "scene.lights_off"
              entity_3: "scene.builaer"
              entity_4: "scene.YOUR_SCENE"
              entity_5: "scene.YOUR_SCENE"              
              name_1: "Sleep"
              name_2: "Off"
              name_3: "Builaer"
              name_4: "YOUR_NAME"
              name_5: "YOUR_NAME"              
              icon_1: "mdi:weather-night"
              icon_2: "mdi:lightbulb-group-off"
              icon_3: "mdi:water-boiler"
              icon_4: "mdi:YOUR_ICON"
              icon_5: "mdi:YOUR_ICON"              
              color_icon_1: "yellow"
              color_icon_2: "blue"
              color_icon_3: "purple"
              color_icon_4: "green"
              color_icon_5: "red"
              color_bg_1: "yellow"
              color_bg_2: "blue"
              color_bg_3: "purple"
              color_bg_4: "green"
              color_bg_5: "red"

I seem to recall something about not using “bold” because of a conflict with Chrome. But maybe not.

Don’t know why but for various cards (e.g. graph, vacuum) I am getting this

image

      - type: custom:button-card
        template: card_graph
        entity: sensor.switch_bg_woon_loox_temperature
        variables:
          ulm_card_graph_entity: sensor.switch_bg_woon_loox_temperature
          ulm_card_graph_name: Woonkamer
          ulm_card_graph_color: "var(--google-blue)"

What am I missing? Doing wrong?

I have had this happen to me before. The problem is most likely that the entity has been defined twice. In this case you will only have to put your entity in the variables.

This is an example of my card:

  - type: 'custom:button-card'
	template: card_graph
	variables:
	  ulm_card_graph_color: "var(--google-blue)"
	  ulm_card_graph_name: Temperatuur Garage
	  ulm_card_graph_entity: sensor.garage_temperatuur

hope this helps!

Jep, that did the trick. Thanks!

And sorry one more. My desktop version is in colors (and looks great), see below

image

But when using my phone (also on Chrome) I am getting grey only, see below

Seems to be an issue with the style sheet. Any suggestions how to resolve? Profile is one minimist_desktop as I want to see the top sidebar.

It just looks like you didn’t choose the right theme on mobile.
Currently there is no top nav bar display for mobile devices. But you can change it manually if needed by deleting these code lines from the mobile theme: Introduce padding with card-mod-view-yaml by CM000n · Pull Request #92 · UI-Lovelace-Minimalist/UI · GitHub

2 Likes

My profile is on mobile; on the laptop it works perfectly (also the mobile version) but on my iphone I am missing CSS…

image

Check the same configuration directly on the phone.
It is possible to have a theme in the PC, and another in the mobile app.

Hello. Can you tell me what the problem might be? Everything works fine, but the drawing of the brightness control does not change (while pressing the action is performed, but the color of the control does not change).

The slider uses the following properties:

        mainSliderColor: "rgba(var(--color-theme),0.1)"
        mainSliderColorOff: "rgba(var(--color-theme),0.1)"
        secondarySliderColor: "var(--color-theme)"
        secondarySliderColorOff: "var(--color-theme)"

There could be something wrong with your --color-theme variable.
How do you define your theme?

1 Like

Many thanks. When I edited the styles, I really touched on the color-theme and indicated the color in the HEX format. It was at the very beginning and I had already gone over everything and completely forgot about it. Thanks again for the tip.

No problem. Were you able to fix it?

Got it, style on my phone now works as well! I removed the lines (in the mobile theme) as Simon suggested but I still don’t have the navigation panel. Other solutions?

image