Sharing back to this great community! Here is my HA setup

[RS53]

Really like this dashboard. Managed to install all cards etc. However, on my light card I do not see the toggle in the right upper corner. The template for light.yaml is exact the same as from the github. Any ideas please?

Another question is how to increase the icons on the cards? I find theme too small now.

My last question is how to change the scene buttons in the popup card for lights? I see for example relax button, but where to link this button to my own scene as it throw now an error.

Many thanks!!

[MikeMunich (Mike)]

Sometimes, the solution is so easy…
after a break a saw my error - tab at the wrong place

[troinine]

Really like this dashboard.

Hey, thanks @RS53! Great that you are enjoying it!

Managed to install all cards etc. However, on my light card I do not see the toggle in the right upper corner. The template for light.yaml is exact the same as from the github. Any ideas please?

I have switched mostly to use the new_light template as it uses mushroom light slider which works really nicely. I have abandoned the toggle on the top-right corner in the process. However, it should still work. For example this:

 type: 'custom:button-card'
 template: light
 entity: light.group_bedroom
 name: Makuuhuone

Produces this kind of card on the tablet view and theme:

Another question is how to increase the icons on the cards? I find theme too small now.

The layout relies on rems as units in most places. There is a base font-size that I have adjusted in order to get a decently working scalable layout. The style.css dictates the root font-size which impacts on all measurements:

troinine/hass-config/blob/450f21ef7d7c970bd6e9da64c0d2cf24c2ee1a3a/www/style.css#L3

If you have not included this style.css into the www folder, then the icon’s might be too small. I have to admit that doing the initial layout I wasn’t exactly sure what works the best in terms of CSS measurements and I haven’t put more effort into it yet. If you want to play with the sizes, you can try adjusting the values in base.yaml:

troinine/hass-config/blob/450f21ef7d7c970bd6e9da64c0d2cf24c2ee1a3a/button_card_templates/troinine/base.yaml

This defines most dimensions on the button-cards that the dashboard uses. Some specific templates might have some hard-codings though which you need to tweak separately. One example is the new_light card which is not currently deriving the dimensions from the base.yaml.

My last question is how to change the scene buttons in the popup card for lights? I see for example relax button, but where to link this button to my own scene as it throw now an error.

The light popup scenes are defined here:

troinine/hass-config/blob/450f21ef7d7c970bd6e9da64c0d2cf24c2ee1a3a/popups/common/light.yaml#L64-L143

One exception to this is the tablet layout card that controls all lights. It uses a different tablet specific popup:

troinine/hass-config/blob/450f21ef7d7c970bd6e9da64c0d2cf24c2ee1a3a/popups/tablet/lights.yaml#L29-L86

In addition, the mobile lights view which is not a popup has it’s own scenes:

troinine/hass-config/blob/450f21ef7d7c970bd6e9da64c0d2cf24c2ee1a3a/ui/views/mobile/lights.yaml#L43-L118

Hope this helps!

[MikeMunich (Mike)]

@troinine
one more time, i would need your help

i try to adapt your Dashboard but i have a Problem with the Popup Card (with the Header)
My Header looks like that

In your screen, your title is in the same line as the “X”

I can not find the right statement in your theme file, which is responsible for that
Perhaps you can help me, an show me the part which i need for that

Thx in advance

[troinine]

This is due to dialog changes in HA and it is somewhat discussed in Popup title styling seems to be broken sometimes (Possibly a Light/Dark mode issue) · Issue #604 · thomasloven/hass-browser_mod · GitHub.

I have addressed this in both tablet and mobile themes now. Changes related to this

• refactor(mobile): updated browser_mod to 2.3.0 and cleaned dialog styles · troinine/hass-config@2d58b73 · GitHub
• refactor(tablet): update to browser_mod 2.3.0 and refactor dialog styles · troinine/hass-config@9f3bf9b · GitHub

If you align your theme files with the changes and update to browser_mod 2.3.0 you should get working popups. Note that it also requires home assistant 2023.7.x. I’m using the latest 2023.7.2.

[MikeMunich (Mike)]

@troinine
Great, thx it works - i have overlooked your changes. My bad

If its okay, i would have one more question.
In your tablet view, you have the great looking sidebar.
What i want to achieve is a footer in the sidebar at the bottom

Perhaps you have a hint or so, how i can achieve that.
My actual tries were not successfull the only thing, which works was a spacer with 500px height… but that is not a good solution

[Cinamon]

@troinine
when you change:

base:
  variables:
    is_active: |
      [[[ return ['on', 'open', 'Kotona', 'home', 'cleaning', 'returning', 'idle'].indexOf(entity === undefined || entity.state) !== -1; ]]]
  template:
    - language_variables
  # Fix to https://github.com/custom-cards/button-card/issues/693
  state_display: |
    [[[
      const domain = entity.entity_id.split(".")[0];
      switch (entity.state) {
        case "home":
          return variables.text_state_home;
        case "not_home":
          return variables.text_state_not_home
        default:
          return variables[`text_state_${domain}_${entity.state}`];
      }
    ]]]

to:

base:
  variables:
    is_active: |
      [[[ return ['on', 'open', 'Kotona', 'home', 'cleaning', 'returning', 'idle'].indexOf(entity === undefined || entity.state) !== -1; ]]]
  state_display: |
    [[[
      const domain = entity.entity_id.split(".")[0];
      switch (entity.state) {
        default:
          return hass.localize(`component.${domain}.entity_component._.state.${entity.state}`);
      }
    ]]]

You don’t need the language file
At my HA it works without changing the button_card. I try it first with the changes of button_card after that i redownloaded the button_card and my fix still works.

Add the following to the template compact_card, so it will also works at the mobile view.

  state_display: |
    [[[
      const domain = entity.entity_id.split(".")[0];
      switch (entity.state) {
        default:
          return hass.localize(`component.${domain}.entity_component._.state.${entity.state}`);
      }
    ]]]

[troinine]

Hi @Cinamon!

Thanks for the suggestion. I had no idea that the localize function is available in the hass object. This would be the perfect solution for the button-card issues. However, the function seems to revert to English even though my language selection is Finnish:

The state should be “Kotona” in Finnish. The same issue is with other entities such as locks, binary sensors etc. I wonder how it tries to detect the current locale.

[troinine]

Great! Good that it works.

What i want to achieve is a footer in the sidebar at the bottom

I can’t quite visualize what you are trying to achieve. Could you sketch me a rough design? Is it something like

 clock | weather

 notifications

 some footer content

[troinine]

Further investigation indicates that it is actually broken even in built-in cards. The issue seems to be related to States translations lang not showing in native language - all states in english · Issue #90957 · home-assistant/core · GitHub

[MikeMunich (Mike)]

@troinine
Of course, attached is a rough picture of my wish (footer is moved with Paint)

And then another question
Although the test page fits completely on my screen, I have a scrollbar on the right side.

Maybe someone has a tip how I can get rid of it?

[troinine]

I see. You need to play with the CSS grid a bit. Here is one way to solve the issue:

# tablet.yaml

views:
  - title: "Tabletti"
    path: home
    icon: mdi:home
    type: custom:grid-layout
    layout:
      # ...
      grid-template-areas: |
        ". .        .       .        .       ."
        ". sidebar  home    lvi      devices ."
        ". sidebar  lights  children family  ."
        ". sidebar  footer  footer   footer  ." # <-- slight increase of sidebar height
     cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        view_layout:
          grid-area: sidebar
        layout:
          margin: 0
          grid-template-columns: 1fr
          grid-template-rows: max-content 9fr 1fr # <-- notifcations take 9 fractions and buttons take 1
          grid-template-areas: |
            "clock"
            "notifications"
            "buttons" # <-- Added new area for buttons
        cards:
          - type: custom:button-card
            view_layout:
              grid-area: "clock"
              place-self: "start center"
            template: clock
            entity: sensor.time
            variables:
              entity_weather: weather.koti_custom
              entity_date: sensor.date
              entity_temperature: sensor.netatmo_koti_olohuone_ulko_temperature
              weather_tap_action:
                !include ../popups/tablet/weather-forecast.yaml

          - type: vertical-stack
            view_layout:
              grid-area: "notifications"
              place-self: "start stretch"
            cards:
              !include notifications.yaml

          - type: horizontal-stack # <-- New horizontal stack for buttons
            view_layout:
              grid-area: "buttons"
              place-self: "end center"
            cards:
              - type: custom:button-card
                template: navbar_icon
                variables:
                  id: button1
                  icon: mdi:home-outline
              - type: custom:button-card
                template: navbar_icon
                variables:
                  id: button2
                  icon: mdi:bell-outline
              - type: custom:button-card
                template: navbar_icon
                variables:
                  id: button3
                  icon: mdi:lock-outline
              - type: custom:button-card
                template: navbar_icon
                variables:
                  id: button4
                  icon: mdi:ceiling-light-multiple-outline
              - type: custom:button-card
                template: navbar_icon
                variables:
                  id: button5
                  icon: mdi:fridge-industrial-outline
              - type: custom:button-card
                template: navbar_icon
                variables:
                  id: button6
                  icon: mdi:home-circle-outline

The result:

Hope this helps!

[MikeMunich (Mike)]

Great man, thx alot!

The weekend can come, then i can design the next steps
But the first try i made now, looks like i want (because of you!)

Perhaps you have a hint or idea to the scrollbar?

[troinine]

I suspect the size of the sidebar is way bigger than the screen. Can you inspect the elements on the page and see their heights?

For example in my case the sidebar fits to the screen and therefore there is no content that overflows.

Or there could be another card that is outside the main grid layout which would cause the scrollbars to appear.