Sidebar line spacing - Simple Tab Groups add-on
Hi How can I write code to change line spacing for the sidebar of the add-on "Simple Tab Groups".
I found this code which changes line spacing for Bookmarks ... it works.
https://support.mozilla.org/si/questions/1238370
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* Minimize height of sidebar items */ .sidebar-placesTreechildren::-moz-tree-row {
min-height: 18px !important; height: 18px !important; max-height: 18px !important;
}
Chosen solution
I installed the extension and added a couple tabs. You want to reduce/override the height and min-height?
Turns out the rules need to go into a userContent.css file. For example,
#stg-popup .item {
min-height: 18px !important;
height: auto !important;
}
Yielding this:
Or course, adjust that min-height and height as desired.
Read this answer in context 👍 1All Replies (7)
Most likely an add-on's sidebars do not use the messy "tree" code of ancient XUL but instead use standard HTML elements.
If you want to "Inspect" an add-on sidebar, try this:
- Open the add-on's sidebar
- Type or paste about:debugging in the address bar and press Enter to load that page
- In the left column, click This Firefox
- Find the extension and click its Inspect button -- this should open a new tab
- Switch to the Inspector panel if needed, then look in the right side for a selector that lets you choose what to inspect -- it looks like a window with a sidebar and a main area -- choose the sidebar page here (this might or might not be obvious from the available file names)
- Now you should have a familiar inspector view into the sidebar to identify elements and style rules
Now, whether your overriding styles belong in a userChrome.css or userContent.css file, I don't know...
Thanks, this is very informative. It looks like there is code to control appearance (see attachment).
The CSS in the "Style Editor" tab makes changes when manually edited. But I haven't found the setting which controls spacing.
If I do make changes manually to the CSS in the "Style Editor" tab, will they be permanently applied. Is this how it works?
Edit: Sorry, I think you say you need to override by writing code to a file, and it may or may not be userChrome.css.
Modified by moz_spt
Chosen Solution
I installed the extension and added a couple tabs. You want to reduce/override the height and min-height?
Turns out the rules need to go into a userContent.css file. For example,
#stg-popup .item {
min-height: 18px !important;
height: auto !important;
}
Yielding this:
Or course, adjust that min-height and height as desired.
The procedure for userContent.css is nearly identical to userChrome.css -- same chrome folder, same preference to direct Firefox to look for the file at startup. Example thread:
https://support.mozilla.org/en-US/questions/1338198#answer-1456835
Thank you for looking at this. I couldn't get the HTML code to show up for some reason. All I get is as per attachment. However I did create a userContent.css file with your code and this did work.
I see the problem in your screenshot. You're not inspecting the sidebar. If you look to the right end of the row with Inspector Console Debugger... you'll see an icon that looks like a window with a sidebar (or a frameset). Click that button and you can choose to inspect the "popup" page which is open in the sidebar. (It only works if the sidebar is currently showing that page.) Sorry that wasn't clear enough.
Great, thanks for the additional info.