Revamped Lovelace Screens [Updated 15/5/19]

Share your Projects!
41

Thanks mate.

No worries, yeah I will have crack at UBNT forums.

I will wrap my head around SNMP/ SNMP walk next weekend and have crack at freenas as well.

42

Cool UI indeed!

Do you mind to share your themes.yaml (Cant find it in your repo), which specify your primary-color, accent-color, etc?

This theme are really awesome!

1 Like
43

Thanks @jerrychong25 you can find it in the packages under theme_control.yaml in my repo.

Cheers

1 Like
44

Thanks for the info :smile:

After I installed your theme, I found out that there is some differences between on top bar, as per screenshot below:

34%20AM
34%20AM718×582 29.8 KB

Could I know is there anythings missing on my installation?

Thanks.

45

if you want the compact header you will need to install it from custom:compact-header

1 Like
46

I see.

So you customize the color of custom compact header as well?

47

It is applied with the same ccs as the lovelace cards

48

Ok, means that this css need to set separately, not in themes.yaml?

Because my custom compact header is displayed and lovelace card is transparent already (After set in themes.yaml), but the custom compact header is not changing to transparent (Still in blue colour).

49

this is my compact-header config set the background the same as mine and you’re in business

- type: "custom:compact-custom-header"
  main_config: true
  background: 'rgba(150, 150, 150, 0.2)'
  menu: show
  options: show
  voice: show
  notifications: clock
  clock_format: '24'
  clock_date: true
  date_locale: en-gb
  disable: false
1 Like
50

The background value make this works perfectly.

Thanks for sharing!

1 Like
51

fantastic ui, well done. how did you create the custom state card titles?

1 Like
52

@tofty85 I used @iantrich custom:text-divider-row

1 Like
53

Thanks for a great looking theme.
This brings together most of the chunks of code and styles I have been looking for.
I must be missing something simple though as the custom: clock-card always shows the time as 3:45 PM December 3. Any pointers as to what I may be doing wrong.

Thanks
Brett

1 Like
54

Cheers @brett_l the update time is set for 500 so around 8 mins or just over. You will see this behaviour after a reboot until it updates. You can set to force update look for one of the lines towards the bottom of the card.js file.

55

Yes, but did you ever find a way to get around the problem of it not always refreshing?

56

@klogg

I changed this line and it seems to refresh without issue. I don’t watch all the time but I haven’t seen it drop back to default time since.

  _updateTime(force = true) {
    this.time.innerHTML = moment().format('h:mm A');
    this.date.innerHTML = moment().format('dddd, MMMM DD');
  }
2 Likes
57

Hi Jim

Thank you for the excellent work. Gave me a few ideas on how to “prettyfy” my UI.
Just a questions on the clock card. Had a quick look at the code and change the update interval to 100. Around a minute and half. Also set time to force, but same issues. Still showing 3:45. Any other ideas.

58

I didn’t create this card so I’m not sure I need to have a look at where it updates the date/time from in the cards js.

59

Hi there Jim.

No need to worry. Managed to figure it out and got it working. Thanx again and keep up the good work.

1 Like
60

Can you share your solution?