# Where to add CSS file in Node Red

**URL:** <https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052>\
**Category:** General\
**Created:** [20 January 2019 15:56 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052 "2019-01-20T15:56:10Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![gmahule](https://avatars.discourse-cdn.com/v4/letter/g/ce73a5/32.png) [@gmahule](https://discourse.nodered.org/u/gmahule)\
**Post date:** [20 January 2019 15:56 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/1 "2019-01-20T15:56:10Z")

</div>

Hello everyone,

I am trying to customize the node red but I am unable to understand how to add CSS and also what changes I have to do in settings.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [20 January 2019 16:42 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/2 "2019-01-20T16:42:02Z")

</div>

The settings page in the docs lists how to add your own css file  
[https://nodered.org/docs/configuration](https://nodered.org/docs/configuration)

If you search this forum for “node-red theme” you should find a thread where someone has developed a dark theme and their files might be of use

---

<div class="post-metadata">

**Author:** ![gmahule](https://avatars.discourse-cdn.com/v4/letter/g/ce73a5/32.png) [@gmahule](https://discourse.nodered.org/u/gmahule)\
**Post date:** [20 January 2019 16:58 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/3 "2019-01-20T16:58:15Z")

</div>

Yeah I got it but if I want to change any color or want to add any icon then where can I change it. As you can see below I am confused about the CSS part that do I have to add any css externalyy or everything can be done in settings.js only. Please help.  
editorTheme: {  
page: {  
title: "Node-RED",  
favicon: "/absolute/path/to/theme/icon", //can use '\_\_dirname + "\img\favicon.png" (\ on Windows)'  
**css: "/absolute/path/to/custom/css/file",**  
scripts: "/absolute/path/to/custom/js/file" // As of 0.17  
},  
header: {  
title: "Node-RED",  
image: "/absolute/path/to/header/image", // or null to remove image  
url: "[http://nodered.org](http://nodered.org)" // optional url to make the header text/image a link to this url  
},

---

<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:** [20 January 2019 17:14 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/4 "2019-01-20T17:14:21Z")

</div>

Hi @gmahule

the `editorTheme` setting is how you can provide a custom CSS file within the editor.

1. create a CSS file
2. add the `editorTheme` entry to your settings with the `page.css` value set to the absolute path to that file:

```auto
editorTheme: { 
   page: {
      css: "/path/to/your/custom/file.css"
   }
}

```

You can then add whatever custom CSS rules you want in that file in order to override the default CSS.

As @ukmoose said, there was a very recent thread in this forum where an example dark theme was provided doing just that.

As for changing icons in the editor - they tend to be more hardcoded in the editor and not as easy to change. To do that, you'd need to pull down the node-red source code, edit the source and create a custom build of the editor.

---

<div class="post-metadata">

**Author:** ![gmahule](https://avatars.discourse-cdn.com/v4/letter/g/ce73a5/32.png) [@gmahule](https://discourse.nodered.org/u/gmahule)\
**Post date:** [20 January 2019 17:37 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/5 "2019-01-20T17:37:13Z")

</div>

Hello @knolleary,

As you can see I have addedd css file according to your suggestion but it didn't work out I saved it and reload the entire node red but I am unable to get the theme.

For changing icons do you know where that source code is which I can hard code.

---

<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:** [20 January 2019 17:42 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/6 "2019-01-20T17:42:15Z")

</div>

```auto
/.node-red/lib/flows/theme/dark.cs

```

Is that really the absolute path to the file? You have a `.node-red` directory at the root of your filesystem?

> [@gmahule](#):
>
> For changing icons do you know where that source code is which I can hard code.

It will depend on what icon you want to change. The editor source code (for 0.19) is here: [https://github.com/node-red/node-red/tree/master/editor/js/](https://github.com/node-red/node-red/tree/master/editor/js/) split across many different files.

---

<div class="post-metadata">

**Author:** ![gmahule](https://avatars.discourse-cdn.com/v4/letter/g/ce73a5/32.png) [@gmahule](https://discourse.nodered.org/u/gmahule)\
**Post date:** [20 January 2019 18:01 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/7 "2019-01-20T18:01:30Z")

</div>

Thaank you @knolleary now I can see the effect of css. But do you know how can I change the logo here [http://prntscr.com/m9q516](http://prntscr.com/m9q516)

---

<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:** [20 January 2019 18:50 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/8 "2019-01-20T18:50:38Z")

</div>

> [@gmahule](#):
>
> But do you know how can I change the logo here [Screenshot by Lightshot](http://prntscr.com/m9q516)

That logo is settable via `editorTheme`, by adding a `login` section:

```auto
login: {
        image: "/absolute/path/to/login/page/big/image" // a 256x256 image
    }

```

---

<div class="post-metadata">

**Author:** ![cigno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cigno/32/91812_2.png) [@cigno](https://discourse.nodered.org/u/cigno)\
**Post date:** [29 March 2020 09:54 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/9 "2020-03-29T09:54:59Z")

</div>

sorry I did not understand but you have to paste it in the settings.js file?

---

<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:** [29 March 2020 10:42 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/10 "2020-03-29T10:42:18Z")

</div>

@cigno in your settings file you should find you already have a section called `editorTheme` that looks something like this:

```auto
    // Customising the editor
    editorTheme: {
        projects: {
            // To enable the Projects feature, set this value to true
            enabled: false
        }
    }

```

To add a custom CSS file to the editor, you need to add the following:

```auto
    // Customising the editor
    editorTheme: {
        page: {
            css: "/absolute/path/to/custom/css/file",
        },
        projects: {
            // To enable the Projects feature, set this value to true
            enabled: false
        }
    }

```

And change `/absolute/path/to/custom/css/file` to be the absolute path of the CSS file you want to add to the editor.

Remember to restart node-red after editing the file.  
[https://nodered.org/docs/user-guide/runtime/configuration#editor-themes](https://nodered.org/docs/user-guide/runtime/configuration#editor-themes)

---

<div class="post-metadata">

**Author:** ![cigno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cigno/32/91812_2.png) [@cigno](https://discourse.nodered.org/u/cigno)\
**Post date:** [29 March 2020 13:02 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/11 "2020-03-29T13:02:43Z")

</div>

thank you very much

![image002.jpg](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f464dd1c7c382c015b3fc53eebe1cd1aadffee61.jpeg)

---

<div class="post-metadata">

**Author:** ![cigno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cigno/32/91812_2.png) [@cigno](https://discourse.nodered.org/u/cigno)\
**Post date:** [29 March 2020 13:51 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/12 "2020-03-29T13:51:16Z")

</div>

for example, I would like to change the background of a page called page1 with custom css.  
but it doesn't work I restarted node red but it doesn't work.

this is the settings.js file:

// Customizing the editor  
editorTheme: {

page1: {

```
         css: "/Users/Alessandro/.node-red/www/css/custom.css",

     },

```

project: {  
// To enable the Projects feature, set this value to true  
enabled: false

```
     }
 }

```

this is the custom.css file:

body.nr-dashboard-theme {  
background-color: rgb (41,95,75);  
font-family: Arial Black, Arial Black, Gadget, sans-serif;  
}

---

<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:** [29 March 2020 14:11 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/13 "2020-03-29T14:11:36Z")

</div>

If you mean you want to style a dashboard page generated by Node-RED dashboard then this is not the way to do it. The `editorTheme` setting is for the editor. Not the dashboard.

To style the dashboard you would put your CSS in a ui\_template node. There was a very good thread on how to do this from @hotNipi recently. If you search for posts from him I'm sure you'll find it.

---

<div class="post-metadata">

**Author:** ![cigno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cigno/32/91812_2.png) [@cigno](https://discourse.nodered.org/u/cigno)\
**Post date:** [29 March 2020 14:23 UTC](https://discourse.nodered.org/t/where-to-add-css-file-in-node-red/7052/14 "2020-03-29T14:23:15Z")

</div>

now I understand I was making confusion between editor and dashboard. Thanks a lot