X
Tap here to go to the mobile version of the site.

Support Forum

Make firefox toolbars narrower

Posted

I want to make my firefox toolbars narrower, I do not like that tabs and other firefox parts take so much screen space, so is there a way to do so ??

Thank you for your time

Here is a rough sketch what I want

http://i.imgur.com/gzqVb2Z.png

I am sorry for low quality I do not know how to use gimp and I am too lazy to get to my windows pc and start photoshop sorry

I want to make my firefox toolbars narrower, I do not like that tabs and other firefox parts take so much screen space, so is there a way to do so ?? Thank you for your time Here is a rough sketch what I want http://i.imgur.com/gzqVb2Z.png I am sorry for low quality I do not know how to use gimp and I am too lazy to get to my windows pc and start photoshop sorry

Modified by Levan7

Chosen solution

I tested a simplified version of cor-el's rule and wanted to show the result on the tab bar. I think the Navigation toolbar is a little trickier to shrink because the back button is very tall.

Edit: here is that rule for copy/paste purposes

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#tabbrowser-tabs, 
.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: 24px;
}
Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 15.0 r0
  • Google Update
  • Battlefield Play4Free Updater
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.9
  • NVIDIA 3D Vision plugin for Mozilla browsers
  • NVIDIA 3D Vision Streaming plugin for Mozilla browsers
  • A plugin to detect whether the Adobe Application Manager is installed on this machine.
  • The plugin allows you to have a better experience with Microsoft Lync
  • Nitro PDF plugin for Firefox and Chrome
  • The plugin allows you to have a better experience with Microsoft SharePoint
  • OGPlanet Game Plugin

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:33.0) Gecko/20100101 Firefox/33.0

More Information

Scribe 732 solutions 3484 answers

You could try the Add-on Australis small icons.

You could try the Add-on [https://addons.mozilla.org/en-US/firefox/addon/australis-small-icons/?src=ss Australis small icons.]

Question owner

Sorry but that add-on is not avilable on linux

Sorry but that add-on is not avilable on linux
the-edmeister
  • Top 25 Contributor
  • Moderator
5411 solutions 40297 answers

Helpful Reply

See if this is close to what you want. https://userstyles.org/styles/89038/firefox-australis-custom-tabs-for-2-5

Question owner

Yes it is something like that but my biggest problem is that I do not like the very tall tab buttons Plus that addon made everything so small that it was unusable

by the way, Thank you for the reply

Yes it is something like that but my biggest problem is that I do not like the very tall tab buttons Plus that addon made everything so small that it was unusable by the way, Thank you for the reply
cor-el
  • Top 10 Contributor
  • Moderator
17571 solutions 158915 answers

Helpful Reply

I use this code for the Tab bar in the userChrome.css file with the tab on bottom and close buttons hidden (I middle-click the tab). I have a lot of tabs open and it is always possible to accidentally close a tab when clicking a tab to set focus.

Add code to the userChrome.css file below the default @namespace line.


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

#TabsToolbar {-moz-box-ordinal-group:10000!important; height:25px!important; margin-top:-1px!important; margin-bottom:1px!important}

/* Tab bar: adjust height - chrome://browser/skin/browser.css */
#tabbrowser-tabs {height:25px!important; min-height:25px!important; border-left: 1px threedshadow solid}

.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height:25px!important;
}
#tabbrowser-tabs .toolbarbutton-icon        {padding-bottom:3px!important}
#tabbrowser-tabs .tabbrowser-tab .tab-label {padding-bottom:1px!important}
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none!important}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

I use this code for the Tab bar in the userChrome.css file with the tab on bottom and close buttons hidden (I middle-click the tab). I have a lot of tabs open and it is always possible to accidentally close a tab when clicking a tab to set focus. Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css ---- <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #TabsToolbar {-moz-box-ordinal-group:10000!important; height:25px!important; margin-top:-1px!important; margin-bottom:1px!important} /* Tab bar: adjust height - chrome://browser/skin/browser.css */ #tabbrowser-tabs {height:25px!important; min-height:25px!important; border-left: 1px threedshadow solid} .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before { min-height:25px!important; } #tabbrowser-tabs .toolbarbutton-icon {padding-bottom:3px!important} #tabbrowser-tabs .tabbrowser-tab .tab-label {padding-bottom:1px!important} #tabbrowser-tabs .tabbrowser-tab .tab-close-button {display:none!important} </nowiki></pre> ---- The customization files userChrome.css (user interface) and userContent.css (websites) are located in the <b>chrome</b> folder in the Firefox profile folder. *http://kb.mozillazine.org/Editing_configuration

Modified by cor-el

Question owner

I believe this is because I very purely explained the my question sorry I am not sure how will that help me in my case I will add an image to show what I want to do with firefox

I believe this is because I very purely explained the my question sorry I am not sure how will that help me in my case I will add an image to show what I want to do with firefox

Modified by Levan7

jscher2000
  • Top 10 Contributor
8788 solutions 71867 answers

Chosen Solution

I tested a simplified version of cor-el's rule and wanted to show the result on the tab bar. I think the Navigation toolbar is a little trickier to shrink because the back button is very tall.

Edit: here is that rule for copy/paste purposes

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#tabbrowser-tabs, 
.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: 24px;
}
I tested a simplified version of cor-el's rule and wanted to show the result on the tab bar. I think the Navigation toolbar is a little trickier to shrink because the back button is very tall. ''Edit: here is that rule for copy/paste purposes'' @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); #tabbrowser-tabs, .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before { min-height: 24px; }

Modified by jscher2000

Question owner

I have a question where should I enter that code? should I get an addon or edit a file ??

Thank you very much for the reply

I have a question where should I enter that code? should I get an addon or edit a file ?? Thank you very much for the reply
the-edmeister
  • Top 25 Contributor
  • Moderator
5411 solutions 40297 answers

As cor-el posted - http://kb.mozillazine.org/UserChrome.css

Or you can use ChromEdit Plus which provide a user interface inside Firefox for editing the 3 "user" files. http://webdesigns.ms11.net/chromeditp.html

As '''cor-el''' posted - http://kb.mozillazine.org/UserChrome.css Or you can use ChromEdit Plus which provide a user interface inside Firefox for editing the 3 "user" files. http://webdesigns.ms11.net/chromeditp.html

Question owner

I am sorry I edited the userChrome.css file but no changes have taken place is there a way to select that profile ?

http://i.imgur.com/YNFXHHL.png

here is how it looks now

this is what I used

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#tabbrowser-tabs, 
.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: 24px;
}
I am sorry I edited the '''userChrome.css ''' file but no changes have taken place is there a way to select that profile ? http://i.imgur.com/YNFXHHL.png here is how it looks now this is what I used <pre><nowiki> @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); #tabbrowser-tabs, .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before { min-height: 24px; }</nowiki></pre>

Modified by cor-el

the-edmeister
  • Top 25 Contributor
  • Moderator
5411 solutions 40297 answers

The userChrome.css file belongs in the Profile folder, in the /chrome/ folder. The userChrome.css file won't be used if its located anywhere else.

Use Help > Troubleshooting Information - then hit the Show Folder button to open your Profile folder. Then close Firefox before doing any editing.

Or use the ChromEdit Plus extension.

The '''userChrome.css''' file belongs in the Profile folder, in the '''/chrome/''' folder. The userChrome.css file won't be used if its located anywhere else. Use Help > Troubleshooting Information - then hit the Show Folder button to open your Profile folder. Then close Firefox before doing any editing. Or use the ChromEdit Plus extension.

Question owner

Again huge thank you for the reply but sadly it does not work, can it be because I am running Windows 8 right now or that I am using not default theme (back in the day it was called persons or something)

Again huge thank you for the reply but sadly it does not work, can it be because I am running Windows 8 right now or that I am using not default theme (back in the day it was called persons or something)
jscher2000
  • Top 10 Contributor
8788 solutions 71867 answers

I'm only able to test on Windows 7, with an Aero theme, so I don't know whether Firefox is using a different style sheet for Windows 8.

It is my understanding that userContent.css is only read at startup, so you have to exit/restart Firefox to see any changes. To experiment interactively, you can use the Stylish extension with its handy Preview button.

https://addons.mozilla.org/firefox/addon/stylish/

I don't know whether a persona (lightweight theme) touches these rules and could override your own user-specified style. Adding !important might help with that:

  min-height: 24px !important;
I'm only able to test on Windows 7, with an Aero theme, so I don't know whether Firefox is using a different style sheet for Windows 8. It is my understanding that userContent.css is only read at startup, so you have to exit/restart Firefox to see any changes. To experiment interactively, you can use the Stylish extension with its handy Preview button. https://addons.mozilla.org/firefox/addon/stylish/ I don't know whether a persona (lightweight theme) touches these rules and could override your own user-specified style. Adding !important might help with that: min-height: 24px !important;
cor-el
  • Top 10 Contributor
  • Moderator
17571 solutions 158915 answers

You can reduce the height of the Back button by modifying the padding values of the image.

#nav-bar {padding-top:0px!important; padding-bottom:1px!important; height:31px!important}

#urlbar-container #back-button {margin-top:1px!important; margin-bottom:0px!important}
#urlbar-container #back-button image {padding:3px 3px !important}
You can reduce the height of the Back button by modifying the padding values of the image. <pre><nowiki> #nav-bar {padding-top:0px!important; padding-bottom:1px!important; height:31px!important} #urlbar-container #back-button {margin-top:1px!important; margin-bottom:0px!important} #urlbar-container #back-button image {padding:3px 3px !important} </nowiki></pre>