# Custom \<div\> banner above the Editor

**URL:** <https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284>\
**Category:** General\
**Created:** [16 October 2021 06:06 UTC](https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284 "2021-10-16T06:06:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sambarlas](https://avatars.discourse-cdn.com/v4/letter/s/67e7ee/32.png) [@sambarlas](https://discourse.nodered.org/u/sambarlas)\
**Post date:** [16 October 2021 06:06 UTC](https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284/1 "2021-10-16T06:06:49Z")

</div>

I am working on a project in which I need a banner header at the top of the screen. I have added my custom css in settings.js editorTheme section. I can't seem to figure out the correct positioning for #red-ui-editor or the proper CSS modifications for other elements so that my Custom Header will show. I have tried position : relative but that doesn't work.

All I want is to be able to display a div above the standard NR editor.

```auto

<body spellcheck="false">
  <div>Custom Header</div>
    <div id="red-ui-editor"></div>
      <script src="[vendor/vendor.js](http://pi3.local/vendor/vendor.js)"></script>
      <script src="[red&#x2F;red.min.js](http://pi3.local/red/red.min.js)"></script>
      <script src="[red&#x2F;main.min.js](http://pi3.local/red/main.min.js)"></script>
</body>

```

---

<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:** [16 October 2021 08:42 UTC](https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284/2 "2021-10-16T08:42:47Z")

</div>

Welcome to the forum sambarlas.

This is not quite what you are asking for but it is possible to change the image & text in the header and make them link to another page:  
In settings.js

```auto
header: {
    title: "Red in Tooth & Claw",
    image: "/home/pi/.node-red/node-red-static/myimages/redfox.jpg",
    url: "https://nodered.org"
},

```

You need to tweek the CSS to make image & text larger and move the main page content down.

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/9124d3b7e34d3b22315512ab0b83f009a63fbdb2.jpeg)

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [20 October 2021 23:18 UTC](https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284/3 "2021-10-20T23:18:36Z")

</div>

I have seen the `header`: section of the editorTheme section of settings.js, and I've also used the `page`: field to override things like the page title and favicon.ico

Somewhere along the way I found an example that _looks_ like it should override the editor styling with your own branding, defined this way:

```auto
    // Customising the editor
    editorTheme: {
        page: {
            title: "My Node-RED",
            favicon: "/absolute/path/to/theme/icon", //can use '__dirname + "\\img\\favicon.png" (\\ on Windows)'
            css: "/opt/node-red/public/styles/branding.css",
            scripts: "/absolute/path/to/custom/js/file" // As of 0.17
        },
        header: {
            title: "My Editor",
            image: "https://nodered.org/about/resources/media/node-red-icon.png", // or null to remove image
            url: "https://www.mysite.com" // optional url to make the header text/image a link to this url
        },

```

The problem is that my branding.css file does not seem to have any effect... is there a list of all the styles that can be overridden in the editor (most questions i see are about dashboard styling, not the editor)?

---

<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:** [21 October 2021 02:03 UTC](https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284/4 "2021-10-21T02:03:26Z")

</div>

> [@shrickus](#):
>
> The problem is that my branding.css file does not seem to have any effect... is there a list of all the styles that can be overridden in the editor

On my Raspberry Pi /home/pi/.node-red/editor.css is recognised.  
settings.js contains

```auto
    editorTheme: {
        header: {
           title: process.env.DEVICE
        },
       page: {
          title: process.env.HOSTNAME, // set at the top of this file
          css: "/home/pi/.node-red/editor.css"
      },

```

I only change a couple of things in editor.css:

```auto
.red-ui-flow-link-line {
        stroke: #0722fc;
        stroke-width: 1;
}
.red-ui-flow-group-label {
        fill: #0722fc;
}
.red-ui-flow-group-body {
        stroke: #0722fc;
        stroke-width: 1;
}

```

---

<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:** [20 December 2021 02:03 UTC](https://discourse.nodered.org/t/custom-div-banner-above-the-editor/52284/5 "2021-12-20T02:03:51Z")

</div>

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