Custom <div> banner above the Editor

General
1

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.


<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>
2

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

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
Untitled 1996×408 18.3 KB

1 Like
3

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:

    // 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)?

4

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

    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:

.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;
}
1 Like
5

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