I just found the project last week and I’ve gotten my Pi setup with the AIO image and I have Appdaemon running.
Right now, I am somewhat overwhelmed trying to customize the dashboard. I am trying to start small by modifying the css and html for the clock and the weather widget but I am finding that no matter what edits I make to the baseweather and baseclock files as well as the associated .yaml files…absolutely nothing changes when I reload the dashboard. I don’t know a whole lot about web design but Ive managed to Google most things like changing font and such.
I am using the “Main Panel” example dashboard
For reference, I am trying to copy this design for the clock and the weather widgets just so I can start learning how to customize.
Can anyone steer me in the right direction as to why nothing is being changed when I edit the widgets? Am I changing the wrong files?
Bonus question. Anyone have any idea how the person who created this dashboard was able to get data for tomorrow’s weather? I am using DarkSky, and I am not seeing any information to get the forcast for the next day in Home Assistant. I have added all of the variables for the component.
Have you created a custom_css folder and in that a “skin” folder containing your css and yaml files? Then in your url are you applying the “skin” name?
For example:
I have the following skin - custom_css\carbon_blue
The url for hadashboard to use that skin is http://192.168.1.223:5050/main?skin=carbon_blue
I haven’t done any of that. Once I installed, I started playing around with the example dashboards (i was playing with "Main Panel) and their .yaml files. I thought I could learn that way before really getting my feet wet.
In order to customize anything, I have to start my own dashboard and create CSS files? I’ll try scrapping all the example stuff I moved into the main dashboards folder and start piecing together my own stuff.
Check it out and play around let me know if you have any questions. The custom_css folder goes into the same directory as your dashboards folder. The frosty_flake(skin) goes in the custom_css folder.
Since I wrote over some of the other files trying to customize the dashboard. I think I will have to uninstall appdaemon and reinstall it to get all the original files back. Is there any easier way to restore the files back to how they are in the repository?
Sorry maybe i should have been more clear. custom_css should be in the same directory as dashboards not in the dashboards folder. So to the see the skin your url should be http://your_ip:5050/main?skin=frosty_flake
@Mike_D is helping for @BrainSalad to create a custom skin.
thats very nice but i think that @BrainSalad wants to learn to make minor modifications at first.
there are 2 ways to manipulate the look from a dashboard.
the more complicated way of making your own skin as described above. for a starter not really advisable.
the modifications on widget level. not that difficult and advisable for starters.
lets look at the second option for a bit.
in the dashboards directory you create a file with .dash as extention. lets say yourdash.dash
you start with the most basic way you can create a dashboard
example yourdash.dash
oke so know lets look at part 2, changing the view from a widget.
we take our basic dash file again and add a small part:
title: Test dashboard
widget_dimensions: [120, 120]
widget_margins: [5, 5]
columns: 8
layout:
- sensor.anysensorfromHA
sensor.anysensorfromHA:
widget_type: sensor
entity: sensor.anysensorfromHA
title: your title
title2: if you like
title_style: "color: red"
title2_style: "font-size: 150%"
widget_style: "backgroundcolor: white"
as we see there are 3 lines where you can put in css.
a very small and simple place to start experimenting with css.
try to change size, color, backgroundcolor, or any other part of the appearance.
in the DASHBOARD.md file in the appdaemon directory you can then start searching for all other small parts you can try to change, like the icons from widgets.
if you are at some part comfortable enough with css and the way it effects dashboards, then you can start to create complete skins. before that try to look at what effects it has on other skins when you edit your dash file.
so view the dash in your browser with something like ?skin=zen or ?skin=simplyred behind it.
I figured out the answer to my weather question about darksky already. I was able to get the forcast for the next day.
For the html files for the widgets, I should be copying them into my custom_css folder, right? I wanted to get my weather widget looking like the one in the screenshot I posted just so I can start learning. Should I copy the all of the “basexxx” files over too?
after that, the files you copied and the files in your dashboard directory are all you should edit.
edit: and if you get stuck with the weather widget, go back to a simple sensor. the weather widget is a more complicated sensor, which gets you stuck quite fast.
So, we can put html into the .dash file? That’s sorta what I was trying to ask.
More specifically, I was trying to insert a link into the HTML code to seperate the weather forcasts like in the example. According to google, that line is achieved by adding that “
” tag into the html file.
I understand the CSS part that you were saying earlier.
Anyway, for now, I will work on getting the weather populated into the widget. Perhaps I am getting too excited and am trying to do too many things at once. I am at work right now, I will have to play around with it later.
i dont know what you mean with “put html in the dash”.
a line like in your example isnt possible.
actually recreating the weather widget that you see in your example isnt possible.(sorry i just now understood exactly what you want)
we got a weather widget. thats the darksky widget. you can change its appearance like background, color, fontsize, etc.
but you can add pictures to a widget.
you can change icons from a widget that has an icon (like a switch or inputboolean) but you cant add an icon to a sensor.
to try such a thing you have to wait untill Andrew has created the option to create custom widgets.
Basically, I was asking if we could edit the html code of what appears in the box (widget). You were saying that css changes are made on the .dash file…so I was wondering if html changes to the individual boxes on the dashboard are also made in the .dash file.
So I’m assuming that example dashboard I posted was created in the old HADashboard.
I’ll have to reinstall that if thats the case. Then I will be ready to move over to HADashboard v2 once its out of beta and I’ve learned how to get everything customized…
it could have been made in the old dash.
but if so the weather widget is customized in a way that is unfamiliar for me.
it could also be part from another program that uses the original dashboard protocol.
so i cant give you an easy option to recreate that widget at the moment.
it is possible if you start changing the dashboard program itselve, but then you have to know a lot about python, css, html and javascript, to know what you are doing and you need to be aware of the fact that you could get problems while updating in the future.
