[nightcrawler1089]

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

[zerroeffect]

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 DataMozillaFirefoxProfiles*some random thing*.defaultchrome 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.supernova...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 FilesMozilla 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 FilesMozilla Firefoxchromeiconsdefault.
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.

Attached File(s)

•  main-window.zip (174bytes)
  Number of downloads: 760

[Zaft]

Wow! Awesome tutorial Zeroeffect, gold star to you sir!

[nightcrawler1089]

Remove line above Bookmarks Toolbar, below Navbar:
http://www.aqua-soft...ead.php?t=32896
http://www.aqua-soft...ead.php?t=33228

Titlebar, CompactMenu icon:
http://www.aqua-soft...ead.php?t=33154
http://www.aqua-soft...ead.php?t=33212

Use a background image for the toolbars, image for the separators:
http://www.aqua-soft...ead.php?t=32891

This covers most threads in Application Skins from March 1 to March 10, 2006.

-NC

[iLearn]

Zerroeffect: Thank you so much for taking the time to type all of these steps.. Great tutorial for beginner and for advanced users. Amazing!

[savouryspacemonkey]

I just raised this in another thread, but though it might be of more value here. Does anyone have the relevant code to shadow bookmark and tabtext in white or black a la safari?

In the meantime, here is some other handy userChrome stuff:

Set height of toolbars, min can be changed to max if you want them thinner...

/* Height of toolbars*/
#toolbar-menubar {
min-height: 35px !important;
margin-top: 4px; !important;
}
#nav-bar {
min-height: 35px !important;
margin-top: 4px; !important;
}

[zerroeffect]

More tips and tricks can be found directly from Mozilla:

http://www.mozilla.o...rt/firefox/tips

[blaze]

how can I move these buttons up one so that it takes the place of the previous "file, edit, view, etc" was before, when I didn't use compact menu.

http://img61.imagesh...372/ffox9bq.jpg

[aquaman99]

Here's a couple others:

/* Remove Stop button when there's nothing to Stop */
#stop-button[disabled="true"] { display: none; }

/* Remove Back button when there's nothing to go Back to */
#back-button[disabled="true"] { display: none; }

/* Remove Forward button when there's nothing to go Forward to */
#forward-button[disabled="true"] { display: none; }

/* Multi-row bookmarks toolbar */
#bookmarks-ptf {display:block}
#bookmarks-ptf toolbarseparator { display:inline }

/* Make the active tab not bold */
tab[selected="true"] { font-weight: normal !important; }

[jerkulot]

great guide- ive been tinkering with firefox and this has helped me a lot- again tnx

[zerroeffect]

blaze said:

how can I move these buttons up one so that it takes the place of the previous "file, edit, view, etc" was before, when I didn't use compact menu.

http://img61.imagesh...372/ffox9bq.jpg

Right-click the toolbar, select customize and drag everything up to that bar. It's in the guide, marked with an *

[blaze]

Oops. Sorry. I am blind . I can't move my tabs up tho..

[Desides]

blaze said:

I can't move my tabs up tho..

You're not supposed to. After you move everything up, close the Navigation Toolbar by unchecking it. Voila.

[nightcrawler1089]

Change the Firefox Window/taskbar Icon (a popular one):
http://www.mozilla.o...x/tips#app_icon
Find Transparent icons here

Change unused Tab bar color:
http://www.aqua-soft...ead.php?t=33278

Glad to see we're getting a lot of response! If you feel like you're going to ask a question without a simple answer/one that can be applied to others', please take it to a new thread. If you do receive a useful answer or another tip that others might be able to use, just post a link in this thread back to that one.

blaze, that means you .
I'll be keeping an eye on this thread, keeping it clean. Should I leave "thanks" posts?

//Some posts removed
-NC

P.S: I realize that I posted some duplicate content that zeroeffect already posted--my bad! For example, he's already provided the titlebar icon fix (from this post) and the bookmark line fix (from my first post).

[DjSouR Refugee]

just wondering how do i make my tabs move to the top instead of them being on the bottom as they are by default

[Zacharia.cd]

DjSouR Refugee said:

just wondering how do i make my tabs move to the top instead of them being on the bottom as they are by default

I don't understand what you mean by tabs being on the bottom, are you talking about the tab bar? Or do you want your tabs to be a part of the bookmarks bar like Safari?


Very advanced

For even more than what titlebar tweaks can do you can actually modify Firefox files to make it so that
1. Basically every mention in Firefox of Mozilla Firefox becomes Safari.
2. The about box is modified to say Safari

Just do this:

download this zip
unzip into Firefox's main chrome folder in Program files. This will replace two Firefox files, these files are for Firefox 1.5.1 don't try this with any other version.

[nightcrawler1089]

Change the tab background color

http://www.aqua-soft.org/board/showpost.ph...24&postcount=27

-NC

[@ceroy]

Hi, i need a little help .. I have a question or 2 about FF skin
First, thank you for this Skinning Guide.. Just hope so, i am in the good one for this.
Ok, my first question is about ''toolbar separator'' i read here how i remove.. But me i want to change the toolbar separator for an other..
So, i would have to know where i found this image and how change this.. What the reel name of this files or this image



And last question.. Where i found the toolbar icons in Safire skin? (what files in .jar)
Advance thanks.. If its not the place, correct me please

[zerroeffect]

The toolbar is not an image. It is in the folder global when you open the JAR File of the theme. Look for toolbat.css, edit it with a text editor and look for the following code (or something close to it)

/* ::::: toolbar & menubar ::::: */

toolbar,
menubar {
min-width: 1px;
min-height: 20px;
border-top: 0px solid ThreeDHighlight;
border-bottom: 2px solid;
-moz-border-bottom-colors: #DFDFDF #737373; <----- The first value is the top of the line, and the second is the bottom (I think)
}

The colors you want are: #8D8E90 #DDDEE0

Toolbar icons? You mean under browser in the JAR file of the theme? The file is called buttons.png and the extensions are under the extensions folder and called... extensions.png

[@ceroy]

Thank you very much All is ok now