Example of css to remove device name from a tile

📢 Feedback Feature Requests
1

Have some tiles to show stats of the hub watchdog.. want to remove the device name as it is not relevant.. Any examples thanks

2

There is a CSS for noobs thread, let me find it plus the example you are after...

1 Like
3

Here's the incomplete CSS guide....

1 Like
4

Here's an example from one of my Dashboards, hiding the title on multiple tiles ....

#tile-8 .tile-title, #tile-56 .tile-title, #tile-57 .tile-title, #tile-58 .tile-title, #tile-59 .tile-title, #tile-60 .tile-title, #tile-61 .tile-title, #tile-72 .tile-title, #tile-73 .tile-title, #tile-74 .tile-title, #tile-75 .tile-title, #tile-76 .tile-title, #tile-77 .tile-title, #tile-68 .tile-title, #tile-66 .tile-title, #tile-67 .tile-title, #tile-79 .tile-title, #tile-63 .tile-title {visibility: hidden; display: none;}

2 Likes
5

I forgot to ask, do you know how to update the CSS for a dashboard?

6

got it thanks

.tile-title { visibility: hidden; }

2 Likes
7

Once you get comfortable with CSS, or even before, you may be interested in Smartly.

https://community.hubitat.com/t/release-smartly-v1-06-custom-icons-thermostat-re-design-custom-dashboard-link-labels-and-icons/36681?u=sburke781

1 Like
8

already using smartly..
damn that worked perfectly to remove the title but then when refreshing the entire value is pushed done as well

9

Replace '99' below with the specific tile ID and use 'display: none;' instead of 'visibility: hidden;' if you would like to remove the title to reclaim the space it's taking up. 'visibility: hidden;' will still occupy the space.

#tile-99 .tile-title {
  display: none;
}
1 Like
10

thanks getting better. title gone but now need to center the text below it as it pushed up to the top.
thats why i tried hidden instead of none.

11

Perhaps a screenshot would help a little...

12

tried this didnt do anything

.tile-title {visibility: hidden; display: none;

text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Annotation 2020-08-31 115912
Annotation 2020-08-31 115912597×715 609 KB

13 
.tile-contents {
  height: 100%;
}
3 Likes
14

@kahn-hubitat just to add some icon/text size and position control to your CSS tool belt.

#tile-123 .material-icons {
position:relative;
top: 6px;
right: -2px;
font-size: 33px !important
}

or

# tile-123 .tile-primary   {
position:relative;
top: 6px;
right: -2px;
font-size: 33px !important
}
15

techmedx what do you mean.. that doesnt do anything.. that was a screen shot it lines up when display on my lg20 phone?

16

you used % not px, what I posted does work.

image image image image

EDIT: I am also using position 'relative' to it's current position. You can use 'absolute' as well but then you start from the upper right (I think you'd have to double check it) and need to add more top/right to compensate. I find using relative works best for me as I generally only want to bump something one way or another a touch.

17

ya not working in my dashboard..
but the tile height 100% does work

1 Like
18

cool, each tile acts different (and spelcheck knows them/code better than I). I was just passing that code on for you to use later as needed, since you seem to be interested in learn CSS

1 Like
19

ya im now trying to get javascript injection working so i can change background color in a function by range.

1 Like
20

If you get that working I want to be the 1st to know :hugs: I can only use about 30 degrees of temp color changes at a time or it'll kill my cloud dashes. I have to change my code for each season. Now that I type that I should just make a dash back for each season and c/p, but I'll never keep them all up to date.

Yeah cretainly LMK if you get this going for sure!

1 Like