YuniFi Theme

Share your Projects! Themes
1

Greetings HomeAssistant Community!! :smiley:

For quite some time I had been using (and very happy with!) the ever popular Noctis theme in my HomeAssistant configuration. With two monitors on my desktop however, I started working on adjusting colors to make a theme that more closely matched the UniFi interface I use for the rest of my network control. Now that I finally have it to a point I’m happy with, I thought I would share it here in case any of you might be interested in using it as well.

desktop_1
desktop_11920×928 125 KB

It’s not integrated into HACS, so you’ll have to install it manually, but it’s really pretty easy (and I tried to include instructions that made sense :rofl:). You’ll find the files and instructions on my GitHub page linked below.

Hopefully someone else gets some use out of it as well!

1 Like
2

Great theme thank you! Happen to have a guide on the layout? Exactly what I’m after haha

3

I actually wanted to ask the same thing. I love how this layout looks, and would love to see how you coded some of the elements in it.

4

Thanks guys!!

Pretty much everything uses the Custom: Button-Card in some way (other than the map/graphs/cameras). Is there a particular part you had questions about? :slightly_smiling_face:

5

All of it? :joy: the top icons and the layout is exactly what I’m after on my tablet, it’s got that style that just fits in when you’re a DevOps guy lol

1 Like
6

At its core, the page screenshot included in this thread is three ‘Vertical Stack’ cards. Within each Vertical Stack, the cards are single cards - or ‘Horizontal Stacks’ of cards - to arrange them appropriately within the layout (card height, icon and font size are defined within the card variables to keep them even). The blank spaces are created using the Custom:Button-Card as well:

type: custom:button-card
color_type: blank-card
styles:
  card:
    - height: 80px

:slightly_smiling_face:

1 Like
7

Thanks for the info on the main content! I was very curious on how you were getting the first row looking like that. It looks like it’s done using badges, but your implementation looks WAAAAY better than anything I’ve seen when I’ve done things like that. =)

8

Why thank you!! :slightly_smiling_face:

The ‘Badges’ are actually created using the Custom:Button-Card as well. By defining the ‘Styles’ of the buttons, their size and background (or lack thereof) can be made to appear exactly the way you’d like them to:

styles:
  card:
    - background-color: rgb(0,0,0,0)
    - box-shadow: 0px 0px 0px 0px
    - padding: 0px 0px 0px 0px
    - height: 80px
  icon:
    - color: var(--base-colors-seagreen)
    - padding: 0px 0px 0px 0px
    - width: 40px

I use these icons (and different styles based on entity states) to indicate system status, and whether or not updates or issues exist related to the various server components:

system-status-icons
[ Showing HACS update available ]

Likewise, by defining the button’s icon (again based on entity state) as one of a few custom .png icons I made, I have a friendly way to update family’s locations as a ‘Badge’ at the top of each page as well:

family-location-icons
[ Heather is Home, Matt is at work (Law Enforcement Center) ]

In the example just above, the buttons’ ‘Name’ and/or ‘Label’ is used to update and display the family members’ information. Spacing is again controlled using blank buttons in a ‘Horizontal Stack’ :wink:

1 Like
9

You just had to say you’re law enforcement… eugh! Haha nope, thank you! This is extremely helpful! I love you home/away design for each person! I can change the logo from the McDonald’s one to the gym on now… haha