Reference custom css classes from a dashboard ui_template node
1,160 views
Skip to first unread message
Anthony Mantoan
Apr 6, 2017, 4:05:50 PM4/6/17
to Node-RED
I would like to define my own css classes and use them in various dashboard ui_template nodes in several different tabs. I know static resources can be served by node-red using the httpStatic property, but those can't be accessed from flow nodes right?
Is there a way to put css classes in one place that can be used in any ui_template node (or other nodes for that matter)?
Thanks!
Tony
Julian Knight
Apr 7, 2017, 5:50:08 AM4/7/17
to Node-RED
Well the static files can be referenced anywhere but you need to remember to reference them as http links rather than directly. In other words, the user receives them direct to the browser rather than sending them from NR.
You should be able to pass a CSS link entry in the UI_Template as well the Nr template node.
Anthony Mantoan
Apr 7, 2017, 3:26:21 PM4/7/17
to Node-RED
Thanks Julian. To pass in the css link, do you mean I should use an HTTP-request node to send a GET request for the css file, then wire that to the template node? If so, I'd have use an http-request node every time I want to use that the css file with a template node right?
Thanks again,
Tony
Julian Knight
Apr 7, 2017, 3:46:43 PM4/7/17
to Node-RED
Not really, if you've put your CSS in a file, you can either reference that in <head> with <link href="/mycss.css" type="text/css" rel="stylesheet" />
Or you can load it in the <body> using <style type="text/css"> @import url("/mycss.css"); </style>
The static location in settings.js gives you the ability to load any file from the location.
Or you can load it in the <body> using <style type="text/css"> @import url("/mycss.css"); </style>
The static location in settings.js gives you the ability to load any file from the location.
Anthony Mantoan
Apr 7, 2017, 5:13:29 PM4/7/17
to Node-RED
I'm still new to this so I might just be missing something, but since node red dashboard is generating the UI, I don't think I have direct access to the overall HTML document, only the ui nodes themselves.
I can drop a template node in that just runs a script to load the css file, and that seems to work, but is there a way to tell the dashboard to include a link in the header or in the top level of the body?
Glenn
Apr 7, 2017, 6:55:20 PM4/7/17
to Node-RED
Scope is restricted to that element. But I have put classes in that do refer to the whole page. So just put it in the first element on your page and all other elements on that page should refer to it. But won't refer to other pages
Julian Knight
Apr 8, 2017, 6:15:02 PM4/8/17
to Node-RED
You still get to pass scripts and other elements when using the UI template. Because Dashboard creates a single-page-app, any CSS you feed in using a style tag should still be picked up by all elements.
Reply all
Reply to author
Forward
0 new messages