Facebook Plunges Again
Tumblr 101: Tips And Tricks To Get Started
Make Firefox 4's UI slimmer than Google Chrome - no add-ons required!
The three things? A real download manager (plus great add-on options like DownThemAll and Automatic Save Folder), being able to right click an image and set it as my wallpaper, and the euphoria-inducing ability to copy and paste in our CMS once more (with Chrome, you have to right click, paste, paste into a pop-up window, then click OK -- it's a security thing, supposedly, but rather cumbersome).
One thing I don't like about Firefox 4 is that big, orange button and all the wasted space it creates along the top. I like Chrome's minimalist UI -- and with Firefox's awesome array of customization options it's easy enough to mimic without a theme or addon!
All I did was add a few lines to my userchrome.css -- using Sebastian's ugly button removal code as a starting point. Here's my code:
Basically, I've trimmed a few pixels here and there and made two adjustments via customize > toolbar layout. To the right side of the tab bar, I added a flexible space -- to keep the Windows minimize/restore/close buttons from overlapping any of Firefox's UI elements.#appmenu-button-container {
width: 92px;
position: fixed !important;
}
#appmenu-button {
padding: 3px 8px 3px 8px !important;
margin-top:0px !important;
background-color: rgba(200, 200, 200, 0.4) !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 95px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 98px !important;
padding-top:1px !important;
padding-right:98px !important;
}
.tabbrowser-tab {
height: 20px !important;
padding-right: 4px !important;
}
.tabbrowser-strip {
height: 20px !important;
}
Got your own clever userchrome hacks? Share 'em in the comments, we'd love to see them!
Comments
27
Subscribe to commentsAJJul 22nd 2010 12:45AM
Beta two has fixed the issue with the opening something in a new window of a fixed size. The firefox button doesn't show much like the menu bar doesn't in this scenario. I do see the same thing with the app tabs. I still haven't figured out the reason for app tabs... take up less space?
The only other problems I still see are when you try to use the menu bar with this hack enabled. Otherwise it seems great now for my daily uses.
nawoaJul 22nd 2010 8:55AM
I put together a collection of addons mainly for maximizing screen space and they work on the current stable version of Firefox:
http://addons.mozilla.org/en-US/firefox/collection/netbookoptimizationkit
I included detailed instructions for the (IMHO) "best" way to set up any configurable options.
It's great for netbooks especially, but I use most of the addons on all my computers. Basically I made the collection so you could find everything you need for a great browsing experience on one page. Once everything's installed, there's less space wasted than in any other configuration I've seen, and absolutely no functionality is lost or compromised.
DDClarkJul 24th 2010 12:43AM
I definitely love the one with the icon here : http://alctplus.blogspot.com/2010/07/firefox-4-beta-how-to-move-orange.html
AJJul 24th 2010 2:49PM
I like the original button better myself. I like the change cyberguy91 made earlier which takes away the space above the tabs. Change padding-top: 3px !important; to padding-top: 0px !important;
Don't have to worry about accidentally restoring down a window when you mean to click the tab.
StrikeJul 24th 2010 5:45PM
My own modified userChrome.css :
#appmenu-button-container {
width: 88px;
position: fixed !important;
}
#appmenu-button {
padding: 3px 5px 3px 5px !important;
margin-left:5px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 83px !important;
padding-right:112px !important;
}
#navigator-toolbox[tabsontop="false"] #TabsToolbar {
padding-left: 5px !important;
padding-right:5px !important;
}
#navigator-toolbox[tabsontop="false"] {
padding-top: 24px !important;
}
menubar {
padding-left: 85px !important;
}
Note:
-Fixed the menu bar (when pressing Alt) overlapping the App Button
-Slightly smaller App Button
-Retained the original App Button color (orange)
-No need for adding space/flexible space next to the right side of the tab bar
-Fixed Tabs on Bottom
-Menu bar looks awkward with Tabs on Bottom/without App Button (delete the last 3 lines to fix it)
-Removed redundant codes
StrikeJul 24th 2010 6:09PM
Okay scrap the last 3 lines and replace it with this instead
#navigator-toolbox[tabsontop="true"] menubar{
padding-left: 85px !important;
}
Should look a lot better with Tabs on Bottom.
FranSep 8th 2010 6:40PM
Looks like it no longer works in b5.
Does anyone have a userchrome.css that fixes it?