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

I feel like what you ultimately want is achievable,

just that some of what you don't want may have to occur...

By all of that, I mean that we can control images per state of a device and can control the background of tiles, so combining those with 2 or sometimes 3 tiles can produce the effect I think you are after.

If I am to help I probably need to have a bit more brain power to work through what you are after. I'm not sure I entirely get what you describe in your earlier post, but perhaps I just need to read it more closely. I will try to work through it at the weekend, if not before, unless someone else kindly jumps in before me.

Thanks for help!
I will add another reply here of how I do it on Crestron just for info, and if it would help with your pop-up editor project you mentioned on my "Dashboard design process question?" post. Should I post that here or a thread that is not so large or your email?
Tile id 3 image only
Tile id 5 device tile
What I was trying to do with my first-time using CSS:

Hi all, I'd like to ask you for assistance. I'd like to do a change/replace on all window tiles where the window name will be showed up without the "Window" word.
For example "Bathroom Window" will be just "Bathroom" without the work Window.
Are there any possibilities to remove the word "Window" on all window tiles by 1 or 2 commands instead to do it one by one as I have about 20 monitored windows what will generate about 40 new lines in CSS?
Thanks in Advance

It doesn't appear like it is possible, at least for what you are after. You might be able achieve it through some sneaky Javascript.... otherwise I would suggest manually setting them for now.... (Another thing to add to my list for my CSS editor....)

@ErvinN
There could be a hacked up way to do this. I just tried this and it seemed to work for me. Adjust the word space and the left px's to push the word "window" out of the tile display, essentially making it disappear. It's not really gone, it's just not in the tile display. Try it out!

.tile.window .tile-title {position:absolute; white-space:nowrap; word-spacing: 40px; left:10px; !important;}

Hi @chad.andrews, thanks for the hint. It is working fine for tiles which contains just two words (example Bathroom Window) but not really in case there are more than 2 words like Hall Upstairs Window :frowning:

Thanks for reply @sburke781

@ErvinN Maybe a hyphen would help in the device label, like Hall-Upstairs. Wonder would that be considered one word?

Thanks for suggestion, I already set each tile one by one.

Hello everyone,

I am trying to Remove the Slider from a specific Tile.

I have been able to remove the slider from all tiles in a dashboard using the code below which I have taken from this thread, but I haven't been able to modify it to remove it only from a specific tile.

I am guessing this is quite easy - can someone help?

.vue-slider {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}

#tile-xx .vue-slider {

where xx is the tile number

Hello again everyone,

In the last 2 days I have been making lots of changes to my Dashboards and adding CSS.

These changes were partially reverted yesterday and fully reverted the day before yesterday.

The weird thing is that yesterday I did changes, and then refreshed from other Devices up to an hour later and it was all working like a charm. Then a few hours later it had reverted to a state where some but not all changes were made.

What's even weirder is that one dashboard was like 90% reverted, and another only 30% reverted.

I use several tablets around the House and most of them use Full kiosk Browser and Legacy Dashboard Links - and at first I thought that one of them is probably the problem, but I am trying them one by one and cannot replicate.

I have now checked Lock Down Dashboard from advanced settings of one dashboard and I guess that might solve the issue, but I think there is something I am missing here.

Does anyone have an idea of what might be going on here?

Thanks

I can't offer any you any specifics on why you are seeing what you are, but can only suggest that any more precise details of sequence of events that lead up to the issue is valuable in diagnosing the issue. Not meant in any way as a criticism, only as something to aim for. You have provided quite a good level of detail so far, I can only encourage that you try to reproduce the issue in a very controlled way and capture the steps you go through, but I can appreciate the difficulty in achieving this....

Wow, I really sound like I'm at work..... :slight_smile: Well.... Why stop now....

I would suggest once you have any more details on the issue to set up a separate thread relating to this issue, both so it gains prominence and can be discussed in more detail on it's own, but also so it doesn't get lost amongst what is essentially a knowledge sharing effort here.

My gut feel is there is likely some kind of caching along the way, but it's hard to say where....

If you ever making changes to a dashboard make sure it isn't active on any other device, otherwise the active version on another device might overwrite your changes

Not sure if tile shadows is something that has been covered before, but something I discovered earlier today....

#tile-5, #tile-9, #tile-13, #tile-16, #tile-19, #tile-22, #tile-29 {
  box-shadow: 5px 5px 5px #26292C;
}

As always, there a more options to keep us interested....

I use this on nearly everything. Makes a very subtle but dimensional difference.

I agree, I'm not one for big, bold statements (with my dashboards), it's interesting how the smallest things just make things seem right.

Hi, I would like some help in fixing the layout of the thermostat icons, pictured below. I don't have CSS knowledge and I've made several attempts with everything I've read from previous posts, but I didn't get what I wanted.

image

Desired changes:

  1. I wish to remove the thermostat temperature and status indication, top line;
  2. The Mode and Fan Mode boxes, is it possible for them to be a single line, i.e. wider so that the text fits on one line only?
  3. On the icon next to the temperature, is it possible to set it to have no decimal place?
  4. Also on the temperature icon, is it possible to add that the humidity of the air appears somehow? So that I don't have to place a second icon?

Another question, I don't want any icon to show the battery level, is it possible to remove this information? Independent of the type of device?

image

Thank you very much for any help possible with these improvements.

I fell victim to that exact thing early in my css journey.

Hi Wilson,

Glad to see you customising your dashboard :slightly_smiling_face:

I'm happy to have a go at what you want with your thermostat, but I thinking @chad.andrews might have done more with this type of tile than me. Might be a while before I get a chance to take a look.