Hadashboard V2 Competition

Third party integrations HADashboard
53

3 Likes
54

Jeez that’s not fair - who’s gonna beat that?

55

Does this mean you can’t use other icons? eg icon files on your own system.

56

As far as I know u have no choice to use own icons. Please someone correct me if I’m wrong !

U like the skin? Will upload it and u can use it :wink:

57

at this moment you can use the FA icons and the MDI icons.
Andrew has in his to do list to create the option to use your own icons in a future version.

58



image.jpg1366×768 246 KB


1 Like
59

Neat idea using round buttons!

60

Thanks…Playing around with design .Wanna create an awesome skin…Unfortunately u must configure widgets directly in dashboard itself instead of variables

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.