Hadashboard V2 Competition

Third party integrations HADashboard
48

Thanks! The news section is some custom jquery i wrote to display news from my local newspaper. I posted the code link/info in the beta2 forum but it most likely won’t work for any source and would have to be adjusted. With that said I believe aimc is working to get something similar added into beta3.

The bulb is just a different icon loaded via the widget definition, I believe the beta docs specify how to change the icons.

49

Here some screenies:


1 Like
50

Why dont i see the icon:

this is my config:

lamp_sleeping_room:
  widget_type: light
  title: Lamp
  title2: Sleeping Room
  entity: light.color_lamp_sleeping_room
  icon_on: lightbulb-on-outline
  icon_off: lightbulb-outline
51

icon should start with fa- or with mdi-

52

thanks… figured it out :slight_smile:

1 Like
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.