I changed the value in .widget.hover several times and it didn’t appear to impact anything.
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.
Ok so I need to look for anything downstream that has .widget or .widget:hover Right?
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);
}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?
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);
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.
But the color is changing when you hover though, right?
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.
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?
I’m on a mac using chrome. Let me try another browser.
Should be the same then - try clearing your browser cache.
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.
I don’t know what to tell you buddy - it’s working as you intended over here. Maybe there is a formatting error somewhere.
The only thing I can suggest at the moment is to recopy simplyred and rename it to cars2.
Then copy just the widget sections alone from the example you provided and test it again before changing anything else in the skin and see if you get the same results I have been getting.
Ok, I’ll give it a try
1 Like
if i am seeing it correct you have your dash and yaml files in your custom_css directory.
i dont know if that causes the trouble, but the dash and widget yaml files should be in your dashboard directory and only the file that are part of the skin need to be in the skin directory.
Nope, the .dash and yaml files are in the dashboards directory. The css, and img files are in the custom_css/cars directory.
It’s something in the variables file. I copied the dashboard.css and variables.yaml file over from simply red and made changes one line at a time to the dashboard.css file. Everything worked fine. The only differences are where I included the background image and changed color values. And it works with those changes. The variables file has a lot of differences though. Not sure what they all are. Some are places where the bad one points to color variables and simplyred points to a “style”. It’s working now. That’s the main point.
Thanks for your help.
1 Like
No worries. Glad to help.
If you’re running on Android you can use my app here Android Dash Board Browser with Motion Detection and MQTT to achieve this.
Just add an automation that reacts to the camera motion and sends an MQTT message to the tablet to load another URL with the right dashboard. Not as elegant as an HADashboard integrated solution tough.