Editor Theme CSS File Example

General
1

Hi Guys,

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

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

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

probably my question stood not out enough :slight_smile:

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

3

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:

    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:

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

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