Brackets: sidebar fontsize

[charleshross]

Sidebar needs a way to increase fontsize.

I have a laptop with a high resolution and the sidebar is super tiny (font increase only works on the editor). Sometimes programs that run in Windows will be programmed to auto-adjust their gui font-size by what the Custom DPI is set for in Control Panel. That or a built in way to do it would be nice.

[dangoor]

Indeed, this is true. I couldn't find anything in the backlog about this, though I think this is actually a duplicate of #6316

Closing as a duplicate

cc @larz0

[peterflynn]

@charleshross We also plan to add Windows high-DPI support in the near future, which might help in your case.

[edwinyzh]

This is very true! Please allow increase the font size of both the side bar and extension manager.

[voodoogap]

On my computer (Ubuntu, large monitor, old eyes) the sidebar is completely useless. And that's a game changer.

[peterflynn]

@voodoogap see #6316 and https://trello.com/c/WRhZ0xvj/969-high-dpi-support-on-windows-and-linux (including the note about the workaround of using custom CSS).

[tobibeer]

@peterflynn, how would I figure out the right selector for list-items?

I know this may be fiddly ...anyhow, this won't do...

define(function (require, exports, module) {
    "use strict";
    var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
    ExtensionUtils.addEmbeddedStyleSheet(".sidebar {font-size:18px !important; }");
});

[redmunds]

@tobibeer Use Debug > Show Developer Tools to open dev tools on the Brackets app. Then use Elements Inspector to find the sidebar and see the selectors used so you can override them.

ExtensionUtils.addEmbeddedStyleSheet(".sidebar {font-size:18px !important; }");

FYI, you can put all of your rules in a stylesheet and use ExtensionUtils.addLinkedStyleSheet(). That seems easier to manage to me.

[tobibeer]

@redmunds Great tip, thanks.

[tzachi81]

1. From the Brackets main menu click "Help > Show extension" folder.
2. In the opened window go to "user\resize-working-files" folder.
3. Open and edit "main.css" file like so:

.sidebar *{
/* can be any font-size that fits your eyes */
      font-size:15px; 
}

1. Save the file.
2. Re-open barckets.

[ann71727]

1. From the Brackets main menu click "Help > Show extension" folder.
2. In the opened window go to "user\resize-working-files" folder.
3. Open and edit "main.css" file like so:

.sidebar *{
/* can be any font-size that fits your eyes */
      font-size:15px; 
}

1. Save the file.
2. Re-open barckets.

@tzachi81
Thank you~ this works for me.
How can I know the CSS style class related to Brackets UI?
Is there a place to list it?

Can I use CSS to modify the UI style of Brackets like editing a web page?

[ikoral]

new version 1.14

1. Step same.
2. goto user\dnbard.documents-toolbar\styles
3. Open and edit "main.css" file like;
   *{
   /* you may change whole font rate fits your eyes */
   font-size:1.2em;
   }
   This will increase all font since whole font requires to increase in high resolution.
   Thanks @tzachi81 yo showed the way.