Html and CSS files


#1

Hi there,

where can i find the html and css file for the dashboard to change the style on my local disk.

Thanks for help


#2

You can change quite a lot of the themeing via the Dashboard sidebar, including some of the basic sizing geometry and colours. Most of the rest can be tweaked by setting CSS style overrides in a ui_template node.

The actual guts are in the src directory in the project - theme.less and main.less are the main files though each widget also has its own css for specific things. These would need you to fork the project and rebuild it.


#3

But where can i find the css for the dashboard on my local disk?


#4

It's in the node-red-dashboard/dist/css directory under the node_module directory... but would be overwritten by any upgrade to the dashboard you install


#5

Ok. I think the design of the dashboard is only for private use. Is there any tool to build professional dashboards using html/css/js?


#6

What is the thing which makes dashboard to be a professional one? Any examples?


#7

Mendix is an easy to use, professional tool for app programming for example


#8

I think you are not understanding css (cascading style sheets). They cascade so the lowest level one applies. You write whatever css you want in a template node and that applies based on the context assigned. You do not need to modify the default, as long as you want to apply your styles to your page or elwmwnt.


#9

Node-RED is also easy to use.

If you are good in HTML, CSS, JS you can develop your dashboard from scratch using for example https://flows.nodered.org/node/node-red-contrib-uibuilder

If this is not the case, the ui_dashboard elements can be customized and as it is CSS the sky is the limit.

Yes, not all the ui_elements like gauges and charts allow full customizing but you can easely create your own elements using ui_template node or create proper dashboard node and share it with community.

Most powerful thing with Node-RED is the community. Fast and smart and and always helpful.


#10

Check out node-red-contrib-uibuilder if you want to build custom web apps with Node-RED.