Firefox: How to reduce the line height of some list elements in the browser - gHacks Tech News

Firefox: How to reduce the line height of some list elements in the browser

Firefox 25 Stable has been released about a week ago by Mozilla, and with the new version came several changes to the browser.

The Find on page feature for instance was limited to the page it was opened on, and there have also been some changes in regards to secure connections.

Firefox users on Windows Vista or newer who use the sidebar to display bookmarks in the browser, open about:config regularly, Adblock Plus, or other extensions that use the default list styles of the browser, may have noticed that Mozilla has increased the spacing between elements of those lists.

A bug report on Mozilla's bug tracking system confirms the change that was applied to Windows Vista and newer versions of Windows. A screenshot was uploaded on Mozilla's Support Forum that displays the old and new style next to each other.

Firefox: reduce line height in lists

firefox 25 line height

Firefox users who want to restore the old styling of lists in the browser cannot do so from within the browser. There is simply no configuration option -- not in the options and not in about:config -- that restores the old styling in the web browser.

The only option that Firefox users have is to modify the CSS code that the browser uses. This may sound highly technical but is not really that complicated, thankfully.

Here is what you need to do:

  1. Load about:support in the address bar and hit on the enter key. This opens the Troubleshooting Information page.
  2. Locate Show Folder under Application Basics and click on the button to open the Firefox profile folder on the system.
  3. Close Firefox.
  4. Locate the Chrome folder here. If there is no Chrome folder, right-click and select New > Folder and name it Chrome.
  5. Open the folder and find userChrome.css. Again, if it does not exist, create the file. Make sure its extension is .css and not .css.txt. You need to select New > Text Document after a right-click in the folder, and rename the file accordingly.
  6. Add the following code to the end of the file and start Firefox afterwards.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.sidebar-placesTree treechildren::-moz-tree-row,
.placesTree treechildren::-moz-tree-row {
height: 1.3em !important;
border-width: 1px !important;
}

When you do, you will notice that the space between elements of the list has been reduced, so that more are displayed at the same time and without scrolling.

Note: This takes care of bookmarks only.

Now Read: Look up Firefox IDs for custom styling

Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. hessam said on November 5, 2013 at 4:24 pm
    Reply

    you can also do it with User Style Manager
    https://addons.mozilla.org/en-US/firefox/addon/user-style-manager/

    also here some useful userstyle you can try
    http://userstyles.org/styles/77186/firefox-move-paste-and-go-search-to-top
    http://userstyles.org/styles/65066/panel-menu-inspired-firefox-menu-button
    http://userstyles.org/styles/87110/private-browsing-bars
    http://userstyles.org/styles/48544/firefox-appmenu-popup-display-vertical
    http://userstyles.org/styles/72137/about-addons-compact
    http://userstyles.org/styles/45128/always-show-close-button-on-tabs-fireffox-4
    http://userstyles.org/styles/93173/findbar-restore-sanity-ff25
    http://userstyles.org/styles/36424/combine-stop-reload
    http://userstyles.org/styles/10/combine-stop-reload-buttons
    http://userstyles.org/styles/1364/hide-disabled-forward-back-buttons
    http://userstyles.org/styles/90032/elian-ff-tab-close-button-skinx5
    http://userstyles.org/styles/12021/bold-black-active-tab-dark-blue-inactive-tabs
    http://userstyles.org/styles/86340/style-for-private-tab-addon
    http://userstyles.org/styles/36476/autohide-identity-icon-lable
    http://userstyles.org/styles/3171/firefox-no-menu-separators
    http://userstyles.org/styles/44082/firefox-button-reduce-width-show-as-tab

    and some other
    http://userstyles.org/styles/75455/firefox-urlbar-suggest-full
    http://userstyles.org/styles/86263/firefox-bookmark-toolbar-hover-style-windows-7
    http://userstyles.org/styles/64844/google-search-visible-cached-similar-links
    http://userstyles.org/styles/53667/identify-unread-tabs
    http://userstyles.org/styles/64351/menu-metro
    http://userstyles.org/styles/20257/neat-statusbar-icons
    http://userstyles.org/styles/65066/panel-menu-inspired-firefox-menu-button
    http://userstyles.org/styles/51894/reduce-height-on-bookmark-bar
    http://userstyles.org/styles/69849/remove-dropdown-marker-in-address-bar-firefox
    http://userstyles.org/styles/78804/square-corner-tab
    http://userstyles.org/styles/13323/tabs-hide-title-favicon-on-blank-tab
    http://userstyles.org/styles/10714/bold-some-menu-items-in-all-menus
    http://userstyles.org/styles/47149/nicer-toolbar-buttons-bookmarks-win7
    http://userstyles.org/styles/68979/firefox-better-awesomebar
    http://userstyles.org/styles/75455/firefox-urlbar-suggest-full
    http://userstyles.org/styles/16963/addonbar-statusbar-compact-icon-font
    http://userstyles.org/styles/15061/autohide-dropmarkers
    http://userstyles.org/styles/79980/awesome-bar-background-color-based-on-type-2
    http://userstyles.org/styles/19734/unified-url-search-bar-hover-splitter

  2. Ficho said on November 5, 2013 at 5:30 pm
    Reply

    I don’t have that problem.Maybe it is because of BlackFox V2 theme I am using.
    I would like to know if it is possible to remove Chrome like Link Preview from bottom left (or right)?
    It looks stupid when bookmarks sidebar is enabled.

    1. Martin Brinkmann said on November 5, 2013 at 6:44 pm
      Reply

      Not sure if you can disable it, but you can increase the time before it is displayed. Change browser.overlink-delay for that.

  3. FirefoxDie said on November 5, 2013 at 6:10 pm
    Reply

    I don’t like in what direction tends Mozilla with Firefox. The version of the versions is always something changing for the worse. This change not only affects list in menu but other addons too, lifke FireFTP (space beetwen list items are to big, we see less elements). Where is option restoring a better previous solution? Now I must create CSS for every case? What’s incompetence from Mozilla developers.

  4. Jones said on November 6, 2013 at 10:35 am
    Reply

    Thank you very much!

  5. R2D2 said on November 6, 2013 at 7:21 pm
    Reply

    Hey Martin,

    thank you very much. I can’t understand why Mozilla did that :-/ On a Notebook-Screen every pixel is important and with the increased line height i had to scroll up and down even more. I was searching the net for some css-code to fix that as i saw that you already have a solution :-)

    For the ScrapBook-Sidebar you can use:

    #sbTree treechildren::-moz-tree-row {
    height: 1.3em !important;
    border-width: 1px !important;
    }

    so that everything is as it should be.

  6. Kneyfield said on November 7, 2013 at 9:34 am
    Reply

    I can’t believe it. Google Chrome introduced the same stupid thing for all of their menus with the introduction of their new custom UI, but there it can only be changed with an experimental flag.

    You’ve got to be thankful for XUL as a Firefox user.

  7. tom said on November 7, 2013 at 11:52 pm
    Reply

    Thanks. I added the code as a new userstyle in Stylish ( https://addons.mozilla.org/en-US/firefox/addon/stylish/ ) and it works. I love that almost everything in the Firefox UI can be customized using userstyles!

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.