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

Sorry for coming back so late but I was occupied by my job.

This is what my dimmer tile with a volume template looks actually :
image

I used this CSS code to remove the title and the speaker icon:

#tile-264.volume div.tile-title { display: none; }
#tile-264.volume .volume_up { display: none; }

But I can't handle it to remove the percentage '2%' on the example, without removing the slider too. The inspect code is the following:

Based on my example, and the HTML from your screenshot, I think you need to use:

#tile-264 .tile-primary > div.dimmer > div { visibility: hidden; display: none; !important; }

This Noob's guide is really helping!
See my included photo hope that helps with my Questions?
How do I make tiles round and smaller?
How do I change color of the tile?

Rounder is easy, click on the cog wheel to get to:

Thanks, tried that but only got a horizontal oval, not full round.
Did I do something wrong; I think about + round 70-100 rounding stopped.
Trying to have a Round Switch tile when active (yellow) on top of a transparent image tile underneath to show light is ON.
A better way would have been Switch Device selected then template type Attribute (with a desired device Image selected), That didn't work since the tile would not control the light unless Tile type was Switch, Dimmer or Bulb.
My objective.
Have an ACTIVE Transparent Device tile that is on top of a transparent device image.
Being sized much smaller and a certain color on top of the under image,
In this case light yellow when active.
Note: Would be nice not to have multiple tiles per Device.
Ideal would be to have a single Device Tile that that selects on of two images one for Active and one for not active.

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....)

1 Like

@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

1 Like

@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

3 Likes

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....

1 Like

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

4 Likes

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....

2 Likes