How to display the weather like this (Pic attached)


I’ve been trying to setup my weather widget to display like the image attached but I can’t seem to figure it out. I am using Darksky.

Any ideas how I can achieve this?


The stock widget doesn’t do that, looks like someone modified it.

Good to know! It was driving me nuts trying to figure this out! It would be so nice to have a simple “today” and “tomorrow” like this.

By the way, do you happen to know if widget squares in the photo above change color when the entity is active? For the example, the “front door” above is green when the door is open and back to gray when inactive? I tried doing that using widget_style: background… but only the area around the icon changes color.


I do happen to know since I wrote it :wink:

The answer is no but it’s something I would like to add as it’s a great idea.

I would also like to upgrade the weather widget as well.


Ohhh, my apologies for not recognizing! I just discovered HADashboard and I am addicted! I can’t thank you enough for your hard work! I can spend hours asking you questions :smile:

One last question (I promise). I am trying to setup a simple switch to turn on my Watch TV harmony activity but I thought it would be as simple as setting up a switch widget with the harmony entity but that doesn’t work.

widget_type: switch
title: Watch TV
icon_on: fa-television
icon_off: fa-television
icon_style_active: "color: #F6BD00;"
icon_style_inactive: "color: white;"
title_style: "color: white; font-weight: bold;"
entity: remote.living_room

Nothing happens when I activate it.

It should work but I’ve never tried it as I don’t have any remotes. The switch widget is using the homeassistant/turn_on service which should work with anything.

I use a harmony and dashboard. And also am insanely addicted. (I’m sure mr aimc is sick of me already lol :slight_smile: )

I have hadashboard use an input Boolean that kicks off an automation that includes a command to the harmony hub. So say one for tv one for Xbox …

Let me know if you like to see the code

1 Like

Did anyone in this thread figure out how that weather widget with today+tomorrow was created?


I too am very interested in this and if anyone can help us reproduce it.

1 Like

a new weather widget is on the list, to be created and it will be more open, with more options to modify layout and the option to select different weather sensors.


This is great to hear… can’t wait.

A quick question in the mean time… where do i find the original weather widget file if i wanted to edit it? Sorry i’m a newbie but slowly getting my head around all this and really loving it. Im running HASSIO on my Rpi 3. Does it live locally somewhere? I tried to search around but didnt have much luck.

i really have no idea where hassio installs things.
normally you would find it in something like:


You need to create a folder in Appdaemon called custom_widgets and then download files from here:
Appdaemon on GitHub.

You’ll need the baseweather folder and the weather.yaml file.

Add those to your custom_widgets folder and you’re ready to start modifying.

In the folder you’ll find all the files you need to modify the layout (HTML and CSS) and also the JS file.
The YAML file you might want to look at in terms of setting the right proprties for your skinning to work later.

In the weather.yaml file there’s actually an error:

title_style: $weather_sub_style

should be

title_style: $weather_title_style
1 Like

I have been playing around working on some new weather widgets for my dashboard this week. I have my main weather widget like the one you shared, the one my weather dashboard I have some that displays the daily/hourly forecast. I’m using WeatherUnderground for the data.


I really like these, is the code publicly available yet?

I hope to soon, still need to make some modifications to them before they will be ready. For example I would like to add a parameter where you can specify how many days/hours you would like to show. I also want to make it compatible with DarkSky as well since that is what most people use with HADashboard.


Great job bro.

Looks good

Great layout! Please share the code, really nice!

Please share if you can!

I also found that OP image and was under the impression that is default :wink:
I want to make some improvements to the basic widget (first of all - to not rely on dark_sky and allow specifing my own sensors) is there any work in progress to the weather widget @aimc ?
Not sure if i should change the widget with the improvements( changing entities with defaults to dark_sky, allowing not to display some data, move the icon code to css etc - most already done, units for wind speed/pressure) or should i create a new weather widget with the changed look ?