That is a good point @amithalp, you are correct in that the CSS is stored locally in a file, and for many this would result in a different experience. While I do point out the fact I am using a local file, I have not spelt out what that means for some people. I will update the notes later today.
That said, while I have not tested this yet, I would expect that for those using a VPN, this should still produce the same behaviour as being on the local network. I don't have a remote admin subscription, but am not anticipating that would produce the same experience as being local in this case, but would be happy to be wrong...
This has given me an idea.... At some point I may introduce an output of the CSS text on screen. That way the CSS could be copied and pasted into the built-in Advanced -> CSS tab. At the moment you can still achieve this same outcome by opening the CSS file through File Manager and copying the CSS from there.
I guess vpn will produce the same layout as local can. To be clear for others who read this, I am not using the remote admin but rather the cloud dashboard and the dashboard will not see the local css code.
Copy paste as you mentioned is a possible solution for sure.
Hmmm... That's interesting, because that wasn't my experience just now. I tried it with a server name initially in the import, then changed it to an IP address and both times the CSS does not appear to take effect on my mobile using the Hubitat mobile app. It does, however, work in Chrome on my phone.... Anyone have any ideas?
Minor update tonight, just to the styling of the editor, no change to the output (I hope ). Just tweaked the display of Tile Custom CSS settings and added some padding at the end of the editor so the last tile is not so snug against the bottom of the window.
Try clicking in the blank space just to the right of the plus sign.
EDIT: This was the issue, just tested it myself. I will include an update in the next release to make these behave the same, but for now just click in the blank space next to the plus sign. You can ignore the comments below, but I will try to follow through on my last comment about the release process.
If that doesn't work, try updating the editor to make sure you are on the latest version. Leave the dashboard open, open a separate tab in your browser and go to the device edit page for the editor. Click the Refresh command. Wait maybe 10-15 seconds, go back to the dashboard and re-open the Simple CSS Editor from the tile. To make sure, hit the Refresh text in the top right of the editor. Now try expanding the sections
I'll make this update process more seamless over time and might include a version or info section in the editor to give some indication of whether it is up-to-date
Thank-you @sburke781 for undertaking this. I was wanting to update dashboard look so I read through The Noob's (in)complete guide to CSS for Hubitat, but was a bit overwhelmed. This editor will certainly fill a need for many of us that are not ready for full-on CSS!
I used HPM, followed your instructions, and the installation went smoothly. I've been able to do some basic editing, but had a few questions regarding functionality or if I'm doing something wrong.
Once an edited tile is saved, if you go back into the editor, the saved settings are not visible. So if you just want to tweak a single setting you need to re-enter all the previous changes.
Similarly, any previously edited and saved tiles are over-written on subsequent edits, even if tick mark is not selected. Meaning Tile 1, edited and save/export CSS selected, dashboard refreshed. Editor opened again and tile 2 edited, (tick mark on tile 1 not selected) then save export CSS selected, dashboard refreshed, but all previous changes to tile 1 are lost. So, is there a way to update or append, vs overwrite?
I was able to use file manager and copy the editor saved changes, then paste them directly in the advanced CSS section of the dashboard and save, and it retained the changes. ( I didn't test what happens if there is a conflict with these settings saved in the dashboard CSS , and subsequent changes in the editor. Since the import URL is first line, I assume any changes after it would over-write.)
The Custom CSS section is a nice add. I tested a few basic height commands and they worked fine.
What is the Name/Group section for? I tried them but did not see any way to recall a named edit???
Are there any known limitations of the font selections? I was seeming to get mixed results, testing Arial, Comic Sans MS. It may have been me, but it seemed some fonts, colors would not show. I need to test further to narrow down any issue.
Again - many thanks. This is a great editor and I realize it is very new, so my questions are certainly not meant to minimize the effort and functionality already developed.
I expect point number one will be causing your issues, but I haven't seen any recent issues with this. There can sometimes be a bit of a delay in reading in settings, but it should work. Aside from the CSS file you import into the dashboard, there is a separate settings file also saved to allow the settings to be read back into the editor more easily. It sounds like you could be having some issues with that file or the data inside it being written. I'll try and take a look in the next few days
With your issues around settings being retained, can you please check if the settings JSON and the CSS files are being stored? If you open the File Manager at http:// < HE-Hub-IP > /hub/fileManager, then check that the < Dashboard-Name >.json and < Dashboard-Name >.css are both present and include text inside?
The Name / Group settings are still a placeholder for future work I want to do. A basic use, which I think I mentioned in the notes at the top of this thread but never really implemented, was to include the name and group in the CSS output, just as some extra documentation. The more meaningful use could be applying templates defined in the editor across a group of tiles. I'm thinking the groups could become more a list of tags rather than the notion of a group.
I think the issue of this being recalled could be part of the underlying issue you are having with settings being recalled.
I had some thoughts around using one of these to offer the option of pre-defined dashboards and mapping devices more easily when importing a dashboard from someone else, but that would be quite a way off I expect, so not really something to consider just yet.
In terms of the Fonts, I have really only done some basic testing myself, but can do some more if you are seeing some odd behaviour. I based the list on some listing on a blog for web-safe fonts.
Let me know what you find with the files and I can take a look in more detail at the weekend.
All 3 files are in my hub file directory - screenshot here.
The CSS file has the specific changes I made in the editor, and the JSON has a lot of text in it. The HTML is just the upper image of the editor.
I re-read the thread and don't think I missed any steps. Do I need to add an @import url for the JSON file like was done for the CSS? I didn't see that in the instructions but wondered
Let me know if there is anything I can provide (screenshot, log, etc) that would help.
I did try re-booting the hub, but still have the same issue.
I'm using Chrome, but editing the dashboard from within HE using dashboard app (as opposed to direct to the IP of the dashboard.
I'm on a C7 hub running 2.3.0.124. I just noticed there is a platform update to 2.3.1.128, which I have not installed yet, if that would make any difference.
Thanks again, and no hurry. I'll keep playing/testing and let you know of any other findings.
Hi @Ghuntz, a couple of things that may help me help with your issue....
Can you please PM me a copy of the json and css files? As well as a screenshot of the editor, perhaps one with changes made in the editor on screen, then a second after you have Saved the settings, closed the editor and re-opened it. To put it another way:
(Assuming you already have the Simple CSS Editor on an existing dashboard and the CSS file import setup in the Dashboard Custom CSS section...)
Add a new Tile to the dashboard, or identify one that has not been modified with the Simple CSS Editor
Open the Simple CSS Editor
Update the settings for the new tile, e.g. hide the title
Click the Save and Export Settings and CSS button
Take a screenshot of the settings changed for the tile
Close the Simple CSS Editor and click the refresh Green Tick
Confirm the change took effect on the dashboard tile
Open the Simple CSS Editor again
Check the settings for that tile in the Simple CSS Editor, taking a screenshot
Just to expand on my response to your question about appending / overwriting settings.... Like I explained, there is a settings (json) file to store the settings in a format more easily read back into the web page that is the Simple CSS Editor. This allows for settings to be stored even when they did not impact the CSS, such as Tile Name and Group or the settings for tiles not selected to have CSS exported. This last point means that you should be able to uncheck the tick-box next to a tile and the settings retained but nothing is applied via the CSS file in the dashboard. Then all you need to do is turn this back on and the previous settings will take effect, after you Save and Export the CSS.
Thanks for the PM @Ghuntz. The good news is I think I have tracked down the area where the issue is occurring. Seems as though if one of the dashboard control options is not selected that seems to cause an issue. I'll keep looking at it over the weekend and try and resolve that issue, then we can test that on your setup.
In the meantime you can try selecting one of the dashboard controls options to see if that fixes your issue.
The editor is working as expected and this addressed my other points . . .overwriting and text.
I was just focused on playing with the tile editor and figured I'd set overall dashboard settings later, but it makes sense you would have something checked in that section as well.
Great to hear you got it working. I'll look at having the Normal option selected by default to avoid the issue you were seeing. Thanks for help in testing this.
I think this is a great and really useful tool and look forward to your list of potential future features, like the scrolling,etc.
I’ll throw out Tile Scaling for consideration, with a basic enter a % value for tile height and % for tile width.
For now I just use the custom CSS section, which was some great foresight on your part,
). Just tweaked the display of Tile Custom CSS settings and added some padding at the end of the editor so the last tile is not so snug against the bottom of the window.
