Aqua-Soft Forums

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

#367507

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.supernova00.biz/userchrome.html)

c0c54e0ae8d5ec2044ffa1f1e9343abd9bad.jpeg

/* 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.

main-window.zip

Attachment: main-window.zip

#367525

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

#367755

Remove line above Bookmarks Toolbar, below Navbar:

http://www.aqua-soft.org/board/showthread.php?t=32896

http://www.aqua-soft.org/board/showthread.php?t=33228

Titlebar, CompactMenu icon:

http://www.aqua-soft.org/board/showthread.php?t=33154

http://www.aqua-soft.org/board/showthread.php?t=33212

Use a background image for the toolbars, image for the separators:

http://www.aqua-soft.org/board/showthread.php?t=32891

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

-NC

#367836

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

#367837

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;

}

#367847

More tips and tricks can be found directly from Mozilla:

http://www.mozilla.org/support/firefox/tips

#367936

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.imageshack.us/img61/372/ffox9bq.jpg

#367964

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; }

#367969

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

#367974

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.imageshack.us/img61/372/ffox9bq.jpg

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

#368029

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

#368052

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.

#368115

Change the Firefox Window/taskbar Icon (a popular one):

http://www.mozilla.org/support/firefox/tips#app_icon

Find Transparent icons here

Change unused Tab bar color:

http://www.aqua-soft.org/board/showthread.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 :P.

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).

#368116

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

#368127

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.

#368648

Change the tab background color

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

-NC

#368657

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

ff018ao.jpg

ff211cd.jpg

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

#368682

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

#368736

Thank you very much :) All is ok now

#368922

Changing the active tab's border in Firefox

http://www.aqua-soft.org/board/showthread.php?t=33352

Moving the tab bar to a different location

http://www.aqua-soft.org/board/showthread.php?t=33381

Changing the rollover state of toolbar buttons

http://www.aqua-soft.org/board/showthread.php?t=33205

-NC

P.S: Wow, zeroeffect seems to be posting many of the answers!

#369397

Is there a way to get that google in the searchbar? Ive tried everything said in this thread: http://aqua-soft.org/board/showthread.php?...gle+search+icon

Ive edited everything I could in the searchdialog.css, but nothing happened. And I don't want to touch things that shouldn't be touched, so if someone could point me in the right direction, it would be great. :)

#370425

It can be done with editing the search background, but it's just a trick used to make it look nice. It's not really practical. Sorry. :(

#370477

ive tried searching however cant find how to remove the icons associated with the bookmarks in the bookmark toolbar- im using a theme which shows it unlike those aqua based themes, any suggestions?

#370480

* Post edited to remove erroneous code *

#370483