Change the default theme

625 views
Skip to first unread message

Prajwal Simkhada

unread,
May 1, 2016, 1:43:23 PM5/1/16
to Node-RED
Hello guys,

I am using Node Red for a while and I can't thank God (and the creators) enough for such a wonderful thing. However, I'm trying to customize the Node Red ui to give it a 'material' look. I'm using google mdl and trying to update the default ui with mdl's ui. I immediately regret my decisions because the Node Red codes slap me on my face every time I try to make changes to the default ui. So this brings me here to seek your expertise. Is is possible to change the default ui? If yes, what are the things I need to do? Has anyone ever tried this? Any success story?

Julian Knight

unread,
May 1, 2016, 4:21:54 PM5/1/16
to Node-RED
I'm sure that Nick and Dave will respond when they can but just to point out that the bulk of the admin UI actually uses D3 which is probably what is throwing a variety of spanners in the works. D3 creates an SVG canvas on which the admin UI is built. In other words, it is complex!

Nicholas O'Leary

unread,
May 1, 2016, 6:01:31 PM5/1/16
to Node-RED Mailing List
Hi Prajwal,

There are a number of instances of node-red that have had the styling changed - redconnect.io is worth a look to see what's possible.

You can use the 'editorTheme' entry in settings.js to customise various things, including providing your own CSS to override the defaults: https://github.com/node-red/node-red/wiki/Design%3A-Editor-Themes

D3 doesn't impact on your ability to skin at all - the generated SVG has css styles that can be overridden, just as all other elements can be.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

Message has been deleted

Prajwal Simkhada

unread,
May 2, 2016, 12:05:19 AM5/2/16
to Node-RED
Hello guys,

Thank you for your response. As stated by Julian eariler, the admin UI is complex indeed. Then I looked into redconnect.io, studied their html source code for a bit then found out that they have styled the default admin skin according to their need not by using some framework but by actually writing custom css and js for the default theme itself. I can do that too! This has helped me a lot. Thank you guys.
Reply all
Reply to author
Forward
0 new messages