搜尋 Mozilla 技術支援網站

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

Make firefox toolbars narrower

  • 14 回覆
  • 1 有這個問題
  • 1414 次檢視
  • 最近回覆由 cor-el

more options

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

由 Levan7 於 修改

被選擇的解決方法

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;
}
從原來的回覆中察看解決方案 👍 1

所有回覆 (14)

more options

You could try the Add-on Australis small icons.

more options

Sorry but that add-on is not avilable on linux

more options
more options

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

more options

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.

由 cor-el 於 修改

more options

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

由 Levan7 於 修改

more options

選擇的解決方法

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;
}

由 jscher2000 於 修改

more options

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

more options

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

more options

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;
}

由 cor-el 於 修改

more options

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.

more options

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)

more options

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;
more options

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}