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

[ShadoW]

HELP!
I want a specific tile to change its background by its current state and it has to be totally clean (no icons/text/Sliders).
So i've finally got the current state and background working!
But when I put the (.tile-primary and .tile-secondary) data, it doesn't show the background.
Even if I put it the data in the Tile ID itself (#tile-2 .tile-primary.off).
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:

Summary

.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;
-moz-transform:scale(1.0);
}

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

[Emjay]

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';
}

[william2]

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.

[elentz]

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.

Thanks

[elentz]

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

[sburke781]

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

[RELEASE] Formatted Date and Time on Dashboard Tiles

EDIT: Personally I feel like, while there are differences in the implementation, I would suggest people start by looking at @jshimota 's driver. It provides a more rich set of attributes for display on dashboards and use in rules. I wanted to adjust the formatting of the date and time on my dashboards, so I have setup a small device driver to achieve this, along with help from @luarmr. The driver provides: Ability to adjust formatting preferences for date and time display Selection of a tim…

[elentz]

Thanks! I'll give it a try

[elentz]

sburke781

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

[elentz]

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

[sburke781]

@elentz

It is in 24 hour format, how can I change that?

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

@elentz

Now it is off center from top to bottom

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

[thebearmay]

Vertical center is usually some variation on:

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

[elentz]

Thanks!

[elentz]

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 ! :))

Thanks

[amithalp]

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.

[thebearmay]

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.

[nclark]

@amithalp

in a Unix timestamp format but I need it to be human readable.

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

[amithalp]

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

[amithalp]

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?

[thebearmay]

How to do a Unix timestamp in a variable in rm4.0?

You can set the variable to the current epoch time like this: ["Select operation: current time" and "Select seconds or milliseconds: milliseconds" options chosen in "Set Variable" action in Rule Machine] I used a number variable here, since the current time in milliseconds wound be a long (or whatever similar data type Hubitat/Groovy ends up using for this). I do not believe these options are available for strings. However, if you share what you're trying to accomplish (with the automation a…

[jshimota]

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