How to set the font and color?

[Mikhail22]

Question

Is it possible to set the font, font size & color for the tab's text? Unstashed tabs have blue font, stashed have black font, but both use tiny system font I can barely read. Is it possible to customize the size, font, color? I've tried to set sidebar font with userchrome.css: E.g. this changes sidebar font, like history entries, but it does not affect the plugin font.

.sidebar-placesTreechildren::-moz-tree-cell-text {
 font-family: "Times New Roman" !important;
 font-size: 14pt !important;
}

System Details

• Windows 10
• Browser Version: Firefox 78.0.2
• Tab Stash Version: 2.6

[josh-berry]

Unfortunately there is no way to do this right now. As a workaround, you could use Firefox's Zoom feature, although I just learned (from trying it out just now) that this doesn't work in the sidebar, just the tab view. :/ Firefox has a bug open about it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1647056

I'm curious if you've tried changing any of the Windows accessibility settings around system font size? Does that have any impact on the Firefox sidebar?

[Mikhail22]

I'm curious if you've tried changing any of the Windows accessibility settings around system font size? Does that have any impact on the Firefox sidebar?

System font scale, yes it has impact on the sidebar and everything. So by default 100% scale I think it is Segoe UI 10 pt and it is too small on a higher DPI monitor. And I don't use system upscaling because otherwise many apps just look ugly. So it would be nice to have customizable font & color in the plugin or via the userchrome.css somehow.

[josh-berry]

Definitely, will keep it in mind for a future release. :)

[FabledNinja]

I second this. Font is way too small for high DPI screens. I can't read the text in the addon option menu for Tab Stash. But I can with other addons like Zoom Image.

[KerfuffleV2]

@FabledNinja @Mikhail22 (if you haven't died of old age)

This is actually possible if you want to use Firefox's userContent.css feature. The Arch Linux wiki has a pretty good article on it: https://wiki.archlinux.org/title/Firefox/Tweaks#General_user_interface_CSS_settings

If you don't use Linux, most of that will still apply expect for the path prefixes and separators. Also important is that toolkit.legacyUserProfileCustomizations.stylesheets must be set to true under about:config

The chrome directory inside the profile and userContent.css files likely won't exist already, so you'll need to create them. It's also necessary to restart the browser after making any changes to userContent.css or enabling the setting I mentioned before.

The last bit of information you'll need is the link to Tab Stash's extension page. I think it's different for every user, but I'm not user. You can just open up something like the Tab Stash overview and look at the location bar. It will look like this: moz-extension://b7b97e77-b199-40c2-a4e2-0fd07f35b385/stash-list.html — the moz-extension:// prefix and ID after that is the important part.

Here's an example set of CSS modifications you can put in userContent.css that will:

1. Make the items in the menu huge.
2. Make tab/folder text bigger.
3. Remove the footer (the part that shows the Tab Stash version at the bottom.)

/* Match Tab-Stash extension pages */
@-moz-document url-prefix("moz-extension://XXXXXXXXXXXX/") {
    /* Buttons and links in the main menu */
    :not(main) button, :not(main) a { font-size: 20pt !important; }
    /* Folder headers */
    header > span.folder-name { font-size: 18pt !important; }
    /* Tab and bookmark titles */
    .action-container > a.text { font-size: 14pt !important; }
    /* Nuke the footer for good measure. */
    footer { display: none !important; }
}

Don't forget to substitute the XXXXXX part for the extension's actual id and then restart the browser. Also, if there are any problems in the userContent.css file it just won't apply: there's no error message to look for.

And now I'll take that approach and use it to make everything smaller instead!

---

edit: This post initially said to edit userChrome.css which was incorrect.

[Mikhail22]

@KerfuffleV2 Ahahah, I m alive!

I've tried your example but it does not work, nothing changes. userChrome.css is loaded, the toolkit.legacy... flag is set, ID substituted. I don't know

[KerfuffleV2]

@Mikhail22

I've tried your example but it does not work, nothing changes.

Argh, I'm a moron. It should actually be userContent.css not userChrome.css. Same directory.

I actually tried it there first and it didn't work, but probably due to some other issue and I was using some JavaScript in the browser console to hot reload the changes so I didn't have to restart the browser. Unfortunately, I didn't actually test that it worked when coming up from a fresh restart. :(

edit: It's definitely userContent.css, I can confirm this works.

[Mikhail22]

@KerfuffleV2 Yes it works now

[KerfuffleV2]

@Mikhail22 Thanks for letting me know. It's not the most convenient solution possible, but it is a solution!

[Mikhail22]

@KerfuffleV2 it is a good solution.
BTW I have a question now, how do I know these style names used in the layout? I mean .action-container > a.text and others, I want to customize the colors and some other elements, do you know where to find this information?

[KerfuffleV2]

@Mikhail22 Unfortunately, there isn't really a simple answer to this question. What I did was inspect the addon in about:debugging. For each addon, there should be an Inspect button. Once you're inspecting it, you can choose which addon page to get more detail on near the top right, it should be the icon directly to the left of the ... part. From there, under the Inspector tab you should be able to see the HTML and if you select elements you can also see which styles are applied.

Looking at the source for the styles (.less files) and templates (.vue files) in this repo is also possible.

I think generally you have to be pretty familiar with HTML and CSS to be able to do this.