# Editor Theme CSS File Example

**URL:** <https://discourse.nodered.org/t/editor-theme-css-file-example/2328>\
**Category:** General\
**Created:** [16 August 2018 05:17 UTC](https://discourse.nodered.org/t/editor-theme-css-file-example/2328 "2018-08-16T05:17:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![echtelerp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/echtelerp/32/535_2.png) [@echtelerp](https://discourse.nodered.org/u/echtelerp)\
**Post date:** [16 August 2018 05:17 UTC](https://discourse.nodered.org/t/editor-theme-css-file-example/2328/1 "2018-08-16T05:17:01Z")

</div>

Hi Guys,

I was playing arround with the settings file feature called Editor Theme.

> **[node-red/node-red](https://github.com/node-red/node-red/wiki/Design:-Editor-Themes)**
>
> A visual tool for wiring the Internet of Things. Contribute to node-red/node-red development by creating an account on GitHub.

I was able to do everything, except the CSS manipulation 🙂  
i get stuck with not knowing where to find an example 🙂  
does anyone have a Sample file of this feature which could be shared?

```auto
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" // optional url to make the header text/image a link to this url
    },
    
    deployButton: {
        type:"simple",
        label:"Save",
        icon: "/absolute/path/to/deploy/button/image" // or null to remove image
    },
    
    menu: { // Hide unwanted menu items by id. see editor/js/main.js:loadEditor for complete list
        "menu-item-import-library": false,
        "menu-item-export-library": false,
        "menu-item-keyboard-shortcuts": false,
        "menu-item-help": {
            label: "Alternative Help Link Text",
            url: "http://example.com"
        }
    },
    
    userMenu: false, // Hide the user-menu even if adminAuth is enabled
    
    login: {
        image: "/absolute/path/to/login/page/big/image" // a 256x256 image
    },

    logout: {
        redirect: "http://example.com" // As of 0.17
    },

    palette: {
        editable: true, // Enable/disable the Palette Manager
        catalogues: [ // Alternative palette manager catalogues
            'https://catalogue.nodered.org/catalogue.json'
        ],
        theme: [ // Override node colours - rules test against category/type by RegExp.
            { category: ".*", type: ".*", color: "#f0f" }
        ]
    },

    projects: {
        enabled: false // Enable the projects feature 
    } 
},

```

---

<div class="post-metadata">

**Author:** ![echtelerp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/echtelerp/32/535_2.png) [@echtelerp](https://discourse.nodered.org/u/echtelerp)\
**Post date:** [20 August 2018 06:26 UTC](https://discourse.nodered.org/t/editor-theme-css-file-example/2328/2 "2018-08-20T06:26:47Z")

</div>

> [@echtelerp](#):
>
> does anyone have a Sample file of this feature which could be shared?

probably my question stood not out enough 🙂

Does anyone have a CSS file example that can be Shared?

---

<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:** [20 August 2018 11:20 UTC](https://discourse.nodered.org/t/editor-theme-css-file-example/2328/3 "2018-08-20T11:20:52Z")

</div>

You need to add that to the `settings.js` file. Here is an example of the first part pointing to a css file with the css file following:

```auto
    page: {
        title: "Foo-RED",
        favicon: "/absolute/path/to/theme/icon",
        css: "/Users/Paul/.node-red/editor.css"
    },

```

where '/Users/Paul/.node-red/editor.css' is:

```auto
.deploy-button {
background: blue !important;
}

```

This was done on a Mac so the path will be dependent on the platform.