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 commentsDavid LevineJul 19th 2010 10:26AM
I'm jealous of Windows 7 users. Unfortunately, when I use this code in Windows XP, I don't really get any results. I am able to turn the Firefox button from orange to gray, but other than that, I don't gain any pixels.
Oh well. Thanks for the code. Maybe I'll boot up a VM with Windows 7 at home so I can take advantage of it.
MisakiJul 19th 2010 10:55AM
I've tried this but I can't get it to work on Minefield 4.0a2pre
inspector123456Jul 19th 2010 10:36AM
I can not wait to see this UI in linux, I just hope they keep the same look and feel like Chrome, and not the old look, like Opera.
NoxJul 20th 2010 3:38AM
https://wiki.mozilla.org/Firefox/4.0_Linux_Theme_Mockups
The URL says it all.
OtafuJul 19th 2010 10:38AM
I am using Chrome (max window) and its the slimmest.
When you use a floating window for Chrome, you get the space above the tabs (as shown in your first screenshot)... But really, who uses a floating browser window? o_O
inspector123456Jul 19th 2010 10:47AM
I think the better question is who does not? If your looking at just one thing at a time, then sure I can see having a browser window open to the max, but if you say have 2 monitors, or if you have a very large monitor with a big resolution then looking at a page in 1024x768 means not having your browser maximized.
David LevineJul 19th 2010 11:07AM
I use unmaximized browser windows at work because I have a 24" monitor. No need to use a maximized window when no webpage will ever fill it. Plus this allow me to keep an eye on other things that I am working on.
jsmorleyJul 19th 2010 4:01PM
I certainly do. At 1680 x 1050, I have more than enough room to have my browser be plenty big and still have room for a sidebar with some useful things on it and a dock at the bottom with some app launchers visible at all times. I haven't run any program maximized since Windows95.
jokermatt999Jul 19th 2010 1:02PM
That looks great!
As for my UI trick, I just use Vimperator (https://addons.mozilla.org/en-US/firefox/addon/4891/). Who needs a UI? :)
xryunJul 19th 2010 11:51AM
Unfortunately no effect with Minefield 4.0a2pre on WinXP.
And as netbook main OS XP trick is probable more important.
jsmorleyJul 19th 2010 12:05PM
Still has the issue where the button overlaps the menu bar items when you show the menu with ALT.
JeebusJul 19th 2010 12:10PM
Could Mozilla please just enable this, so I don't have to?
cyberguy91Jul 19th 2010 5:57PM
The one single thing that bugged the heck out of me with this style is that I can't move the cursor to the very top of the screen to click the tab like I can in Chrome. I tinkered with your CSS style and figured it out (though it does look a little strange when not maximized).
Code is @ PasteBin since I'm not sure how to post code here.
http://pastebin.com/WpBRfFFG
The highlighted line is the only one I changed.
AJJul 19th 2010 6:24PM
Thanks for that little change cyberguy91.
In general, only thing I see is when you hit alt to get the old school menus, the firefox button won't slide down. I really wish Firefox would use this design. I hate all that wasted space currently. This is a great find.
cyberguy91Jul 19th 2010 7:13PM
Don't know what happened to the comment earlier, but I edited the file on Pastebin so that it will add some padding above the tabs when not maximized, but it still leaves the tabs at the absolute top when maximized.
David LevineJul 19th 2010 8:20PM
It's interesting that the Mac versions of both Chrome and Firefox have a slimmer UI than the Windows counterparts.
Here is a link that shows the two browsers: http://www.dropbox.com/gallery/4123194/1/Screenshots?h=577e0a
The first screenshot is of Firefox 4 Beta 1 and the second is of Chrome dev build 6.0.658.1
AJJul 19th 2010 9:02PM
Noticed the firefox button and min, max, close are off when you open something that opens in a window of a set size that isn't max. For example if you click the image here http://mountsnow.com/camshot.php to open it in a new window. Unless I did something wrong.
Just wish Firefox would be smart enough make a more efficient design like this as the default.
JordanJul 20th 2010 3:12PM
Nope, I have the same issue. I think I'm going to revert it, it's not worth hacking until Mozilla provides an official way to do this, or someone comes up with a better code.
Mr. CJul 20th 2010 8:33PM
How do you undo this? I can't seem to figure it out.
BrianJul 20th 2010 7:11PM
Also, if you're using the 4.0b2pre, if you turn a tab into an app tab, it no longer touches the navigation bar as it should. It works just fine when you turn it back into a regular tab, but app tabs don't quite work correctly with this hack.