Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

How do I edit how Firefox UI?

  • 7 답장
  • 1 이 문제를 만남
  • 1 보기
  • 최종 답변자: promitheus

more options

Firefox takes up more screen estate than Chrome, and I want to change that. How do I edit how Firefox looks? I want to change the back button & tab height and the Bookmark Toolbar height.

Firefox takes up more screen estate than Chrome, and I want to change that. How do I edit how Firefox looks? I want to change the back button & tab height and the Bookmark Toolbar height.

선택된 해결법

Any luck with a negative margin-top value of the Tab Bar?

#TabsToolbar { margin-top:-1px!important; }
문맥에 따라 이 답변을 읽어주세요 👍 1

모든 댓글 (7)

more options

Go to the Mozilla Add-ons Web Page {web link} (There’s a lot of good stuff here) and search for what you want.

more options

You can do that with code in the userChrome.css file.

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

You can use this button to go to the currently used Firefox profile folder:

  • Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)

You can use this code as a start to see if it works for you.

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

#nav-bar { height:33px!important; padding-top:0px!important; padding-bottom:1px!important; }
#urlbar-container #back-button {padding-top:1px !important; padding-bottom:1px !important;}
#urlbar-container #back-button image { padding:4px !important; }

/* Tab bar: adjust height - chrome://browser/skin/browser.css */
#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!important;
}
#tabbrowser-tabs {height:26px!important;}
#tabbrowser-tabs toolbar button > .toolbarbutton-icon {padding-bottom:2px!important}

#PersonalToolbar  { height:27px !important; }
#personal-bookmarks { min-height:27px !important; }
#personal-bookmarks  toolbarbutton      {padding:1px 3px!important;}
#personal-bookmarks .toolbarbutton-icon {margin:-2px 2px -2px 0px !important;}
#personal-bookmarks .toolbarbutton-text {margin:-2px 0px -2px 0px !important;}
more options

That was fantastic, and CSS markup was exactly what I was looking for! Thanks for typing it up as well :D It worked out perfectly!!

If you have any suggestions as to how I could reduce the gap between the top of the tab and the menu bar on Mac OS that would be awesome :)

more options

You're welcome

On Mac OS the menu bar is controlled by the Mac OS and not by Firefox and I'm not sure if you can achieve what you want.

Can you attach a screenshot?

  • Use a compressed image type like PNG or JPG to save the screenshot
  • Make sure that you do not exceed the maximum size of 1 MB

The DOM Inspector (DOMi) has a menu item (Edit > Select Element By Click) and a toolbar button "Find a node to inspect by clicking on it" (left icon on the toolbar in the DOMi).

  • open the browser window in the DOMi (File > Inspect Chrome Document) and choose the first entry from the drop-down list.
  • click the "Find a node to inspect by clicking on it" button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window other than the title bar).
  • click that element with the mouse and keep the button pressed until you see a red border to indicate that the DOMi has located that element in the DOM tree.

more options

That gap between the top of the tab and the bottom of the blue bar is what I want to decrease.

I tried those steps but I get stuck on the last one. Nothing shows up with a red border.

more options

선택된 해결법

Any luck with a negative margin-top value of the Tab Bar?

#TabsToolbar { margin-top:-1px!important; }
more options

Got it! Looks like -7 was the perfect number for me :)

Thanks for all the help! I really appreciate it :)

The edited one on the left, original on the right.

글쓴이 promitheus 수정일시