Hadashboard V2 Competition

Third party integrations HADashboard
61

you can change the css file from your skin if you want to change all widgets as well as the variables file.
configuring widgets on widget level in the dash is only when you want to set individual settings.

1 Like
62

All, here is another that I quickly put together after an image i stumbled across on google images for a star wars ios app. Still working on colors a bit though.

2 Likes
63

:thumbsup: great work but less is more i think :slight_smile: one questions… would you mind telling me how to make the white edges of your widges? tha’s awesome! And how can i make those great different colors for them?

64

Thanks! Just adjusting the colors for the icons, so far happy with the blue, red, white and green blocks. Here is the CSS code to get the white corners:

li:before
{
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  z-index: 999;
}

li:after
{
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  z-index: 999;
}

.widget:before
{
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  z-index: 999;
}

.widget:after
{
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  z-index: 999;
}

Block colors are defined in variables.yaml, then on the individual widgets the widget_style line is used to target the variable. You can see it in action on github in my clear-sky and dark-flower skins.

1 Like
65

sorry but i dont find wich file :stuck_out_tongue:

66

The CSS code would go in the dashboard.css file, making sure that any of the same name are removed.

Here is one of the skin github pages and you can see the color background variables in the variables.yaml file:

67

Can anyone tell the exact path as i am not able to load the skins.

do we have to put any entry in dashboard.dash file also.

68

it seems like you have it placed at the right place.
you should be able to use your skin by:

http://yourADaddress/yourdash?skin=myskin

69

Is your skin/dashboard free to download somewhere? I just started with hadashboard and need a solid starting point :wink:

70

uhh, found the examples in …/conf/example_dashboards! Let’s play around!

71

You can always copy one of the skins I designed for the beta over to the custom_css folder, rename it and use that as a starting point too.

72

Got it working. Thanks.

73

Thanks, after some stumbling around I found the folder for skins. CSS hacking should be ok for me. I’ll have a look into the example_dashboards and the DASHBOARD.md to learn how to setup dashboards.

74

Just remember to always work on a copy of the existing skins in custom_css rather than on a skin directly.

Otherwise you will prevent your updates from git to work correctly.

75

I have been pretty busy the last week and am still hoping to get back to it and adjust some of the active/inactive icons to fit a bit better. I will try to post what I have on github today (without the wanted adjustments). I will post the the link here.

1 Like
76

My skins are located here:
pi@homeautomation:~/.homeassistant/appdaemon_dashboard/appdaemon/conf/custom_css/

Is this the wrong place?

The readme (DASHBOARD.md) states:

Start off by creating a directory called custom_css in the configuration directory, at the same level as your dashboards directory. Next, create a subdirectory in custom_css named for your skin.

I start appdaemon with:

ExecStart=/usr/bin/python3 -m appdaemon.appdaemon -c /home/pi/.homeassistant/appdaemon_dashboard/appdaemon/conf/

That’s the relevant part of /etc/systemd/system/appdaemon.service

In the same directory is appdaemon.conf lying around and my “dashboards” directory too. Permissions are set ok.

Am I wrong? Syslog yells

python3[7001]: 2017-03-20 21:43:58.427284 WARNING Skin ‘test’ does not exist

If I copy custom_css to ~./homeassistant/ it all works. But that’s not what the readme told me :smiley:

77

@linuxlurak Here is the link to the “deathstar” skin. Please be sure to read the readme file:

1 Like
78

Where can I find documentation to change sizes of text, icons etc. for specific “Cards”? Currently im working on an example of a different widget but some properties dont work, so maybe a readthrough would help alot :slight_smile:

79

Thanks a lot @lordsiris. Is there something special in the readme file? Or why the special hint? cheers!

80

Little preview of my “Flat” UI design skin i’m currently working on.

dashboard_flat.png1530×808 58.2 KB

Alot of colour only to show the options, some of the tiles do not make any sense to put them like this :slight_smile:

20 Likes