NsYta 's List: Tutorials

Firefox Skinning Guide
 

Post all your tips and tricks for skinning Firefox--should be related vaguely to Aqua Emulation! We're trying to minimize the number of Firefox skinning threads that pop up from time to time, so if we could provide a one-stop shop, that would be awesome.

Please provide the code, and a clear description of the effect achieved.

If we receive enough traffic, I'll sticky the thread.



Anyone willing to go through some of the older threads and simply copy the links and a short understandable description would receive a large amount of appreciation :).



Thanks!

-NC

Re: Firefox Skinning Guide
 

The (very) basics...





To install a theme



1. Download the theme or extension to your desktop

2. Open the Tools menu in Firefox

3. Select Themes from the list

4. Click the Install button

5. Choose your theme that is on your desktop

6. After it is installed, double-click it or highlight and select Use Theme

7. Re-start Firefox to see changes



Note: Extensions almost always install themselves and some do not require a re-start. Some themes are also this way.





Common themes





Safari-like:



Safire - This is it for a good looking, compatible with everything Safari-like theme



Bazon Bloch is also working on a gradient version of Safire that is in the testing phase right now





Alternatives:



Safire Milk - Milk flavor of Safire

Eternal Aqua Safire - Made to go with the Eternal Aqua visual style

Eternal Aqua Safire Graphite - Graphite version of above

Amalgam - An OSX-like theme

Brushed - A brushed theme with very heavy modifications

GrApple - Called Pintripes, Grapes, Apples, but it's really a port of the sought after GrApple

Truth and Lie - To match the themes of the same names





Themes not compatible with Firefox 1.5 can be found here: Application skin releases and other alternatives here and even more themes are on Deviant Art





IMPORTANT! - Themes made for Firefox 1.07 or not specifically for 1.5 will NOT work with a simple version bump. They must be restructured and rebuilt. Ask the original author if this is an issue. Same goes for getting the Fission extension to work properly. The author of the theme must build it to accomodate that extension. There is no easy fix.







Common Extensions



* Compact Menu - consolidates the file, edit, etc menu into one button

- Fission - relocates the progress meter to the address bar

- IE Tab - open Internet Explorer in a Firefox tab when needed

- MR Tech Local Install - many useful features - edit your chrome files - make old extensions compatible via a checkbox (if possible) *To manually update, follow vkeios' guide here

- Stop-or-Reload Button - combine the stop and reload button - like safari

- Tab Mix Plus - add features to tabs and make them easier to handle

- Titlebar Tweaks - modify the Firefox titlebar - for Firefox 1.5

- Autohide Statusbar - For that Safari-like screen

- Stylish - Easily edit the UserChrome files and apply changes on the fly



Latest extensions can be found on The Extensions Mirror





* After installing the compact menu extension, right-click the toolbar and select Customize. Drag the Compact Menu button onto the toolbar. Then move all buttons, the URL bar, and search bar in the navigation toolbar to the top bar where the menus used to be and hide the navigation toolbar.



See this image to understand where to drag to





A bit more advanced...





Userchrome edits





Several nice modifications can be done by editing a text file called the UserChrome.css. It is very easy to edit and complete instructions are below.



You can find the files to edit in the following directory: C:\Documents and Settings\*Your login name*\Application Data\Mozilla\Firefox\Profiles\*some random thing*.default\chrome or you can install Mr Tech's Local Install. After extension is installed, the files to edit will be available under the Tools menu in Edit my Config



You can also install Stylish (easily edit the UserChrome files and apply changes on the fly)





------------------------------------------*Example*--------------------------------------------------------



@import url(''chrome://global/skin/subskin/systemscroll.css''); <---- subskin modifications that come with some themes like Safire - see their homepages for details



@namespace url(.../there.is.only.xul''); /* set default namespace to XUL */



/* Different text color while the progress bar is shown */

#urlbar[fission="fusion"][progress]:not([progress="0"]):not([progress="100"]) { <---- Any other changes go under the @namespace line

color: #FFFFFF !important;

font-weight: bold !important;

}



------------------------------------------*Example*--------------------------------------------------------







To stack the scrollbar arrows on the bottom of the scrollbox (like OSX), place the following in the userchrome.css file under the @namespace line AND the usercontent.css file



/* OSX-style scroll arrows */



scrollbarbutton[sbattr="scrollbar-up-top"]{

display: none !important;

}

scrollbarbutton[sbattr="scrollbar-up-bottom"]{

display: -moz-box !important;

}





To remove the toolbar separators, place the following code in your userchrome.css under the @namespace line (from: http://www.supernova00.biz/userchrome.html)







/* Remove separators between toolbars*/



#toolbar-menubar {

min-height: 12px !important;

padding: 0px !important;

margin: 0px !important;

border: none !important;

}

#nav-bar {

border: none !important;

padding: 0px !important;

}

#PersonalToolbar {

border: none !important;

}

#navigator-toolbox {

border-bottom-width: 0px !important;

}





Don't like the favorite icons in the tabs? Place this under the @namespace line in userchrome.css



/* Remove favi icons*/



.tab-icon {

display: none !important;

}





Remove the Bookmarks Toolbar icons. Place this under the @namespace line in userchrome.css (thanks to savouryspacemonkey)



/* Hide "text" or "icon" in Bookmarks Toolbar */

#personal-bookmarks .toolbarbutton-icon {display : none !important;}







Change Icons





You can change Firefox's default window icon to any icon you want (EVEN A BLANK ONE which is attached to this message) by following these steps:



1. Go to the folder you installed Firefox in (e.g. C:\Program Files\Mozilla Firefox\) and then go to the subfolder chrome.

2. While in chrome, create a new subfolder called icons, then go to that folder and create yet another subfolder called default. The full path to this folder could be C:\Program Files\Mozilla Firefox\chrome\icons\default\.

3. Choose the icon you want to use (on Windows use .ico files, on Linux use .xpm files) and then place it in this folder and rename it to main-window.[ext], e.g. main-window.ico on Windows and main-window.xpm on Linux.





Some other names for default icons you can change:



bmp-file.ico

bmpPropsWindow.ico

bookmark-window.ico

downloadManager.ico

editorWindow.ico

extensionsManager.ico

gif-file.ico

help.ico

image-file.ico

jpeg-file.ico

main-window.ico

mozicon.ico

popupManager.ico

prefDialog.ico

tif-file.ico







Making a theme...



e | v o's brushed theme changes/modifies almost everything and is a very good place to look at how code works. He allows his code to be used for a simple credit without having to send an email and ask his permission. ;)



The best way to make a new theme or modify an existing one is to prepare to invest a lot of time and experiment. Safire is a great theme to base a new theme on and Bazon's very kind giving permission.