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

I want a specific tile to change its background by its current state and it has to be totally clean (no icons/text/Sliders).
:white_check_mark:So i've finally got the current state and background working!
:x: But when I put the (.tile-primary and .tile-secondary) data, it doesn't show the background.
:x: Even if I put it the data in the Tile ID itself (#tile-2
With data I mean the properties: Opacity, Visibility, Display.

I'm doing something wrong and its probably quit simple but I cant seem to think straight anymore..

Here's my code:


.tile {
background-color: rgba(0,0,0,0);
.tile-title {
display: none;
.tile-contents {
display: none;
padding: 0;
display: table;
width: 100%;
height: 100%;
.tile-primary {
opacity: 0.0;
.tile-secondary {
background-color: rgba(0,0,0,0);
visibility: hidden;
.dashboard div .header {
position: fixed;
bottom: -0.5em;
right: 0.0em;
z-index: 999;
opacity: 1.0;
zoom: 1.0;

#tile-2 .tile-primary.on {
background-image: url('http://XXX.XXX.XXX//local/Schilderij.png') !important;
#tile-2 {
background-image: url('http://XXX.XXX.XXX/local/SchilderijOFF.png') !important;

I tried this approach to replace the title on some of my dashboard tiles but because visibility: hidden; removed the containing element (tile-title in my case) it seemed to lose the "text-align: center" attribute for the replacement text. For me the following CSS (based on a Stack Overflow Post) seems to work and keep the alignment:

.tile-title:after { /* Default style for replacement text */
	text-indent: 0;
	display: block;
	line-height: initial;

#tile-4 .tile-title { /* Collapse the original line and move the text off screen */
  text-indent: -9999px;
  line-height: 0; 
#tile-4 .tile-title:after { /* Add the replacement text */
	content: 'Current Mode';

Hi noob here, I'm trying to figure out how to change the icons for HSM (armedHome, armedAway, disarmed, armingAway) as these statuses change. I setup a button that I'm testing with and so far I have been able to change the border color, transform the words to uppercase, and remove the title, but I haven't been able change the icons specifically to something local within HE. like directions_walk. Thanks in advance for any help.

How can I remove the Sunrise/sunset line from the OPWeather mytile? I don't see any references to those items when I Inspect the page.


How can I simplify the Clock format. I want the AM/PM style without the ticking seconds and the AM/PM indication.

You could try using my driver to create a virtual device to use on your dashboard.

Thanks! I'll give it a try


At first look that is perfect for what I want to do. Thank you for sharing!

1 Like

Pretty much have it like I want it. It is in 24 hour format, how can I change that? I set the template as attribute/formattedTime I used a little CSS to change the font size and the title. Now it is off center from top to bottom

Try using a lowercase "h" instead of an uppercase "H" in the format setting for the virtual device.

I may need to pass this one to others on this thread to comment on, or take a look later to find the solution, there will be one here somewhere...

Vertical center is usually some variation on:

  margin: 0;
  position: absolute;
  top: 50%;
1 Like


The hh did the trick. The centering of the text is just to quell my OCD. If I look at it quick enough I don't notice ! :))


1 Like

Is there an easy way to use CSS to convert a Unix timestamp to a date format?
My Orbit valve stores an attribute called "Next_Start_Time" in a Unix timestamp format but I need it to be human readable.

CSS can’t do it, best bet may be to use a rule to read it in and display it out using a variable connector.

You can't read Unix Timestamp dates ? Isn't that something they should teach us in school and just get rid of the old system :stuck_out_tongue_winking_eye: :man_shrugging:


As I am too old and most of my school teachers have probably passed away, I will not hold it against them😜


I have used variables before but I am no expert. Could you please direct me to a relevant source of information for this kind of a rule that reads attributes from a device and set them to a variable?

1 Like

can you convert the variable prior to the store on the Orvit Valve side?

Download the Hubitat app