Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

bookmark sidebar - Removing arrows from bookmark folders

more options

I asked this a year ago in this thread https://support.mozilla.org/en-US/questions/1124364. The info given didn't work. I'm exploring Firefox again and tried at this again. Still no. To be clear, I need to create a chrome folder with a userChrome.css; and nested within, browser and skins folders, with browser.css inside the last, right?

Attached is an image of the plugins I have.

I asked this a year ago in this thread https://support.mozilla.org/en-US/questions/1124364. The info given didn't work. I'm exploring Firefox again and tried at this again. Still no. To be clear, I need to create a chrome folder with a userChrome.css; and nested within, browser and skins folders, with browser.css inside the last, right? Attached is an image of the plugins I have.
Attached screenshots

Modified by A_Culture_Mind

Chosen solution

If you have CTR then try to add the code via CTR (Custom ccs code) instead of using userChrome.css.

Read this answer in context 👍 0

All Replies (13)

more options

I would suggest that what ever help we provided at this time is going to change Nov. 14th https://support.mozilla.org/en-US/questions/1180170 Also you are running version 56 while 56.0.1 is latest release.

So with everything changing with your plugins to Extensions only all your Legacy ones must be updated to new versions and if updating in the browser extension page does not work you must go to all of those websites and see if there is a new version. If not showing a new version that is compatible to ver 57 then must email the maker of those Extensions and or go to there support pages to find answers if supporting them or must find a Alternative.

Since version 57 is going to be all new code and new engine can you please return after Quantum 57 release and am sure we can help you or maybe you should be working in the new Firefox ver 57 Quantum Developers Version https://www.mozilla.org/en-US/firefox/developer/ and then you now have access to that forum also.

Thank you.

more options

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* remove arrows for folders on the Bookmarks Toolbar */
#personal-bookmarks .bookmark-item[container] > .toolbarbutton-menu-dropmarker {
 display:none !important;
}

/* remove '+' icons to expand/close folders in the sidebar */

#bookmarks-view treechildren::-moz-tree-twisty {
 display:none !important;
}

  • create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • paste the code in the userChrome.css file in the editor window
  • make sure that the userChrome.css file starts with the default @namespace line
  • make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file
more options

NOTE: cor-el has a good point that you probably want to add either

#bookmarks-view

or

.sidebar-placesTree

at the start of your rules to avoid applying them to "trees" in other areas of Firefox.


Do you mean the "twisties" that are pointed out in the attached screenshot?

Those are defined in the following style sheet (you can paste to the address bar and press Enter to load):

chrome://global/skin/tree.css

I suggest using Find (Ctrl+f) for twisty and clicking Highlight All. Then it should be very clear the rules you need to override, starting with:

treechildren::-moz-tree-twisty { ...

You can override these rules by copying them to userChrome.css and then editing them to your preferred values. For example, you could try changing

width: 9px; => width: 0 !important;

list-style-image: url(various); => list-style-image: none !important;

I haven't experimented with it myself.

Modified by jscher2000 - Support Volunteer

more options

@PkShadow: Ahhh. I am using 56.01, by the way.


@cor-el: tried, failed. Note image. Yeah, I didn't remember to show file types....


@jscher2000: not clear to me, as I have no idea much of what it means. True/false would be easy. Note image.

Modified by A_Culture_Mind

more options

Could you confirm that Firefox is loading your userChrome.css file? Note: you do have to exit and restart Firefox at least once to get Firefox to read the file.

Then you can use the Browser Toolbox. See: https://developer.mozilla.org/docs/Tools/Browser_Toolbox

The Browser Toolbox has several sections. The one you want is "Style Editor."

In the left column, Firefox will have a tile for each currently loaded global style sheet. The order is unpredictable, but you should find userChrome.css. Click that to see what Firefox is seeing.

This CSS is editable in near real time. To refresh the appearance of the Bookmarks Sidebar, you need to close and re-open it. The attached screenshot illustrates the result of this rule:

/* Hide twisties in Bookmarks Sidebar */
.sidebar-placesTree treechildren::-moz-tree-twisty {
  padding-inline-end: 0 !important;
  width: 0 !important;
}

Once you have the rule the way you want, you can click the Save link on the userChrome.css tile in the left column.

more options

Seems you are losing the !important part when you paste the rules. See the attached and compare with cor-el's code. How is that happening?

more options

Note that the same happened in the other thread that also doesn't show the !important flag in the screenshot.

I don't know what is going on here and why the !important; part is missing in the CSS code, but with !important; appended the code won't work because you need to override an existing rule.

See also:

more options

I guess I missed highlighting that bit. In any case, userChrome.css isn't in the left pane list, so I guess it's not seeing it.

more options

A_Culture_Mind said

userChrome.css isn't in the left pane list, so I guess it's not seeing it.

The only time Firefox should ignore userChrome.css is when you start in Firefox's Safe Mode. In normal operation, it should be read and show up in the Browser Toolbox.

Unless you have multiple profile folders and created the file in one that isn't active, I don't know why you aren't seeing that. To confirm your currently active profile path, you can check the About Profiles page (type or paste about:profiles in the address bar and press Enter to load it). Look for "This is the profile in use and it cannot be deleted."

more options

I do not know why. The profile page is as you say, and shows the directory I've written in. I'm obviously not in safe mode, as addons function, and I close it after each time I post.

more options

In reviewing your earlier posts, I see you have the Stylish extension. Try pasting this in a new blank rule in Stylish:

/* Hide twisties in Bookmarks Sidebar */
.sidebar-placesTree treechildren::-moz-tree-twisty {
  padding-inline-end: 0 !important;
  width: 0 !important;
}

Does it work? Even if it does, we need to get your userChrome.css working before you update to Firefox 57 when Stylish will either stop working completely or will be updated to style only web pages.


I notice you also have the Classic Theme Restorer extension. Is there any possibility that CTR is changing the layout of the Bookmarks Toolbar, or does it look like this:

more options

Chosen Solution

If you have CTR then try to add the code via CTR (Custom ccs code) instead of using userChrome.css.

more options

@cor-el: the other night I was going through the CTR features, and stopped on that thinking.....but I didn't think far enough. Very simple. That worked. Beauty.

Nods to all involved.

Modified by A_Culture_Mind