#Thanks for your reply, I could not

1 messages · Page 1 of 1 (latest)

granite osprey
#

I got ya. In regards to "an easy way," the short answer is not really because your design is going to be unique to your set-up. The positive side to this is the code is provided so you can easily refer to it to see how the OP did certain things.

#

The first thing you're going to want to set up is HACS. You can find the installation instructions here. This will allow you to install the third-party add-ons listed in the post.

#

The custom:button-card is probably one of the more useful custom cards IMO. It can be both super easy to set up or very complicated depending on what you want it to do. (That's where referencing the code will help.)

#

For the ios-theme, you'll get that through HACS, too. You'll need to move the files to the correct folder per Issue #47. You may need to load the SMB add-on or SSH into HA to move the files.
To set the background for the view, you'll need to go into the RAW Editor (click the 3 dots in the top right corner when editing). You'll add background: center / cover no-repeat url("/local/bg.png") fixed as shown at Line 9 of the OP's code ensuring you use the correct path. (Note: /local/ is the same as /config/www/ where the files get moved to.)

image.png
#

Looking at the code, you'll also need card_mod to handle some of the card transparency and box-shadows. Note that the syntax has recently changed. So, if you see: yaml style: | ha-card { box-shadow: none; background: transparent } The correct syntax is now: ```yaml
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent
}

ionic quiver
#

Thank you for this info

#

Once i get home i will sort this out

ionic quiver
#

@granite osprey sorry to bother you but i also notice the OP was using custom icons. How can i use other icons. Thanks

granite osprey
#

An example of that can be seen at Line 64 of the OP's code. yaml entity_picture: \local\img\icons8-robot-vacuum-cleaner-64.png
In the \config\www\img\ folder, he has the icons8-robot-vacuum-cleaner-64.png file.

ionic quiver
#

Thank you

ionic quiver
#

Coming here after a while, i've managed to get a some things to work and now i'm slightly getting used to the config. I'm having some issues, i cannot get the button to be blurred and i added a sidebar which is not showing in my dashboard.

The docs say to add some code to ui-lovelace.yaml but i don't see this file in my config directory

granite osprey
#

The docs say to add some code to ui-lovelace.yaml but i don't see this file in my config directory

  • Post where you're seeing that in order to properly deal with it. Generally, this shouldn't be needed any more.
  • Also, describe what you mean by getting the button to be blurred and what you've tried.
  • What'd you try for the sidebar. Looking back at the OP's code, it looks like he uses a single vertical-layout card to contain everything with grid cards to contain the buttons. The grid cards have this setting
view_layout:
  column: 2
```to put it in the appropriate column.
granite osprey
ionic quiver
#

Sorry I was referring to this https://github.com/DBuit/sidebar-card?tab=readme-ov-file#installation-instructions

I did manage to get it to show finally, (the sidebar).

For the button blur I added this (rgba value), since I know a bit of css, however i couldn't get the other properties to work like border and color.

ha-card {
      # box-shadow: none;
      background: rgba(0,0,0,0.3);
      border-radius: 7px
      border: 5px solid red;
      color: red;
    }

For the layout, i installed https://github.com/thomasloven/lovelace-layout-card

My final layout looks like this:

image.png
granite osprey
#

Yeah. That sidebar card is a bit old. Usually, HACS takes care of all of that for you.
In the code, you posted above, you missing a semi-colon at the end of border-radius which subsequently breaks everything from that point on.
The video that you posted is very good. The only problem I have with it is working with Minimalist UI. Because it is heavily-templated, it can be difficult to work with but is very good for reference.

ionic quiver
#

Yh was missing that semicolon thanks.

#

Isnt the video based on Minalist UI? or is there something else you would consider as beginner friendly

ionic quiver
granite osprey
#

I started working with the dashboard and learned primarily via the custom:button-card . There's a lot of documentation which can be a bit overwhelming but there is a fair amount of examples throughout the docs. The big thing to remember with this card is that it relies on JavaScript and not Jinja like the rest of HA uses. They're different but still have similiarities. That's why I wrote the Concepts page to show both forms of the syntax. That combined with Googling JavaScript usually sets me on the correct usage. The custom:button-card also has its own styling capabilities so card_mod usually is not needed. It also supports templating the card (not to be confused with Jinja templating) which allows you to reuse code without having to repeat it every time. This makes it super easy to make updates without having to hunt and find everything that needs to be changed.
I like these videos: https://www.youtube.com/watch?v=5Pi21pqfbxA and https://www.youtube.com/watch?v=SEyrcLq8pRo.
Note: Minimalist UI is based off of custom:button-cards so they'll still make good for reference when designing your own cards.

ionic quiver
#

Awesome, thanks for the info