The Noob's (in)complete guide to CSS for Hubitat

I do still REALLY wish could remove the blip you see from a mobile device (or tablet). When tapping, you get a faint blue highlight flash of the entire grid area. So in my case since I have rounded my buttons and added active effects it really muddys it up and looks bad.

Edit: oh! I think I might have it. I'll try it shortly when I go to lunch.

Well this was SUPPOSED to work but it's not cooperating.

The -webkit-tap-highlight-color doesn't work on every browser and .noSelect, I believe is for preventing text highlighting, but I may have that wrong.
Maybe some other member could help with this request, not sure it is possible, but I could be wrong.

@chad.andrews, @thebearmay, @sburke781 and thoughts on this?

Sorry, not sure how you might do that ...

Well I sorta got it working. Oddly enough it causes the highlight to now disappear if I have a :active set up. If I don't, the highlight is still present. I'm ok with that.

Oops scratch that. I just checked again and it's still there.

Why don't you post your dashboard with CSS so other can look at it and maybe provide alternative means of reaching your goal.

Just a thought.

1 Like

Here's the main one. I'm working on the idea of rarely having to switch to another one (unless it's kid related, calendar, or technical info that nobody but me gives a crap about) so it's getting ALL the css love I can muster. Yet, I want it to be for an actual appearance improvement and not just because I can.

I really want to add some flare to the bottom row which is purely information.

I also want to sort out a much more polished look for the clock (it's big to be seen from across the room)

I LOVE how the keypad itself has evolved and I'm really feeling like that is it's final form aside from minor tweaks if I learn new things. the stuff on the side of it isn't quite there though.

Capture

1 Like

I may have found a similar Stack Overflow post to what you used for the tap highlight color... But have you tried using rgba(0, 0, 0, 0) instead of 255's like you had in your sample CSS?

And what are you applying the CSS to, the tile, a particular element of the tile?

Also, not sure if you mentioned this, but what browser / version and platform are you accessing this on? i.e. Chrome vXX on an Android tablet, Windows, etc?

Interestingly, I saw someone comment that it is actually an accessibility feature for those with vision impairment....

I think that may actually be my issue.

Fully Kiosk Browser 1.44.1 on a 7th gen Fire10. Those both are not typical platforms.

Yeah, I thought I may have had something similar, but I can't say it is that noticeable, in Chrome on Windows. Maybe try loading the dashboard on another setup and see what happens....

Actually, what it may be is one of those trying to apply some styling over the top of what you define. While still not that noticeable, when I turn on a "dark reader" chrome plugin, I do get a very short flash on a switch tile. The plugin I am using injects some styling into the page to achieve changes to colours and brightness being used. Maybe Fully Kiosk is doing something similar? Are there settings around appearance you can tweak?

This may be deviating a little outside of CSS now.... Perhaps another thread and post back here when we have a solution?

1 Like

getting back to css related directly....

I swear it was already addressed but I can't find this specific example.

Replacing text in a tile with a HE native icon. The tile is an attribute template.

#tile-71 .tile-primary {visibility:hidden;}
#tile-71 .material-icons {content: "he-info_3";}

I thought that was it but it's not working

I am pretty sure the material-icons class would only be available on tiles that include an icon normally, so switches, etc, probably not for the attribute template.

I'm thinking with a bit of creative thinking this may be something like what you need, without being a copy-paste solution...

The use of the fonts and the hex value may need to be adjusted to suit the content of an attribute tile and you may then want to look at alternatives for the icons used.

Will need some experimentation....

1 Like

I had seen that. I was thinking that the local icons could be referenced the same way. Only thing is I have no idea where the get the \e2ea or whatever in the content section.

To give you a visual of what and why I want this...

I was wanting to use one if the info icons instead. Goes more with the feel of the rest of it.

Are you wanting a single "icon" image, or a different one depending on the value of the attribute? A single one should be simple enough (I think....), but a different one depending on the attribute value is not something I have seen, apart from smarts in drivers or iFrame / HTML files....

Just a single one

Hmmm.. now I need to deliver..... silly me for offering the prospect of a solution.... :slight_smile:

1 Like

Seems a little harder than I thought, might need some more work....

1 Like

Yeah, I've been trying multiple things that seem logical and nothing works

Is it possible to add your own custom icons by putting them on the Hubitat via the file manager?