# Sidebar text size

**URL:** <https://discourse.nodered.org/t/sidebar-text-size/85170>\
**Category:** General\
**Created:** [3 February 2024 22:29 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170 "2024-02-03T22:29:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![perigalacticon](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@perigalacticon](https://discourse.nodered.org/u/perigalacticon)\
**Post date:** [3 February 2024 22:29 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/1 "2024-02-03T22:29:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 February 2024 00:02 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/2 "2024-02-04T00:02:25Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d37f22d34753ea1df604d23332bcff738d17b3e.png)

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

```auto
    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:

```auto
div.red-ui-debug-msg span.red-ui-debug-msg-object-value {
font-size: 20px ;
}

```

---

<div class="post-metadata">

**Author:** ![perigalacticon](https://avatars.discourse-cdn.com/v4/letter/p/e99b99/32.png) [@perigalacticon](https://discourse.nodered.org/u/perigalacticon)\
**Post date:** [4 February 2024 13:57 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/3 "2024-02-04T13:57:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 February 2024 14:18 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/4 "2024-02-04T14:18:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 February 2024 15:21 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/5 "2024-02-04T15:21:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulkeates](https://avatars.discourse-cdn.com/v4/letter/p/9de053/32.png) [@paulkeates](https://discourse.nodered.org/u/paulkeates)\
**Post date:** [5 February 2024 20:41 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/6 "2024-02-05T20:41:23Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0c8dfe2fc5b12652105d2023dcab82878acfdd55.png)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0acf954bacfa1879c9075d304beff33c1a65d6bc.png)

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 May 2024 20:42 UTC](https://discourse.nodered.org/t/sidebar-text-size/85170/7 "2024-05-05T20:42:08Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.