# Can we have a more subtle border on the header?

**URL:** <https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043>\
**Category:** Core Development\
**Created:** [28 June 2024 13:12 UTC](https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043 "2024-06-28T13:12:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)\
**Post date:** [28 June 2024 13:12 UTC](https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043/1 "2024-06-28T13:12:48Z")

</div>

As mentioned by @gregorius in [this topic](https://discourse.nodered.org/t/header-styling-improvements-proposal-with-draft-pr/86270) about the changes in the header:

> The red border I find too harsh

I agree with him, we need something more subtle there.

In another reply:

> I tried the same red as the deploy button (#8c101c) it became very subtle:

Screenshots ~~stolen~~ copied from his reply.

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/604207e4157663f64a14b4f8370a9da12eaba2f3.png) ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/604207e4157663f64a14b4f8370a9da12eaba2f3.png)

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09989de9e22a5472e59634fc16683cf66eb0ebee.png) ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09989de9e22a5472e59634fc16683cf66eb0ebee.png)

It looks much better.

Can we use that color? Or perhaps the red (#8f0000) from the Node-RED logo?

---

<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:** [28 June 2024 13:17 UTC](https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043/2 "2024-06-28T13:17:09Z")

</div>

Please raise a PR with your proposal. Please include before/after screenshots to make it easier to compare.

---

<div class="post-metadata">

**Author:** ![mbonani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mbonani/32/10631_2.png) [@mbonani](https://discourse.nodered.org/u/mbonani)\
**Post date:** [28 June 2024 14:04 UTC](https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043/3 "2024-06-28T14:04:00Z")

</div>

Done.

> <https://github.com/node-red/node-red/pull/4818>
>
> \<!--
> \## Before you hit that Submit button....
> 
> Please read our \[contribution …guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> before submitting a pull-request.
> 
> \## Types of changes
> 
> What types of changes does your code introduce?
> Put an \`x\` in the boxes that apply
> \--\>
> 
> \- \[x\] Bugfix (non-breaking change which fixes an issue)
> \- \[\] New feature (non-breaking change which adds functionality)
> 
> \<!--
> If you want to raise a pull-request with a new feature, or a refactoring
> of existing code, it \*\*may well get rejected\*\* if it hasn't been discussed on
> the \[forum\](https://discourse.nodered.org) or
> \[slack team\](https://nodered.org/slack) first.
> 
> \--\>
> 
> \## Proposed changes
> 
> 
> 
> As discussed \[on the forum\](https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043), I'm proposing to use a color that makes the header border more subtle. I used the same red from the Deploy button.
> 
> Now:
> 
> \<img width="960" alt="SCR-20240628-jads" src="https://github.com/node-red/node-red/assets/29807944/2b852940-af98-430a-be6a-3b32bb6705eb"\>\<br\>
> 
> Then:
> 
> \<img width="960" alt="SCR-20240628-jaif" src="https://github.com/node-red/node-red/assets/29807944/1d0921c8-1cb8-446d-8fde-e958d01b402f"\>\<br\>
> 
> It also works well with themes. Here's an example using the 'dark' theme.
> 
> Now:
> 
> \<img width="960" alt="SCR-20240628-jbra" src="https://github.com/node-red/node-red/assets/29807944/1aabd1b8-25ec-4795-bffe-c4049e50d751"\>\<br\>
> 
> Then:
> 
> \<img width="960" alt="SCR-20240628-jbtn" src="https://github.com/node-red/node-red/assets/29807944/67fc3e22-7346-42f4-8f57-74a7fe95db9c"\>\<br\>
> 
> \## Checklist
> 
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[\] I have run \`npm run test\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

Thanks @knolleary.

---

<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:** [27 August 2024 14:04 UTC](https://discourse.nodered.org/t/can-we-have-a-more-subtle-border-on-the-header/89043/4 "2024-08-27T14:04:18Z")

</div>

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