Hey Julius, sorry I haven’t replied earlier. Didn’t see the replies on here.
I was able to get the Alarm (and other widgets unsupported by the clear_sky skin) to work by adjusting the variables.yaml file.
First, make a duplicate of config/appdaemon/cusom_css/clear_sky and name it something else. In my case, nilly as that’s my dog’s name who is featured in the background photo.
Next, replace the variables.yaml file in the new directory with the one here. Bear in mind that this file may not be exhaustive. It may have changed a bunch since I fixed it. It’s just the clear_sky variables.yaml with newer widgets added (alarm, etc.) New widgets may have been added since I changed it:
variables.yaml (13.3 KB)
IMPORTANT!!!
Make sure to open the file and change clear_sky in line 31 to whatever your new directory name is (nilly in my example). It reads:
- <script type="text/javascript" src="/custom_css/clear_sky/js/helpers.js"></script>
Also, you can compare the variables.yaml I attached with the official updated one here. When adding blocks, make sure to change them to be the same styles as the one I posted as they go with the clear_sky skin and not the default one.
Next, download the dashboard.css file from the Appdaemon Github and replace the 2nd block of text that looks like this:
body {
margin: 0;
background-color: #222;
font-size: 15px;
color: #fff;
padding: 0;
line-height: 1;
font-family: 'Helvetica Neue', 'Helvetica', 'Open Sans', 'Arial'
}
with this:
body {
margin: 0;
background:transparent url(/custom_css/nilly/img/background_1.jpg) no-repeat 0 0 fixed;
background-size:cover;
font-size: 15px;
color: #fff;
padding: 0;
/* line-height: 1; */
font-family: 'Helvetica Neue', 'Helvetica', 'Open Sans', 'Arial'
}
Make sure to change nilly and background_1.jpg in the (/custom_css/nilly/img/background_1.jpg) line to whatever you named your directory and picture.
Replace dashboard.css with this new one.
If you want to change the background photo to something else; in the new directory, open the jpg file in the img folder with your favourite image editor, edit it and save it.
That should work. I did it awhile ago so my memory is hazy but I don’t think there is anything else that needs to be changed.
P.S. If you want to change the rounded corners of the widgets to be more or less rounded, edit the px of the following 3 lines in the .widget block of the dashboard.css file (around lines 127 - 138):
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
Mine are 10px, 10px, 15px. Looks half decent.
G’Luck!
