Aug 10th
     

Small collection of UI tweaks for Firefox 4 development builds

2010, 12:26 UTC | By | In Mozilla
Leave a comment | Trackback  | 8788 views

What it does?

  • Make the tabs like Google Chrome's tabs :)
  • Change the look of the app button (the orange Firefox logo in the top left corner).
  • Change the look of the personal tool bar (bookmarks bar) to be more compact and using a tool bar skin.
  • Combine the Reload/Stop button with the URL bar (like in Google Chrome).
  • Change the appearance of the URL and search fields in the navigation bar (less rounded corners, closer to the look of text fields in the Windows Explorer).
  • Change the minimum width of tabs to a much lower value. The default in Firefox 4 is, in my opinion, way too high. See here for a more detailed description.

Requirements

  • Windows Vista or Windows 7 with the Aero theme active. It should work with the basic or classic Windows theme, but it may not look good.
  • Tabs must be set "on top"
  • Menu bar should hidden (the orange "App" button with the firefox icon should be visible)
  • Bookmarks bar (aka personal tool bar) should be visible, but that's optional.
  • A Firefox nightly build that was released after August 10, 2010. This is important, because the necessary fix that allows Firefox to draw inside the title bar landed around August 10, so you MUST have a build that was released after this point. Beta 1 to Beta 3 is NOT sufficient.
    The most recent nightly build is available from here.

If any of the above conditions is not met, chances are that these userChrome tweaks will have a bad effect on your layout. Because of some limitations and unfinished code in current Firefox 4 builds, drawing tabs inside the title bar is only possible via CSS hacks and some of them have the potential to break the layout when you are not using an Aero theme.

The easiest way to install this is by using the stylish extension for Firefox. However, there is a caveat: The official version does not work in current Firefox 4 beta builds, because of the XPCOM (and some other) changes, so you have to use a development build of the stylish extension. Builds that reportedly work with Firefox 4 beta2 (and later nightlys) can be found here.

If you do not use the stylish extension, you will need to add this to your userChrome.css file - but it's a good reason to install stylish, because you'll get one of the most useful Firefox extensions with a ton of possibilities - if you know some CSS you can not only change the look of your browser UI but also the appearance of your favorite web sites. Not to forget the thousands of already available tweaks at userstyles.org.

Issues

Yes, there are issues. First, all these tweaks are designed to be used with an Aero theme, so if you are still on Windows XP, chances are it won't work or won't look as good as you expect it to look - it is only tested on Windows 7. When you are running Windows Vista or Windows 7, the tweaks work best when using the Aero theme.

Credits

These tweaks are partially based on the work of others, specifically:

Get it

Obtain it from userstyles.org. Stylish users can directly install it with the extension.

Like
 

10 responses to: Small collection of UI tweaks for Firefox 4 development builds

  1. TRT, Aug 12th, 2010 at 21:04
    Reply | Quote | #1

    I installed your Firefox 4 Beta/Nightly UI tweaks using Stylish 1.0.11 and Firefox 40b2.

    It works perfectly and is the only Google Chrome tab style I've found that also works with the

    Hide Caption Titlebar Plus extension.

    The only problem I've run into is that I'm unable to change the tab colors as I can with the

    default tab. Is this possible to accomplish this in CSS?

  2. Admin, Aug 12th, 2010 at 21:49
    Reply | Quote | #2

    The problem is that current FF4 builds are in a state of flux, especially UI-wise. Changes are made almost daily, some of them have the potential to break CSS tweaks, others work just fine.

    So, I'll update this frequently to reflect changes in the browser and may add a few other things, but tab coloring is a bit difficult, because the tabs are using images instead of simple background colors. That's why they cannot be colored (at the moment, maybe I'll find a solution).

  3. TRT, Aug 14th, 2010 at 06:16
    Reply | Quote | #3

    Thanks for your response. I guess I knew what your answer would be but I was hoping there was an easy way to accomplish what I wanted.

    I hope you don't mind, but I used just the parts of your style dealing with the tab styles, converted them from base64 to their images, edited them with Photoshop, and converted them back to base64 and replaced your code with the new images to achieve what I was trying to do.

    http://a.imageshack.us/img198/5263/firefox4uitwea...

    I'm just playing around with FFX4 for my personal use and have no plans to create a theme

    out of this. Your style really helped me.

    Thanks

  4. Admin, Aug 14th, 2010 at 09:27
    Reply | Quote | #4

    Hi

    No, I don't mind. Feel free to use/modify them, if you want.

  5. Pedro, Sep 3rd, 2010 at 12:49
    Reply | Quote | #5

    Hi. Loved this style. Congrats. I have one problem though, I can't get the FF menu to be aligned with the tabs as in the picture above. I just followed the instructions, so there was no tweaks from my side :-)

    Can you help me? I'd like to have as much room for the site as possible.

    Thanks

    Pedro

  6. Admin, Sep 3rd, 2010 at 16:56
    Reply | Quote | #6

    Hi,

    It's probably already outdated :)

    Fx4 is moving fast and there are almost daily changes in the UI, some of which have the potential to break user styles. I'll try to update it when the mayhem settles a bit and Fx4 becomes more stable...

    The positioning for the app-button changed about 10 times in the last 2 weeks...

    It also depends on which build you are using.

  7. Pedro, Sep 8th, 2010 at 13:10
    Reply | Quote | #7

    Hi. I just upgraded to FF4 Beta 5 and it looks the same as in Beta 4. The FF Menu stays above the tabs. Do you know where in the code one should dig in?

    Oh and I hope you don't mind but here goes an additional "would be great" tip: how about placing the new FF menu button in the toolbar instead of the tab bar?

    Thanks for the feedback.

  8. Admin, Sep 8th, 2010 at 15:02
    Reply | Quote | #8

    Wait for b6 - code freeze for b5 was about one week ago and since then, we got a few updates, especially for the orange app button.

    I'll update the style before b6 comes out

    BTW: Don't really like the idea of the menu button in the tool bar, but I'll probably make it smaller than it currently is to waste less space on the tab bar. Plus tabs will overlap somewhat to save even a bit more space (and make it more like real Chrome appearance

  9. Pedro, Sep 9th, 2010 at 02:41
    Reply | Quote | #9

    Great...looking forward to seeing your updates.

    The idea of the menu button placed in the tool bar is to make it more Chrome alike. First row tabs only, second row actions, address bar and menu button. But keeping it in the tab bar making it smaller or maybe placing it in the far right side, near the min button can also do the trick.

    I'll be coming here regularly to check on updates.

    Thanks.

  10. Admin, Sep 9th, 2010 at 04:25
    Reply | Quote | #10

    The menu button is a "special" button and is not attached to any tool bar - it is part of the main browser window's title bar actually. It should be possible to hide it and create a duplicate on the tool bar but this would require a small add-on and probably cannot be done with CSS alone.

    I'm almost sure, somebody will write such an addon when Fx goes final...

Subject

  (this is optional)

Comment text

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>