# Editor Theme css not working (solved)

**URL:** <https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355>\
**Category:** General\
**Created:** [5 July 2018 12:14 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355 "2018-07-05T12:14:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dr.legendaddy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dr.legendaddy/32/1014_2.png) [@Dr.legendaddy](https://discourse.nodered.org/u/Dr.legendaddy)\
**Post date:** [5 July 2018 12:14 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/1 "2018-07-05T12:14:56Z")

</div>

Hello erverybody! I’m trying to add a custom css as described is the docs here:

[https://nodered.org/docs/configuration](https://nodered.org/docs/configuration)

The favicon and title are working but the css doesnt change antyhing.

```
editorTheme: {
    page: {
      title: "my-node-red-page",
      favicon: __dirname + "/resources/images/favicon.png",
      css: __dirname + "/resources/styles/test.css",
    },

```

My css is as follows ( trying to change the color of the deploy button for example):

```
.deploy-button {
    background-color: #ff9700 !important;
}

```

I tried selecting by ID, selecting deploy-button-group etc. as well with no success.  
My question is what am I doing wrong? ( sorry if its something stupid/ obvious)

kindest regards  
Zeus Bower

---

<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:** [5 July 2018 12:35 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/2 "2018-07-05T12:35:07Z")

</div>

Are you trying to edit the look of the backend or the UI?

Are you refreshing the page and clearing the cache each time you try something?

---

<div class="post-metadata">

**Author:** ![Dr.legendaddy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dr.legendaddy/32/1014_2.png) [@Dr.legendaddy](https://discourse.nodered.org/u/Dr.legendaddy)\
**Post date:** [5 July 2018 12:38 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/3 "2018-07-05T12:38:12Z")

</div>

Thanks for the reply!

I’m trying to edit the UI of the editor page.

I’m restarting the node-server everytime I change the css.

regards

---

<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:** [5 July 2018 12:59 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/4 "2018-07-05T12:59:53Z")

</div>

Working for me. Are you sure that the css file existts and NR has permission to access it?  
Maybe open NR in FireFox or Chrome and look for some console errors.

---

<div class="post-metadata">

**Author:** ![Dr.legendaddy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dr.legendaddy/32/1014_2.png) [@Dr.legendaddy](https://discourse.nodered.org/u/Dr.legendaddy)\
**Post date:** [5 July 2018 13:07 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/5 "2018-07-05T13:07:30Z")

</div>

So it’s possible for you to change the button’s color with the provided code?  
Hmmm… I’m not getting any console errors. The favicon in the same directory is loading so permission should be fine.  
Could the be a problem be caused from me using node-red embedded? ( again the favicon and title are working perfectly)

thanks and regards

---

<div class="post-metadata">

**Author:** ![Dr.legendaddy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dr.legendaddy/32/1014_2.png) [@Dr.legendaddy](https://discourse.nodered.org/u/Dr.legendaddy)\
**Post date:** [5 July 2018 13:21 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/6 "2018-07-05T13:21:39Z")

</div>

OK nevermind it’s working now! I had a stupid typo. My aplogies and thanks for the help!!! Your hint that it MUST work and about checking the existence was what made me realize my mistake.

Thank you! ☕

Edit: It’s working for the button so let’s see if I manage to change the header color as a next step 😅

---

<div class="post-metadata">

**Author:** ![noufsu](https://avatars.discourse-cdn.com/v4/letter/n/4491bb/32.png) [@noufsu](https://discourse.nodered.org/u/noufsu)\
**Post date:** [11 July 2018 09:59 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/7 "2018-07-11T09:59:52Z")

</div>

Hello...  
Thanks for sharing this it was helpful ..  
but could I ask how did you separate your website files to use the above code?  
I mean did you embed it in your JS code or new file, I'm new in this so excuse me please

many thanks

---

<div class="post-metadata">

**Author:** ![Dr.legendaddy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dr.legendaddy/32/1014_2.png) [@Dr.legendaddy](https://discourse.nodered.org/u/Dr.legendaddy)\
**Post date:** [12 July 2018 15:16 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/8 "2018-07-12T15:16:47Z")

</div>

You need to use node-RED in embedded mode: [https://nodered.org/docs/embedding](https://nodered.org/docs/embedding)

I have the css in a seperate file in the directory I hand over to the embedded node-RED

hope it helps!! 😉

---

<div class="post-metadata">

**Author:** ![noufsu](https://avatars.discourse-cdn.com/v4/letter/n/4491bb/32.png) [@noufsu](https://discourse.nodered.org/u/noufsu)\
**Post date:** [16 July 2018 08:51 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/9 "2018-07-16T08:51:48Z")

</div>

Thanks for the clarification!

but I'm still confused, I've read the document you attached " embedding .. ", Is it an independent piece of code which I only add it to my code or it's just a guideline I have to follow?  
Unfortunately, It's not mentioned clear how to use that code to embed node-red.

Thank you again!

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 July 2018 10:21 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/10 "2018-07-16T10:21:30Z")

</div>

Two separate things here -

1. you can customise the theme a bit of any instance of Node-RED using the editorTheme section of your settings.js file.
2. you can embed Node-RD into your own node.js / express application using the embedding docs - in which case you more control over the theme of your application.

---

<div class="post-metadata">

**Author:** ![Dr.legendaddy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dr.legendaddy/32/1014_2.png) [@Dr.legendaddy](https://discourse.nodered.org/u/Dr.legendaddy)\
**Post date:** [17 July 2018 12:52 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/11 "2018-07-17T12:52:51Z")

</div>

Glad to help!

As dceejay said embedding means adding it to your express server. So its only necessary if you want to add Node-RED to your application instead of using it on it's own.

regards

---

<div class="post-metadata">

**Author:** ![josekavunkal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josekavunkal/32/18505_2.png) [@josekavunkal](https://discourse.nodered.org/u/josekavunkal)\
**Post date:** [28 March 2020 12:23 UTC](https://discourse.nodered.org/t/editor-theme-css-not-working-solved/1355/12 "2020-03-28T12:23:36Z")

</div>

I was trying to do the same for header background color .  
Want to change the color of background where Nod-red is written .

Done following changes in setting.js and I am able to change the text like below.  
header: {  
title: "IoT Flow Editor",

```
     },

```

How to change the black color?