# Neewb user, can one change the color of the comment block for better visual separators?

**URL:** <https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207>\
**Category:** General\
**Tags:** database\
**Created:** [29 May 2022 06:58 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207 "2022-05-29T06:58:57Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zeltak](https://avatars.discourse-cdn.com/v4/letter/z/a88e4f/32.png) [@Zeltak](https://discourse.nodered.org/u/Zeltak)\
**Post date:** [29 May 2022 06:58 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/1 "2022-05-29T06:58:57Z")

</div>

Hi all

day 1 of using node-red and having a blast

I was wondering if one can change the color of the comment block for better visual separators?

ie instead of just white:

![CleanShot 2022-05-29 at 09.56.47](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6afd36365382723715163d68bd45291e02cf6cb.png)

change it to a green/red background?

and if so how is that done?

thx alot

Z

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2022 07:12 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/2 "2022-05-29T07:12:01Z")

</div>

No. The node colours are fixed.

A work around would be to create a subflow with nothing inside & set up it's properties. The subflow appearance can be changed in its properties. Then you can use a subflow instance as a comment node.

---

<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:** [29 May 2022 07:42 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/3 "2022-05-29T07:42:19Z")

</div>

Or use the grouping feature.

eg:

 ![Screenshot 2022-05-29 at 09.44.48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/530b0b62258d3ca992696c1a73be73d09cc84e99.jpeg)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [29 May 2022 07:46 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/4 "2022-05-29T07:46:03Z")

</div>

You could also put the comment node in a group and color the group

 ![comment color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/2183d7d9af8586b768784fdb6b1231239f502f13.jpeg)

---

<div class="post-metadata">

**Author:** ![Zeltak](https://avatars.discourse-cdn.com/v4/letter/z/a88e4f/32.png) [@Zeltak](https://discourse.nodered.org/u/Zeltak)\
**Post date:** [29 May 2022 07:54 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/5 "2022-05-29T07:54:23Z")

</div>

wow guys thx so much!

the group option @zenofmud is perfect

really appreciate the help guys!

Z

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [29 May 2022 11:40 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/6 "2022-05-29T11:40:01Z")

</div>

Node-red v3.0.0 (beta) can do slightly slimmer comment groups with Junctions.

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f024b885500ef08c96d8ebf83db0b0c21b3f874.jpeg)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2022 12:37 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/7 "2022-05-29T12:37:27Z")

</div>

And slimmer again with a subflow...

![chrome_54VjdfyOjS](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d639779589a256cffff429f65dd3e1dc0100f46.gif)

```auto
[{"id":"cb5c40ddc5c09ae5","type":"subflow","name":"comment-blue","info":"","category":"common","in":[],"out":[],"env":[],"meta":{},"color":"#91b9fd","icon":"font-awesome/fa-comment-o"},{"id":"cb5c40ddc5c09ae2","type":"subflow","name":"comment-green","info":"","category":"common","in":[],"out":[],"env":[],"meta":{},"color":"#8be38c","icon":"font-awesome/fa-comment-o"},{"id":"cb5c40ddc5c09ae1","type":"subflow","name":"comment-yellow","info":"","category":"common","in":[],"out":[],"env":[],"meta":{},"color":"#FFFF55","icon":"font-awesome/fa-comment-o"},{"id":"f3a7cb5e931f75a2","type":"subflow","name":"comment-red","info":"","category":"common","in":[],"out":[],"env":[],"meta":{},"color":"#FF7777","icon":"font-awesome/fa-comment-o"},{"id":"2e434c7b32ed6725","type":"subflow:f3a7cb5e931f75a2","z":"7bd70f15ef36fdcf","name":"I am a red comment 😎","x":200,"y":660,"wires":[]},{"id":"7c8be32430657181","type":"subflow:cb5c40ddc5c09ae1","z":"7bd70f15ef36fdcf","name":"I am a yellow comment 😎","x":190,"y":700,"wires":[]},{"id":"b608db944054dc04","type":"subflow:cb5c40ddc5c09ae2","z":"7bd70f15ef36fdcf","name":"I am a green comment 😎","x":190,"y":740,"wires":[]},{"id":"d80c036095877ff4","type":"subflow:cb5c40ddc5c09ae5","z":"7bd70f15ef36fdcf","name":"I am a blue comment 😎","x":190,"y":780,"wires":[]}]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [29 May 2022 12:56 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/8 "2022-05-29T12:56:21Z")

</div>

Outstanding (if a litle garish 🤣) ! They show up in the palette, you even changed the icon.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2022 13:13 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/9 "2022-05-29T13:13:46Z")

</div>

> [@jbudd](#):
>
> They show up in the palette, you even changed the icon

I like to broaden minds 😉

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 May 2022 14:01 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/10 "2022-05-29T14:01:58Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d635178e3766f3c5f2d0b122462f6b96fb618a86.png)

😸 No sub-flows harmed in the making of this. A prize for anyone who can work it out (well not really but then it is a fudge anyway!).

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2022 14:03 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/11 "2022-05-29T14:03:50Z")

</div>

custom CSS?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2022 14:04 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/12 "2022-05-29T14:04:10Z")

</div>

src code hack?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 May 2022 14:06 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/13 "2022-05-29T14:06:22Z")

</div>

> [@Steve-Mcl](#):
>
> custom CSS?

My first thought, but no, the SVG isn't coded to allow the fill to be variable - I think it could be by the way, about to test that.

> [@Steve-Mcl](#):
>
> src code hack?

Of course 😉 You win the prize: 🍻

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [29 May 2022 14:06 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/14 "2022-05-29T14:06:24Z")

</div>

Fudge! Fudge! You’re making fudge!?!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 May 2022 14:06 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/15 "2022-05-29T14:06:50Z")

</div>

> [@zenofmud](#):
>
> You’re making fudge!?!

I suspect most of my coding is fudge!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 May 2022 14:09 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/16 "2022-05-29T14:09:23Z")

</div>

> [@TotallyInformation](#):
>
> > [@Steve-Mcl](#):
> >
> > custom CSS?
> 
> My first thought, but no, the SVG isn't coded to allow the fill to be variable - I think it could be by the way, about to test that.

So, maybe this is a core improvement request. Rather than using a fixed colour in the fill, better to use a CSS variable. Just tested that and it works.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c728959069d1321f002afdf82c20155aedea274.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c85057336b2dca962364de643637f1115a09be76.png)

---

<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:** [12 June 2022 14:09 UTC](https://discourse.nodered.org/t/neewb-user-can-one-change-the-color-of-the-comment-block-for-better-visual-separators/63207/17 "2022-06-12T14:09:44Z")

</div>

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