[RELEASE] Simple CSS Editor

[jeppsenc]

Makes sense. Thanks.

[sburke781]

I would also like to add an option to reposition text, but not sure when I will get a chance to look at it.

[jeppsenc]

I appreciate your effort on this. It is a valuable tool. On the subject of adding text over an image, the reason I thought I could do it is because in the editor there are options to select modifications to the Title, Primary, Secondary, and Tertiary text. I thought I coud add it there.

[thebearmay]

I'd have to check from a device that allows more detail than my phone but the image tile template may not have a title or primary secondary....tag

[sburke781]

I'd expect the same.... Which is why I would like to li.it the options in my editor.

[NWTony]

I'm suddenly getting a blank instead of the Simple CSS Editor in Hubitat. I've tried HPM repair and hub reboot; no change. My only guess is it broke today with the 2.3.9.136 hub update.
It also seems to be working awfully hard to accomplish it:

Is anyone else seeing this?

[sburke781]

I haven't opened it myself under the recent platform release. I'll need to take a look after work (another ~10 hours or so).

[sburke781]

Curiosity got the better of me....

I was still running the last beta release on my C-4 development hub, 2.3.9.134, which still allowed me to open the editor. I upgraded to 2.3.9.136 and was able to open the editor under that platform version as well.

Could there be something else you have changed @NWTony ? Maybe a device / tile you have added to the dashboard? Perhaps the name of the dashboard has changed?

Before you do too much more I would suggest taking a backup of the CSS and Settings files.

You could try the tried and tested IT approach of "turning it off and on again".... (Doing a hub reboot)

[672southmain]

Simon, just as another data point, I just did a clean install of Simple CSS editor using HPM on C-8 with 2.3.9.136, made the device on a single tile dashboard that has never had Simple CSS editor installed on this hub. I didn’t fully check it out, but I was able to make simple CSS changes. This is a hub that has never been in the beta program, so it’s pretty vanilla.

So, as they say, seems to work for me.

[sburke781]

Thanks for taking the time to take a look at this and report back @672southmain , hopefully it means there is not a broader issue.

[672southmain]

That’s why I was so very specific about the conditions under which I tested. Perturbations of the specific test conditions might yield different results.

[NWTony]

Thanks @sburke781 . As I said, I did do both a repair and a reboot to no effect. I also validated both the JSON and the CSS. For real. None fixed it. And I tried several browsers.

Even odder, it is now working, several hours later. But... that does mean it's working.

[NWTony]

@sburke781 I've soused it!!!!

It was broken again this morning, but because I'd seen issues with a background image, I figured out why.

I regularly access my hub by name rather than by IP address, and sometimes SSL. (Yes, I have a wildcard certificate, my own domain and a local name server.)

When referencing "local" (hubitat-hosted) files from the Dashboard, they only work when on the same precise protocol-and-host even if fully specified, unless no host at all is specified. In the case of Simple CSS, it only works with the unprotected IP address.

So, assuming my domain is nwtony.com, I can reach the Dashboard using:

• http://hub.nwtony.com/...
• https://hub.nwtony.com/...
• http://192.168.1.123/...
• http://192.168.1.123/... (with telling the browser to accept the invalid certifcate)

But I can only access a background image from all of these if it's relative - e.g. background-image: url("/local/Hub-Vacation.png");

If the hostname is specified, the image won't load.

Because Simple CSS only works on the http protocol on the IP address, I'm guessing the same thing, even though I don't see any hostnames in SimpleCSSEditor.html or the css or json file.

My fix is, always access by http://ip-number.

[sburke781]

Wow, well done. I would likely have never arrived at that conclusion myself.

Is there anything you would suggest I look at?

Actually now that I read it again I'm guessing I could look at the HTML/JavaScript that read and write the files and likely the driver that loads the editor, but I would struggle to test it myself (I think), and it is a pretty unique situation I expect.

[NWTony]

@sburke781

, but I would struggle to test it myself (I think), and it is a pretty unique situation I expect.

I'm not so sure it's unique; I'd expect a lot of us use hub names. But probably not wildcard SSL certs, which is the other half. Anyhow, I'd be happy to test for you if you wish to try to address it - just look for anywhere you've interpolated the retrieved hub address in and try to make it local (i.e. no protocol or host name, just the path.)

Alternatively, just knowing and documenting would solve it largely.

[sburke781]

Sorry, yes, I also setup a local DNS and use hub names where I can. I also know there are times where the hub name dies not work (not specifically related to this editor).

If I get some time I will take a look, though can't promise when that may be.

Thanks again for posting back here with what you found.

[sburke781]

"Keep Alive" post,,,, lamenting the time I get to spend on this project.... Though there have been some interesting ideas I would like to add....

Make String Variable Read Only on Dashboard Tile

Try #tile-0 { pointer-events: none; } On your dashboard click the cog --> Advanced --> CSS Don't forget to change the tile number to yours

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

@limeypride I just found your question. I have used a number of variable tiles and encountered this same issue. The reason it doesn't work is the structure of the variable tile is a bit different from the device tiles. I put to gether a quick dashboard to demonstrate this. [image] The tile on the left is a variable tile, and the tile on the right is a device tile. [image] Looking at the title object in the device tile first shows it has a CSS class of .tile-title in this line of HTML. …

Dashboard thermostat sryle

Hi, I am wondering if there is a way to tweak thermostat template to give it a look like the one in control 4 or home assistant. Kind of round with circular button. You slide. Is it possible with css. I just started to read the css noob guide and found interesting way to change slider appearance and colors which i like wondering if there is a more complete page somewhere i really like code example which make me understand Brgds Alex [1000024151]

Animate Buttom Press on Dashboard

Could just add something like .tile:active{background-color:orange} in the Advanced|CSS tab of the dashboard.

HE Standard Icons in Tiles

#tile-2::before { font-family: 'hubitat' !important; content: "\ecad"; font-size: 40px; position: absolute; top: 15px; left: 2.5px; } [image] If you are interested how I worked it out.... I could see the he-window_1 was actually the name of the CSS class, not the text content (not sure how the other light bulb one works like that...). When I looked up the Chrome Dev Tools tab and located the element on a button tile where I set the custom icon, I could see the content and font fa…

[wayne.pirtle]

@jeppsenc @sburke781 This can be accomplished with the align-items property. Here is an example of how I do it on a Text Tile.

#tile-16 > div > div {
font-size: 24px !important;
align-items: flex-end;
}

CSS align-items property (w3schools.com)

[sburke781]

Another one for the list.... Coloring of Temp/Humidity values....

Battery Tile Color Change By %

Thankfully the time difference makes it look like I made that comment only 1 day ago Hmmm.... I would probably need to spend a little more time searching to give you a more considered response (I feel like I'm at work ). The point being there are complicated options, but whether they are worth recommending, I'm not sure. If you are interested you can lookup some of the CSS that people came up with during the incarnation of the Smartly solution by searching for "s…

[bbrannon]

In "advanced" the CCS tab is empty. Tried on a few different dashboards. Current Chrome browser, no blocking enabled. Searching the Community didn't surface anything.