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

Nope... No changes... Clicked save css and refreshed the page



And if it matter's @dJOS 's fork of the Wunderground driver.

1 Like

Try something like:

/* tile-39 Settings */
	#tile-39 .tile-title { visibility: hidden; }
	#tile-39 .tile-title:after { visibility: visible !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap !important; content: "testing" !important; }

Replace the content of "testing" with whatever you want, and tile 39 with 63.

You could also try my CSS editor I used to get this... Admittedly with a few missteps in hiding tile titles, but eventually I got there. A couple more tweak to make off the back of this experience...

That did it! How would I move the to the top and increase font size? (these examples will stick with me) And thanks!!!!


1 Like

If I had a regular sleep pattern I'd claim it was time for bed.... :slight_smile:

From what I know that is not as simple as it sounds... But hopefully I am wrong.... Probably not something I can answer so quickly....

As an alternative you can play with text tiles and the size of your tiles in the config (cog icon and the options tab, tab width and likely height to keep things in proportion). Essentially you then overlay a text tile at the top of the weather underground one you are working with. If you add it now, i.e. after having created the existing time it should be ok, otherwise z-index is your friend.

I'm rambling.... Create a new tile, use the Text Template, key in the text you want, position the tile (columns and rows) at the top left of your weather underground tile, make it 1 row high, click Add Tile, see how that looks. Then we can go from there. Can you tell my motivation for making something that makes this easier... :slight_smile:

1 Like

Did something change? I'm no longer able to see the source html for the dashboard tiles with Firefox or Vivaldi when doing a view source

What I see is

var version = "2.3.3" </script><link href=[](view-source: rel=preload as=script><link href=[](view-source: rel=preload as=script></head><body><noscript><strong>We're sorry but Hubitat Dashboard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=[](view-source:></script><script src=[](view-source:></script></body></html>

I can't say I have ever looked at the source using View Source, but I can at least confirm I see a similar output in Chrome. I tend to look at the Elements in Chrome's developer tools (pressing F12), which I can still do and navigate down to individual tile details.

Ok thank you. Now I see the html source.

Have not played with this is a while.

1 Like

Has anyone else tried rotating the slider 90 degrees for a dimmer or something similar? Visually it looks ok (ignore the fact I haven't dealt with the icon yet :slight_smile: ), but the control seems to respond to movement in both the vertical and the horizontal plane. i.e. if you click and hold your mouse on the circle, then drag either up or to the right, both movements increase the value of the slider.

#tile-40 .tile-primary > div.dimmer
  position: relative;
  top: -40px;
  left: 50px;
  width: 70px;
  transform: rotate(270deg);


I have mine in the same orientation and haven't found a method that allows for vertical movement only. But if you find a solution please post.


@sburke781 @william2 You can use the "level vertical" tile for a slider like that. If that's what your looking for.

1 Like

That worked. Thanks @chad.andrews.

1 Like

Well heck!!
I didn't even notice it until you pointed out, thank @chad.andrews !!

1 Like

Does anybody know how to hide the thumbnail on a image tile?

I tried display: none and visibility: hidden but they also disable the link.

So do you want an image tile that doesn't display the image, but brings up the image when clicked?

Maybe change the image to transparent.

Make sure you don't select the popUpImage class inside the modal div when making the element transparent. E.g.:

.tile.image div.inset-auto img.image {
    opacity 0.0

This is just a guess, but it should work I think. I think clicking the image tile would still bring up the modal.

Thank you very much. It works great.

#tile-133 .inset-auto {opacity: 0.0;}

Out of interest, can you post an example of what you are trying to achieve, i.e. the image(s)? Doesn't have to be the exact example you are working on, feel free to say no or to post other images to what you are ultimately using.

It's only for aesthetic. I wanted to replace the thumbnail with an icon. In this case, the tile simply open a year calendar image full screen.

To save space I could also set it totaly transparent and move it over the date/time tile so when touched it would open that calendar file.

1 Like

Sorry, missed this response for some reason. Nice looking dashboard.

Did you have any luck? Or am I misunderstanding what you posted, does that do what you want now? If not, I'd be going for some mix of z-index adjustments and overlaying tiles to achieve what you want.

On a separate topic... Has anyone ever played with dynamically adjusting the size / shape / location of tiles? I'm wondering if I dig into what smartly offers in the drag and drop feature, that may give me something....

Do you know what the CSS code would be to remove this for a specific tile/device instead of all thermostats? (i.e. so I can adjust a vThermostat for a smart vent to remove the mode/only leave the temperature setting, but have the actual mode options for the real thermostat)