Announcement - HADashboard v2 Beta 2!

Third party integrations HADashboard
281

I think you can do this with a hover PseudoClass - check out the simply red skin for an example.

That would be an additional feature - I do have plans to add separate stiles for active and inactive widgets.

282

I cant wait for Beta 3. I’m having so much fun with 2 right now :slight_smile:
I do have a question tho. Love the obsidian skin that rpitera did but I would like to change the background. Is there a easy way to do that?

1 Like
283

Yes, you can make a custom skin with just a different background. Follow the docs for making a skin and use Obsidian as a basis.

284

Would be awesome also having something like : camera detects movement and the dashboard witubthencam opens … Just collecting ideas … :slight_smile:

285

I’ve had that one on the list forever :slight_smile: Post beta though, I only just got a camera and I havent got any kind of motion detection working in hass yet.

286

Ok. I made a binary sensor for motion detection. My cam directly has no motion notification for hass

287

I’ll make sure there is a way to link the 2 together

288

Thanks, @Dayve67!

The line you are looking to change is this one in dashboard.css in the body section:

background-image: url("/css/obsidian/img/obsidian_bg.jpg");

289

Perfect. Thanks guys. Called it purple haze.

3 Likes
290

Perfect name!

291

Can you or rpitera walk me through this. I’m looking at simplyred and I see bits and pieces that seem to maybe do what I want but comments that say that they turn off what I want to do. So I’m confused.

292

If your class is .widget, then your hover class is .widget:hover.

Put it right under the .widget class and put in the styling you want to happen when you hover over a widget in there.

Example:

.widget {
  padding: 0px 0px;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: hsla(33, 12%, 67%, 0.41);
  border: 2px groove gold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 5px 3px 30px black;
}

.widget:hover {
  background: hsla(40, 69%, 40%, 0.81);
}

(Don’t let the hsla throw you; it’s just another way of specifying color - just focus on the format I am using in the example)

293

I think I got that part. But what I’m not seeing is how to put it in the styling. Everything in simplyred seems to use $background_style which seems to be “”

Sorry if it takes me a while to respond. My main fileserver at home, crashed saturday morning in a thunder storm. I’m restoring everything from backup right now so I’m checking on this while files download.

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.