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

**URL:** <https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203>\
**Category:** General\
**Created:** [16 March 2020 20:49 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203 "2020-03-16T20:49:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![shurikasa](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@shurikasa](https://discourse.nodered.org/u/shurikasa)\
**Post date:** [16 March 2020 20:49 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/1 "2020-03-16T20:49:35Z")

</div>

Hello guys,

I am following the following guide to define my custom node appearance:  
[https://nodered.org/docs/creating-nodes/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.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [16 March 2020 20:51 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/2 "2020-03-16T20:51:16Z")

</div>

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.

```auto
...
color: "#a6bbcf",
...

```

---

<div class="post-metadata">

**Author:** ![shurikasa](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@shurikasa](https://discourse.nodered.org/u/shurikasa)\
**Post date:** [16 March 2020 20:53 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/3 "2020-03-16T20:53:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [16 March 2020 20:53 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/4 "2020-03-16T20:53:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shurikasa](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@shurikasa](https://discourse.nodered.org/u/shurikasa)\
**Post date:** [16 March 2020 20:54 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/5 "2020-03-16T20:54:29Z")

</div>

Got it, thank you!

---

<div class="post-metadata">

**Author:** ![shurikasa](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@shurikasa](https://discourse.nodered.org/u/shurikasa)\
**Post date:** [16 March 2020 21:12 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/6 "2020-03-16T21:12:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [16 March 2020 21:23 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/7 "2020-03-16T21:23:31Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![shurikasa](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@shurikasa](https://discourse.nodered.org/u/shurikasa)\
**Post date:** [16 March 2020 21:30 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/8 "2020-03-16T21:30:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [16 March 2020 21:34 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/9 "2020-03-16T21:34:46Z")

</div>

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](https://github.com/node-red/node-red/blob/master/scripts/build-custom-theme.js)

---

<div class="post-metadata">

**Author:** ![shurikasa](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@shurikasa](https://discourse.nodered.org/u/shurikasa)\
**Post date:** [16 March 2020 21:41 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/10 "2020-03-16T21:41:56Z")

</div>

Oh wow, that would help. Thanks again!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 June 2020 05:36 UTC](https://discourse.nodered.org/t/custom-node-appearance-how-to-change-background-color-height-width-etc/23203/12 "2020-06-24T05:36:31Z")

</div>

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