Announcement - HADashboard v2 Beta 2!

Third party integrations HADashboard
294

In the other thread I have a post about setting up Raspberry Pi Docker, but one aspect is common to all Dockers, I suggest a mod to appdash.py to make sure it is binding 0.0.0.0. Iā€™d agree with you that it should be its own optional parameter, with the default being 0.0.0.0.

295

you need to look at the css file, you are looking at the variables.yaml.

296

Ok, itā€™s the linear-gradients that were giving me problems. the moz, webkit, o, ms, etc are just support for different browsers??

297

as i learned today: yeah :wink:
this website gave me a lot of help with it:

298

well I have it doing almost exactly the opposite of what I want now. When I hover over something it turns gray. I want it to be gray starting out and turn blue. I know how I can get it to turn gray, but I canā€™t seem to change the hover color at all. LOL

299

Awesome Styling! Respect! Nice Nice U might want to share your code? I know it is hours of work but if we share a bit our bits. eberybody can learn and save tjime :slight_smile:

U can also post it in:

1 Like
300

In dashboard.css, make sure you set your gray color in .widget and set your blue color in .widget:hover.

301

I changed the value in .widget.hover several times and it didnā€™t appear to impact anything.

302

Odd as that should work fine. Are you sure you donā€™t have anything downstream that would be affecting it?

Remember that the flow order of styling is:

dashboard.css

    variables.yaml

        widget styling in dash

Styles cascade down (thatā€™s where the cascade in Cascading Style Sheets comes from!) and the final style applied is the one that is rendered.

That means that if you establish a style in dashboard.css and then establish another style of the same selector in one of the places below it, that will be the style that ends up being applied.

303

Ok so I need to look for anything downstream that has .widget or .widget:hover Right?

304

I copied the dashboard.yaml from simplyred as my starting point. I changed the gradients to be blue in the .widget section. In the widget:hover section I changed the value as follows. I did a grep for widget in the custom_css/cars directory and in the conf/dashboard directory.

venv) pi@haweb:~/appdaemon_dashboard/appdaemon/conf/custom_css/cars$ grep .widget *.*
dashboard.css:/* Base widget styles */
dashboard.css:.widget {
dashboard.css:.widget:hover {
dashboard.css:.widget:active {
variables.yaml:#Page and widget defaults
variables.yaml:scene_widget_style: $background_style
variables.yaml:mode_widget_style: $background_style
variables.yaml:script_widget_style: $background_style
variables.yaml:binary_sensor_widget_style: $background_style
variables.yaml:device_tracker_widget_style: $background_style
variables.yaml:input_boolean_widget_style: $background_style
variables.yaml:switch_widget_style: $background_style
variables.yaml:lock_widget_style: $background_style
variables.yaml:cover_widget_style: $background_style
variables.yaml:clock_widget_style: $background_style
variables.yaml:weather_widget_style: $background_style
variables.yaml:label_widget_style: $background_style 
variables.yaml:sensor_widget_style: $background_style
variables.yaml:reload_widget_style: $background_style
variables.yaml:navigate_widget_style: $background_style
variables.yaml:media_player_widget_style: $background_style
variables.yaml:light_widget_style: $background_style
variables.yaml:input_slider_widget_style: $background_style
variables.yaml:climate_widget_style: $background_style
variables.yaml:group_widget_style: $background_style
variables.yaml:iframe_widget_style: $background_style


footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: navigate
footer_widgets.yaml:    widget_type: reload
footer.yaml:  - include: footer_widgets
garage.dash:    widget_type: label
garage.dash:    widget_type: clock
garage.dash:    widget_type: switch
garage.dash:    widget_type: switch
garage.dash:    widget_type: cover
garage.dash:    widget_type: cover
header_widgets.yaml:    widget_type: label
header_widgets.yaml:    widget_type: clock
header_widgets.yaml:    widget_type: iframe
header_widgets.yaml:    widget_type: device_tracker
header_widgets.yaml:    widget_type: device_tracker
header_widgets.yaml:    widget_type: device_tracker
header_widgets.yaml:    widget_type: device_tracker
header.yaml:  - include: header_widgets

Here is the widgets section from my cars/dashboard.css file

.widget {
  padding: 0px 0px;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: rgba(0,0,255,0.60);
  background: -moz-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%);*/
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(129,112,255,1)), color-stop(27%, rgba(29,0,245,1)), color-stop(69%, rgba(16,1,135,1)), color-stop(100%, rgba(16,1,131,1)));
  background: -webkit-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%);
  background: -o-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%);
  background: -ms-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%); 
  background: linear-gradient(to bottom, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7081', endColorstr='#830110', GradientType=0 );  
  border: none;
  -webkit-border-radius: 37px
  -moz-boarder-radius: 37px;
  border-radius: 60px;
  box-shadow: 0 3px 5px #999;
}
.widget:hover {
  background: rgba(128,128,255,0.60)
}
.widget:active {
  background: rgba(0,0,255,0.75);
  box-shadow: 0 1px #444;
  transform: translateY(5px);
}
305

Hereā€™s what I just did to test:

  • I just copied simplyred into custom_css and named it chip.
  • I fixed the paths so they were correct as far as the references to images and scripts.
  • Then I copied and pasted your widget block into the dashboard.css and saved it and reloaded.
  • What I got was blue gradient, round widgets that turned a grayish blue when I hovered over them.

The image below shows the Reload widget being hovered to show the change.

Is this not what you are seeing?

306

Furthermore, if I switch the background statements in the CSS like so:

.widget {
  padding: 0px 0px;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: rgba(128,128,255,0.60);
  border: none;
  -webkit-border-radius: 37px
  -moz-boarder-radius: 37px;
  border-radius: 60px;
  box-shadow: 0 3px 5px #999;
}
.widget:hover {
  background: rgba(0,0,255,0.60);
  background: -moz-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%);*/
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(129,112,255,1)), color-stop(27%, rgba(29,0,245,1)), color-stop(69%, rgba(16,1,135,1)), color-stop(100%, rgba(16,1,131,1)));
  background: -webkit-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%);
  background: -o-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%);
  background: -ms-linear-gradient(top, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%); 
  background: linear-gradient(to bottom, rgba(129,112,255,1) 0%, rgba(29,0,245,1) 27%, rgba(16,1,135,1) 69%, rgba(16,1,131,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7081', endColorstr='#830110', GradientType=0 );  
}
.widget:active {
  background: rgba(0,0,255,0.75);
  box-shadow: 0 1px #444;
  transform: translateY(5px);
}

I get the gray widgets that switch to the blue gradient when hovered like you wanted. Note that if you wanted them to be truly gray instead of just bluish gray, you need to set the color to

background: rgba(161,161,161,0.60);

instead of

background: rgba(128,128,255,0.60);

307

What Iā€™m getting is more actually Gray. See the Garage lights widget right next to the cover (car) in the middle of the one I have earlier in the post.

308

But the color is changing when you hover though, right?

309

Yes, the color changes when I hover. But setting the color in the widget.hover: section doesnā€™t seem to effect the color.

No Errors in appdaemon.log, appdaemon.err or on the command line.

310

Iā€™m not sure how this can be happening. I copied and pasted your code and everytime I change the values in the background in .widget:hover, it changes to another color for me.

Iā€™m using a Chrome browser for testing - what are you using? Maybe thatā€™s it?

311

Iā€™m on a mac using chrome. Let me try another browser.

312

Should be the same then - try clearing your browser cache.

313

Just tried it for the first time ever from a windows PC at work running explorer, same thing. No way it could have been in cache there.