Sidebar text size

General
1

Is there a way to change (increase) the text size of the sidebar/debug window?

2

Hello @perigalacticon, welcome to the forum.

Here is an example of changing the font size of debug messages, but not everything in the sidebar.
You may need to change the location of editor.css to match your Node-red installation.

image

First specify an editor CSS file in the editorTheme section of .node-red/settings.js:

    editorTheme: {
// ----------- Insert this to specify an editor CSS file ----------
       page: {
          css: "/home/pi/.node-red/editor.css"
       },
// --------------------------------------
        /** The following property can be used to set a custom theme for the editor.
         * See https://github.com/node-red-contrib-themes/theme-collection for
         * a collection of themes to chose from.
         */
        //theme: "",

and create /home/pi/.node-red/editor.css with this:

div.red-ui-debug-msg span.red-ui-debug-msg-object-value {
font-size: 20px ;
}
1 Like
3

Because of this tiny text that cannot be changed, I now have back pain from the poor posture of trying to read this tiny text all the time. Now I feel bad throughout the day and I am much less interested in working with this program. Fail.

4

But puzzled by your angst here @perigalacticon

You have been offered a working solution.

It's all just HTML and CSS under the hood so you can make it as big or small as you like. Additionally, the browser can be zoomed too.

1 Like
5

You have my sympathy @perigalacticon.
Try C++, it's more flexible but I do sometimes find it a pain in the neck.

6

Hi,

Did you know that you can put all of the debug sidebar on a SEPARATE Chrome browser window?
There is a small button at the very bottom-right of the screen:
image

Clicking this opens the debug window in a completely new browser window.

Then you can simply resize / move that new window to your heart's content... perhaps on a separate monitor.

And ALSO you can resize the 'working area' of the flow using these buttons - which operate separately from the debug:
image

And you can also (on Windows at least) resize Chrome browser (whole window) using Ctrl / middle mouse wheel to rapidly set the overall size.

I think there's actually a lot of 'size' options - including a scrollable 'map view' or eagle's eye view...

Cheers,

Paul

3 Likes