Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

How to create userChrome.css file

  • 3
  • 1 nwere nsogbu anwere nsogbu a
  • 1 view
  • Nzaghachi ikpeazụ nke Barubiito

more options

I'm trying to adjust the spacing of the lines in the bookmarks sidebar (in recent versions, the line height is excessive and increases the amount of scrolling needed). The plugin I tried worked, but caused Firefox to use way too much CPU on my Mac Book Pro.

So I'm trying to solve the problem with a userChrome.css file instead. I found this code elsewhere on the support site:

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

/* Tighten up bookmark tree in Fx25 */ .sidebar-placesTree treechildren::-moz-tree-row, .placesTree treechildren::-moz-tree-row { height: 1.3emÊ!important; border-width: 1pxÊ!important; } I created the file, made sure the file suffix is .css and not .txt, put it in the correct folder (Library/Application Support/Firefox/Profiles/(my profile folder), but it's not having any effect.

Any idea what could be wrong? Alternatively, any ideas about adjusting the line spacing in the Bookmarks sidebar?

I'm trying to adjust the spacing of the lines in the bookmarks sidebar (in recent versions, the line height is excessive and increases the amount of scrolling needed). The plugin I tried worked, but caused Firefox to use way too much CPU on my Mac Book Pro. So I'm trying to solve the problem with a userChrome.css file instead. I found this code elsewhere on the support site: @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* Tighten up bookmark tree in Fx25 */ .sidebar-placesTree treechildren::-moz-tree-row, .placesTree treechildren::-moz-tree-row { height: 1.3emÊ!important; border-width: 1pxÊ!important; } I created the file, made sure the file suffix is .css and not .txt, put it in the correct folder (Library/Application Support/Firefox/Profiles/(my profile folder), but it's not having any effect. Any idea what could be wrong? Alternatively, any ideas about adjusting the line spacing in the Bookmarks sidebar?

Asịsa ahọpụtara

In your Profile folder you need to create a folder named chrome and then place the userChrome.css file in that new folder.

As far as the code you used { height: 1.3emÊ!important; border-width: 1pxÊ!important; }

that Ê is incorrect - that shouldn't be there - just a space and then an exclamation mark ! need to be careful with the text editor program you use, some add extra non-text characters

{ height: 1.3em !important; border-width: 1px !important; }

As far as the totality of the code you posted, I have no idea if it is correct or not. I would use a UserStyle and Stylish to do a mod like that or grab the code from a UserStyle. https://userstyles.org/

Gụọ azịza a na nghọta 👍 1

All Replies (3)

more options

Asịsa Ahọpụtara

In your Profile folder you need to create a folder named chrome and then place the userChrome.css file in that new folder.

As far as the code you used { height: 1.3emÊ!important; border-width: 1pxÊ!important; }

that Ê is incorrect - that shouldn't be there - just a space and then an exclamation mark ! need to be careful with the text editor program you use, some add extra non-text characters

{ height: 1.3em !important; border-width: 1px !important; }

As far as the totality of the code you posted, I have no idea if it is correct or not. I would use a UserStyle and Stylish to do a mod like that or grab the code from a UserStyle. https://userstyles.org/

more options

Note that you need to use a plain text editor like TextEdit on Mac and save the file as a plain text file.

Note that height:1.3em is the default, so you need to specify a smaller value to see any diference.

.sidebar-placesTree treechildren::-moz-tree-row {height:1.2em!important;}
.placesTree treechildren::-moz-tree-row {height:1.2em!important;}

See:

treechildren::-moz-tree-row {
  border: 1px solid transparent;
  min-height: 18px;
  height: 1.3em;
}

treechildren::-moz-tree-separator {
  border-top: 1px solid ThreeDShadow;
  border-bottom: 1px solid ThreeDHighlight;
}

more options

@the-edmeister Thanks, that worked! I hadn't noticed that some characters changed. I think that's a remnant of using Word. At first I tried using TextEdit, but oddly I couldn't find a way to save as a plain text file with that. RTF is not the same, right?

Also I guess I'd missed the part about putting it IN a Chrome folder. Anyway, I recopied the code from where I found it, saved the file from Dreamweaver, and put it in a Chrome folder, and it worked. My bookmarks are now spaced the way I like them. Thanks!