A Better Firefox Interface

I just finished up my changes to the user interface of chrome they’re implemented using Stylish but the css could be used in userchrome.css if on so desired, I do not however. There is lots of snippet use from JohnBooty’s Firefox 4 userchrome.css: Flat “Chrome-like” toolbar button, and Wmarcello’s Firefox 4 Nightly – Change App Menu Button Text

Changes include

• Flatted toolbar and reduced gaps between toolbar icons
• Changed text of appmenu button
• Changes the appmenu button size (slightly) and colouring
• Removed the gaps at the tabs sides

You’re best bet for installation is to wonder over to userstyles.org and install my changes from there via this link http://userstyles.org/styles/59721/firefox-4-ui-slim-lined-and-flattened-plus-more (opens in new tab / window)

Screenshot thumbnails (click to enlarge)
 

I’ve include the code on this page if you want to look at it here, you’ll note that I’ve changed the Firefox appmenu button to read “Interwebz” if you search for that phrase to find it then change the text to whatever you like.

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*Flatten toolbar and reduce gaps between icons*/
#nav-bar .toolbarbutton-1,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
#nav-bar .toolbarbutton-1 {
        background:none !important;
        border:none !important;
        box-shadow: none !important;   
        opacity: 1 !important;
        padding:0px 2px 0px 2px !important;
        }

/* Edit text of appmenu button */
#appmenu-button .button-box .box-inherit:before {
    content: "Interwebz" !important;
}
#appmenu-button .button-box .box-inherit .button-text {
    display: none !important;
} 
/* Removes the gaps at the tabs sides */
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
	padding-left: 0px !important;
	padding-top:0px !important;
	padding-right:0px !important;
}
/* Changes to the hideous Appmenu button*/
#appmenu-button {
	padding: 0px 10px 0px !important;
	margin-top:0px !important;
	background-image: -moz-linear-gradient(rgba(255, 150, 0, 0.5), rgba(150, 70, 0, 0.25) 100%) !important;
	}
#appmenu-button:hover:not(:active):not([open]) {
	background-image: -moz-linear-gradient(rgba(255, 150, 0, 0.9), rgba(150, 70, 0, 0.25) 100%) !important;
}
#appmenu-button, #appmenu-button:hover:not(:active):not([open]) {
	-moz-border-left-colors: rgba(255, 255, 255, 0.5) rgba(6, 28, 83, 0.9) !important;
	-moz-border-bottom-colors: rgba(255, 255, 255, 0.5) rgba(6, 28, 83, 0.9) !important;
	-moz-border-right-colors: rgba(255, 255, 255, 0.5) rgba(6, 28, 83, 0.9) !important;
}
        
/* All the UI changes I've made put together lots of snippet use from
JohnBooty's Firefox 4 userchrome.css: Flat "Chrome-like" toolbar button  http://pastebin.com/LndZhE7y
Wmarcello's Firefox 4 Nightly - Change App Menu Button Text  http://userstyles.org/styles/45158/firefox-4-nightly-change-app-menu-button-text
*/