Firefox Flock theme

Flock is cool for its blogging and photo sharing capabilities integrated right in the browser. However, I just want that clean looking theme in my Firefox. So, here it is - the first ported theme of the latest Flock beta version. A special thank goes to Pardal F. for the initial port of the alpha version and all the other mozillaZine enthusiasts. Please read the entire article to learn how to take full advantage of the theme and make it look like the screenshots. Take it for a spin and please do comment. Enjoy!

Main Firefox window

Tabs!

Toolbar buttons

To install the theme, download the jar file and drag 'n drop it onto the Firefox Themes window. After installing the theme, you'll need to add a few things to your userChrome.css file. This file is located in your Firefox profile directory, in the chrome subdirectory. Usually, this means C:\Documents and Settings\<username>\Application Data\Mozilla\Firefox\profiles\<profile-name>\chrome\ for Windows and /home/<username>/.mozilla/firefox/<profile-name>/chrome/ for Linux.

The first thing to add is the star beside the address bar. Insert into userChrome.css, before the '@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul")' part in the file:

/* flock */
@import url("chrome://browser/skin/flock/urlbar/star-urlbar.css");

Next, for the prevention of a few bugs, add to the end of the file:

/* Avoid stretched icons on tabs */
.tab-icon-image {
max-width: 16px !important;
}

.tab-middle > .tab-icon {
display: -moz-stack !important;
}

/* Less toolbar button spacing */
toolbarbutton {
padding: 0px !important;
}
toolbarbutton[type="menu-button"],
toolbarbutton[type="menu-button"]:hover,
toolbarbutton[type="menu-button"]:hover:active,
toolbarbutton[type="menu-button"][open="true"],
toolbarbutton[type="menu-button"][disabled="true"],
toolbarbutton[type="menu-button"][disabled="true"]:hover,
toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
padding: 0 !important;
}

/* More bookmark button spacing */
.bookmark-item {
padding: 0 3px !important;
}

/* Make menus XP style */
menupopup, popup {
border: 1px solid ThreeDShadow !important;
-moz-border-left-colors: ThreeDShadow !important;
-moz-border-top-colors: ThreeDShadow !important;
-moz-border-right-colors: ThreeDShadow !important;
-moz-border-bottom-colors: ThreeDShadow !important;
padding: 2px !important;
background-color: Menu !important;
}
menubar > menu {
border: 1px solid transparent !important;
padding: 2px 5px 2px 7px !important;
margin: 0 !important;
}
menubar > menu[_moz-menuactive="true"] {
background-color : Highlight !important;
color: HighlightText !important;
}

There are also a few tweaks for you to do, if you like. If you want to make the search box wider, you must also add:

/* Make the Search box flex wider */
#search-container, #searchbar {
-moz-box-flex: 60 !important;
}

And, for no text on the Go button:

/* No text on Go button */
#go-button .toolbarbutton-text {
display: none !important
}

Although less visible, two extensions are featured in the screenshots, namely 'Stop-or-Reload Button' and 'Tab Mix Plus'. The first one mixes both Stop and Reload buttons into a single one, much like Safari. The second one is a very handy tool for hiding the close button on the tab bar and replacing it with a close button on each of the tabs. It also includes page load notification, a session manager and much more.

That's all for now. Have fun!

---