[RELEASE] Simple CSS Editor

Hi @Ghuntz, I'd be interested to know if this is still an issue for you. I have been able to see changes in the fonts, perhaps the fix of the Dashboard setting may have corrected this behaviour as well?

Hi @sburke781 . Once I checked the dashboard setting, the font changes are working fine.

1 Like

The first time I clicked on the simple css tile the editor popped up, but there was no X to close it. I refreshed the page (got missing file warning) and now the popup will not open.

So, I remembered I still use Smartly, do I need to get rid of that?

Hmmm... That is odd.... And a shame as a first time experience. It's been a while since I tested the "new user" experience. Let me check this out later "tomorrow" night (another ~20 hrs).

Btw, the warning is ok and you don't need to stop using smartly.

well, I made a new dashboard without smartly and it seems to behaving normally. I changed some borders to thick, dashed and red, not seeing those changes though after saving and refreshing the page.

Nothing I change using the editor shows up.

You need to add an import line in the custom css, have you done that? (I need to put a more obvious heading above those instructions ..)

And thanks for the feedback re smartly. I'll do some testing myself and add a note to the instructions if needed.

2 Likes

I was somewhat stumped when I got to that step as well (I have no CSS experience, so that doesn't help). Is "HE-Hub-IP" literally the IP address of my Hub? Would this line change if I were not local, but working remote?

Yes, that is the hub IP address. I'll add an extra note to those instructions. Thanks for the feedback. I have really only catered for local access at the moment, but I'm sure I or someone else can come up with a way to make it work remotely.

1 Like

I did all that. And I can see the files get saved on the hub. The changes do not show up. Also when I open the editor again, my changes are there.

Lets try this: Give me an example of a change I can make that should be noticeable.

I also changed the position of the top menu, no joy.

That's fair. I won't really be in a position to look at this closely until the weekend, at least in terms of working through an example with you.

Only other thing I would check is that you have refreshed the dashboard after saving the changes in the pop-up editor, either by clicking the green tick or refreshing the browser. I'm assuming you have done this already, but just wanted to make sure.

I have. It has me stumped for sure

Yeah, me too. I could keep guessing, but I think you're right, better to work through an example.

If you want to try and take advantage of the CSS produced you could copy the text from the CSS file and paste it in the Custom CSS section (where you put the import line).

1 Like

OK, so this is the css from the file:
.dashBack { display: none; }

I put it in the custom css section, saved , refreshed, no change

From memory that should remove the Hubitat logo next to the dash name at the top left

Interesting..
When I paste this:
@import url("http://192.168.0.47/local/simplecss.css")

/* ********* Dashboard Settings ********* */
.dashBack { display: none; }

/* ********* Tile Settings ********* */

/* tile-0 Settings */
#tile-0 { border-radius: 1px !important; }
#tile-0 { border-top: thick dotted rgba(236,24,24,1); }
#tile-0 .tile-title { visibility: hidden; }
#tile-0 .tile-title:after { visibility: visible !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap !important; content: "Pen Temp" !important; }
#tile-0 { background-color: rgb(225,65,65) !important; }

It works, but not from just changing it in the simple css editor

1 Like

Try opening the css url in a browser on its own, i.e. paste

http://192.168.0.47/local/simplecss.css

Into the address bar of your browser

I found the problem, the file you import has to have the same name as the one the editor exports!
is obvious but the instructions don't specify that exactly...

1 Like

It has to be the same name as the dashboard, that is what the editor exports as the settings file name and the css file name. Then the import needs to match that. I want to change that requirement eventually...

I'll take another look at the instructions are the weekend

FYI: Nothing I have tried on my smartly enabled dashboards works..

Great tool, thank you!

2 Likes