its just something i tried during pre beta.
in a skin you can set your own background.
and you can set the widget background for each widget, or you can set it for all widgets in the skin.
background-color: rgba(0,0,0,0.4)
is the background for the last one.
do we have something for the css … i mean like a table to watch what is possible? or is there really css skills needed ?
in the assets/css dir you find the skins.
it contains a css file and a variables file.
in both you can modify a skin.
modifying the variables doest ask a lot of css skill.
some example parts from it:
switch_icon_on: fa-circle
switch_icon_off: fa-circle-thin
switch_icon_style_active: $style_active
switch_icon_style_inactive: $style_inactive
switch_title_style: $style_title
switch_title2_style: $style_title2
switch_widget_style: $background_style
switch_state_text_style: "color: $white"
the parts with a $ sign are variables that are set earlier in the file, like:
background_style: "background-color: #444"
style_title: "color: $white"
style_title2: "color: $white"
white: "#fff"
even with basic css knowledge you can go a long way.
I am total newbee when it comes to css…
Your third skin is just awesome … Can you please share the skin for newbees like us …
Thanks in advance …
ill have to recreate it, but ill see what i can do.
i decided not to recreate the skin, but to tell you how you can make it yourself.
- first in your appdaemon basedirectory find the directory appdaemon/assets/css
- copy the directory default and give it the name you want your new skin to have
- in the new made directory create a directory with the name img
- find any jpg file you like as your background (google?) and copy it to the img directory
- in your skin directory find the file named.variables.yaml
- change the line
background_style: "background-color: #444"
to
background_style: "background-color: rgba(0,0,0,0.4)"
this set the background from your widget to color rgb 0,0,0 which is black. the last figure is how transparant you want the background to be.
- find the file dashboard.css in your skin directory
- find the line body {
- create a new line beneath it like
background-image: url(/css/your_skin_dir/img/your_background_file.jpg);
and your skin is ready.
mayby you would like to lose the rounded corners?
then find the lines:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
and replace them with a single }
my background i found here:
but you can find many more searching in google for dark background
this site also has some nice ones:
http://hd-wall-papers.com/wallpapers/dark-background-images.html
so be creative and show me the result 
edit:
allthough this is working, the preffered way is creating a directory custom_css in the conf dir and copying the default directory to that directory.
the line that points to the pic then becomes:
background-image: url(/custom_css/your_skin_dir/img/your_background_file.jpg);
3 Likes
Here is a screenshot of another I have been working on and a little bit different than the “clear_sky” skin I posted in the beta forum.
7 Likes
AWESOME!!! I need to reproduce this!!! WOW!
Indeed! Best seen so far!!
I really have to dive into it 
@Tyfoon @thundergreen Thanks!! I will update it to beta2 and get it posted up on github. Will let you know when I’ve got it out there.
I followed your short tutorial but it just wont change the skin 
should be url(/custom_css/skin_dir …)
body {
background-image: url(/custom_css/dark-forest/img/dark-forest.jpg);
margin: 0;
background-color: #222;
font-size: 15px;
color: #fff;
padding: 0;
line-height: 1;
font-family: 'Helvetica Neue', 'Helvetica', 'Open Sans', 'Arial'
}
like this ?
nothing of this works… will there be new skins soon? i dont know how to do this … it is not that easy as promised
just wanna use the example daasbard with my entites und background wallpapaer
try:
body {
background: #222 url(/custom_css/dark-forest/img/dark-forest.jpg) no-repeat 50% 0 fixed;
background-size: cover;
margin: 0;
font-size: 15px;
color: #fff;
padding: 0;
font-family: 'Helvetica Neue', 'Helvetica', 'Open Sans', 'Arial'
}
Here is the latest:
Please be sure to read the readme file for some important info!
3 Likes
