First - the folder has to be named chrome - all lower case.

Then the file needs to be needs to be named userChrome.css and you need to make sure that whatever text program you used to create that file didn't add .txt on the end of that file name.

I don't bother with doing that all manually, I use this extension: http://webdesigns.ms11.net/chromeditp.html

Use the Save to Desktop button and then drag the xpi file into the Firefox browser window to install it.

Why would you want to collapse those toolbars to a height of 4px?

I've attached a screenshot of how it looks for me in a profile with that code.

What are you trying to achieve?

I use this code to resize the Tab bar. I'm on Linux, so you may have to adjust or omit the margin-top and margin-bottom properties.

#TabsToolbar { height:25px!important; margin-top:-1px!important; margin-bottom:1px!important; }
#tabbrowser-tabs { height:25px!important; min-height:25px!important; }

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

Ok now we are getting somewhere. I renamed the folder to "chrome" all lowercase but that made no change. I also installed that program, but there are no instructions for changing the code I want to change, so got no where with it.

=

Cor-el, your 2nd reply finally got my actual tabs resized, thank you!

Now if you could please give me code to do the same thing with the Menu toolbar (very top of page) and the Bookmark toolbar (under address bar) to change their height to be smaller I would be grateful.

4 was just a number I plugged in to see if what I did worked. The default will largely suit most people, I just want these 3 things a little smaller for more main screen realestate.

You probably have to set a min-height as well to make a toolbar smaller. Note that you got the IDs of the Bookmarks Toolbar (#PersonalToolbar) and Menu bar (#toolbar-menubar) wrong.

#toolbar-menubar, #PersonalToolbar { min-height: 12px !important; }

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.

• DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
• https://developer.mozilla.org/DOM_Inspector
• https://developer.mozilla.org/Introduction_to_DOM_Inspector

Hi thanks again. Renaming the bars correctly and playing with the code and removing my earlier code got me what I wanted!

One last thing, now that everything else is nice and small I want to finish the job by changing the height of the URL, search and icons (the whole bar where they are located, want to shrink the height)

I found this link: http://kb.mozillazine.org/Toolbar_customization_%28Firefox%29

and entered the code at the bottom, and played with the numbers, but no dice it seems. I also tried a couple things on my own that did not work:

1. urlbar { height:15px!important; margin-top:0px!important; margin-bottom:1px!important; }
2. urlbar { min-height: 12px !important; }

The directly above code will change the margin or "padding" around the url bar, but then the url bar just gets bigger and negates what I am trying to do.

You can use negative margins to extend these bar to fill the Navigation Toolbar height.

#urlbar-container,#search-container {margin-top:-1px!important; margin-bottom:0xp!important}

The large Back button adds most to the height of the Navigation Toolbar and you need to adjust the padding of its image to reduce its height.

#urlbar-container #back-button {margin-top:1px!important; margin-bottom:0px!important}
#urlbar-container #back-button image {padding:3px 3px !important}

THANK YOU! It took me a long time but with your help I finally have the Browser exactly how I like it again (was years ago I did this). When you look at left side of my screen (img attached) you can see there is now NO wasted space pretty much at all, everything perfectly usable but as small as possible. Here is the complete code in case others are searching to do the same things:

(Note there are likely errors and redundancies as well, and while I might be able to figure them out it will take me too long and damn its working anyway! Hopefully they don't slow things down....)

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

#TabsToolbar { height:22px!important; margin-top:0px!important; margin-bottom:-1px!important; }
#tabbrowser-tabs { height:22px!important; min-height:22px!important; }

.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:20px!important;
}

#toolbar-menubar { height:18px!important; margin-top:-5px!important; margin-bottom:0px!important; }
#PersonalToolbar { height:20px!important; margin-top:-16px!important; margin-bottom:1px!important; }

#toolbar-menubar, #PersonalToolbar { min-height: 12px !important; }

#urlbar { height:15px!important; margin-top:-1px!important; margin-bottom:1px!important; }
#urlbar { min-height: 12px !important; }

#toolbarbutton { height:15px!important; margin-top:-5px!important; margin-bottom:1px!important; }
#toolbarbutton { min-height: 12px !important; padding:0; margin: 0;}

#urlbar-container {margin-top:-10px!important; margin-bottom:0xp!important}
#search-container { height:15px!important; margin-top:-12px!important; margin-bottom:1px!important; }

#urlbar-container #back-button {margin-top:1px!important; margin-bottom:0px!important}
#urlbar-container #back-button image {padding:3px 0px !important}

=

I attached a pic in case anyone wants to see what it all looks like when plugged in

Thanks again!

For some reason the code above did NOT copy correctly. Anywhere there is a "1." or a "2." at the front of a line it should be substituted with the number sign "#". Otherwise it all looks correct

I've added pre and nowiki tags to prevent Firefox from parsing it as MediaWiki code.

Cor-el my friend, I hope you can help me once again!

I am on a Desktop now (laptop smaller screen before) and want to alleviate the only issue I have with this custom profile setup. Well maybe two.

In my 2nd last post, all the code I am using is there. My main problem is with the Bookmark tabs, otherwise known as Personal bookmark tabs. When I go to click on them, they do NOT highlight unless I am pointing to the VERY bottom of the Tab, which makes them a PITA to use. I have tried changing a bunch of the numbers around and must be missing something I just can't pinpoint how to fix this.

The only other small issue which might actually be causing the first one, not sure, is take a look at my picture in 2nd last post. You see what I think are called Toolbar tabs? on the right side NOT lined up with the address bar/search bar, they are too low and infringing into the personal toolbar space. Again I tried to move them but nothing worked.

Hope you can help I really like these settings otherwise and also figured out today how to customize the new tabs page through looking at one of your old posts, thank you!

If you use negative margins to move up a toolbar or elements on a toolbar then you can't be sure if it is working properly even if it does look good.

It is possible that something on the Navigation Toolbar extends down and covers items on the Bookmarks Toolbar.

In your screenshot it looks that the buttons on the Navigation Toolbar are shifted a bit down and not centered and there is also a button with an off text that can take additional height.

You can use the "Find a node to inspect by clicking on it" button in the DOM Inspector to see what gets selected in the area that isn't working on the Bookmarks Toolbar.

Hi Cor-el. Okay I just realized something that I did not before.

Those Navigation Toolbar buttons ARE very likely the issue, I can point WAY below them, and they highlight! So they are infringing into the Toolbar space, and in fact, once I move low enough that they don't highlight, that is about where it starts working for the Personal Bookmark bar

---

Given that, can you look at the code I am using and help me move those Nav Bar buttons up higher and/or help fix this issues?

As I say I tried to move those buttons higher and did not figure out how too

Thanks again!

How does this code work for you? I'm on Linux and adapted some of the code that I'm using because your code looked terrible for me. I didn't succeed to shrink the height of the Bookmarks Toolbar to what your code did and have the buttons show properly on hover.

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

#tabbrowser-tabs { height:24px!important; min-height:24px!important; }

.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;
}
.tab-content {padding-top:3px!important}

#toolbar-menubar { height:18px!important; min-height:12px!important; margin-top:-5px!important; margin-bottom:4px!important; }
#nav-bar {border-top-width:0px!important; padding-top:0px!important; padding-bottom:1px!important; height:31px!important}

/* adjust toolbar button margin and padding */
#nav-bar > toolbarbutton {padding-top:0px!important; padding-bottom:0px!important}
#nav-bar > toolbarbutton {padding-left:1px!important; padding-right:1px!important}
#nav-bar > hbox > toolbarbutton {padding-top:0px!important; padding-bottom:0px!important}
#nav-bar > hbox > toolbarbutton {padding-left:1px!important; padding-right:1px!important}
#nav-bar > hbox > toolbarbutton {margin-top:0px!important; margin-bottom:1px!important}
#nav-bar > hbox > toolbarbutton {margin-left:0px!important; margin-right:0px!important}
#nav-bar > hbox > toolbarbutton > .toolbarbutton-icon {padding-left:2px!important; padding-right:2px!important}

#urlbar-container, #search-container {margin-top:-1px!important; margin-bottom:0xp!important}
#urlbar-container #back-button {margin-top:1px!important; margin-bottom:0px!important}
#urlbar-container #back-button image {padding:3px 0px !important}

#bookmarks-menu-button toolbarbutton,
#bookmarks-menu-button dropmarker {margin-top:0px!important; margin-bottom:0px!important}
#bookmarks-menu-button .dropmarker-icon {margin-top:0px!important; margin-bottom:0px!important}

#PersonalToolbar {height:24px!important}
#personal-bookmarks  toolbarbutton {margin:-1px 0 6px 0 !important}
#personal-bookmarks .toolbarbutton-icon {margin:-3px 2px -3px 0 !important}
#personal-bookmarks .toolbarbutton-text {margin:-2px 0 !important}

You, are the Master! Thank you very much sir, I might do some fine tweaking but for a Desktop on 27" monitor this is just great. Nav buttons moved up and Personal tabs highlight perfect, everything still fairly compact too, pic attached

May the Computer Gods smile down on you my friend :)