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

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:

3 Likes

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

2 Likes

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?

@Automatican created a rule that can do this Need to Store, Do Math and Trigger from Date Variables - #16 by Automatican?

Alternatively maybe @dman2306 might consider adding this conversion in?

1 Like

I have asked for it and waiting to see if he will be willing to as I am missing the “know how“

Ok, kind of stuck here.
I was playing around with a new dashboard layout, and want to size the font on the "date/time" tile to 1vw.
This way i can see the complete dashboard on various sizes of screens.
But for some reason, only the date seems to accept the new size, but the clock font will not.

The definition:
#tile-1 div.tile-primary {color: #6aa84f; font-size: 1vw !important}
#tile-1 div div div {color: #6aa84f; font-size: 1vw !important}

The result:
image

It seems to be ignoring my settings.

Anyone removed the text below the slider on a music player tile? The whole thing is part of the tile primary, that's all I've figured out so far...

EDIT: Found it:

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

I looked through and can't find it.

Setting the on state color of a switch to a unique color? Only want to change on, off stays the same as set in templates.

All switches or just one?

Just one. I would assume it can be done with css but I'm not sure how.

You can get partially there with

#tile-xx .on {
    background-color:orange;
}
1 Like

Tried that and it didn't work. Also tried !important after it.

Edit: I must have had something out of whack cause now it's working. Red square in the middle of a green tile.

The issue is that the on/off is down a level from where it could affect the whole tile.

1 Like

I think I may be able to accomplish this another way. If I have a simple rule that auto changes a different device type that has a template that I haven't used in that dashboard

Add the following in the layout section for your button

 "customeColors": [
        {
          "template": "switches",
          "bgColor": "rgb (255,4,4)",
          "iconColor": "rgb(255,255,255)",
          "state": "on"
        }
      ] 

make sure to remove the template it is stating for that switch.

I should add, back up your original configuration prior to making the change in case something goes wrong.

Update: the above change will apply to all switches. To modify just one switch, the following will work.

This basically targets one switch and changes the back ground color for off and on, in this case the background when off will be blue and when on it will be red, in addition it changes the flip icon to black when the switch is on.


#tile-14 {
    background-color: rgba(0,0,255,1) !important;
}

#tile-14 .on {
    he-switch_2_flipped; color: black;
}

#tile-14[style*="background-color"] {
    background-color: rgba(255, 0, 0, 1)!important;
}

OFF
image

ON
image

3 Likes

Another thought...

Maybe it's not in CSS

Having an icon (HE native) shown for a link tile or a Dashboard link