It’s weird that my first post was on tweaking Firefox.
It’s not bad, just that I felt like it did not really introduce what I’m going to be blogging and writing about these days. Tweaking web browsers is actually a rather inaccurate, or only a small part of the representation of chiawei.net, though I like to customize and make things work the way I like them to.
I’d really love to start writing longer articles, whether they are topics on technology, psychology, life, personal stuff, fiction etc. My Tumblr will mainly be for shorter blurbs, since it’s mighty simpler over there, and people following me will be able to see all the updates on their dashboard. A very cool implementation of micro/mini-blogging (perhaps even full blown blogging for some people).
Anyway, the current theme which is based on twentyten is also still incomplete, so expect minor to major changes. I’m pretty much undecided on how my blog should look or how it should be organized. I’d like to have innovative features yet I’d like to keep navigation, layout and reading as simple as possible. I’m unashamedly ‘tainted’ by Tumblr’s simplistic usage.
The new Firefox 4 Beta 1 ‘borrows’ many visual and UI cues from many other browsers (most obviously Google Chrome, Opera and IE). It isn’t bad, but I thought I could tweak the rather oddly placed menu bar a little.
Comparing the original Firefox 4b1 and Chrome 5 navigation and tab bar, by default they look something like this:
Firefox 4b1 Original Navbar
Chrome Navbar
See, that they look pretty close, in terms of using up vertical space, but Firefox loses out to Chrome by just 18 vertical pixels. Hmmph. Well it doesn’t do Firefox well, both in a visual and user-friendly sense, to dump their new Orange menu bar on the top above their tabs. Users won’t be able to ‘enjoy’ the same ease of pushing their mouse all the way to the top and clicking the tabs like they do in Chrome.
So how do we fix it? Well here comes hacking Firefox’s userChrome.css. It’s based off the one at DownloadSquad. Detailed instructions follows.
Firefox 4b1 Tweaked Navbar that is even more compact than Chrome's
- Install Firefox 4b1 (if you have previous versions, it’s best to uninstall them, but take note that your settings and stuff might disappear, so back them up)
- Select the ‘Tabs on top’ option in your menu bar.
- Navigate to C:\Users\*yourusername*\AppData\Roaming\Mozilla\Firefox\Profiles\
- Click on the (should be) only folder there that ends with a .default.
- Navigate to the ‘chrome’ folder
- Create a file named userChrome.css if it doesn’t already exist.
- Add the code below into userChrome.css and tweak to your liking
- You can change to color, opacity of the menu button by changing rgba() and the placement and size of buttons by changing the padding and margin settings. For most cases, I’ve already tweaked them so the tab bar is the topmost item.
- If you have previously tweaked userChrome.css before, ensure that none of the tags clash.
- Restart Firefox 4b1, and enjoy!
#appmenu-button-container {
position: fixed !important;
}
#appmenu-button {
padding: 3px 8px 3px 12px !important;
margin-top:0px !important;
background-color: rgba(54, 121, 166, 0.2) !important;
}
#appmenu-button:hover {
background-color: rgba(54, 121, 166, 0.5) !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 95px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
padding-left: 85px !important;
padding-top:0px !important;
padding-right: 115px !important;
}
If you’ve any questions, you can leave them in the comment section below! Hope you enjoy the new Firefox 4b1.
