Custom node appearance: how to change background color, height, width, etc

General
1

Hello guys,

I am following the following guide to define my custom node appearance:
https://nodered.org/docs/creating-nodes/appearance

However I can see that the background color is defined by a "color" property that is a muted palette of colors. Is there a possibility to set more parameteres to that, i.e., a way to configure a css for that specific custome node or set it within the html file directly? When I click "Inspect" on my custom button within the palette, I can see:
background-color: rgb(70, 143, 135);
height: 48px;
width: 120px;
...

However I can't find where it's configured.

Thank you for your answers.

2

Read the link again

Background Colour

The node background colour is one of the main ways to quickly distinguish different node types. It is specified by the color property in the node definition.

...
color: "#a6bbcf",
...
3

Right, thanks, I am using that one, I was just wondering if there are more controls to that for other style-related things.

4

Hi @shurikasa

the only appearance option available to customise is the colour and icon - as described in the docs.

You cannot change the width/height or other appearance elements - that is all defined by node-red itself.

5

Got it, thank you!

6

Hi again @knolleary,

Is there a way to change the label's color on the static nodes that are within palette and the ones that are in the workspace? I'm reading the "Label style" section, that says there's only one predefined class "node_label_italic". I'm trying to understand how it's implemented and by looking in the style.min.css I can see:
.node_label_italic,.red-ui-flow-node-label-italic{font-style:italic}
Changing the color there didn't give any result. Basically I'm trying to change the color and the font type for the label.

Thanks again for your answers.

7

As its a SVG Text element, you'd use the fill property to set the font color, as you can see from the base label style here: https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/sass/flow.scss#L31

But this really isn't something we suggest nodes customise.

8

Thank you @knolleary for your prompt answer. Actually I don't see it as a problem to add another .scss file and override properties written in the flow.scss. I don't really want to modify the original files of node red.

9

If you want to create a custom theme for Node-RED then have a look at this script - https://github.com/node-red/node-red/blob/master/scripts/build-custom-theme.js

10

Oh wow, that would help. Thanks again!

12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.