Jump to content

Safarifox theme SaFire

Recommended Posts

Because there is no thread about this yet, I think I should start one:

On DeviantArt are two new Safarifox Themes:

SaFireSaFire_for_Fx_1_0x__amp__Deer_Park_by_BazonBloch.jpg and SaFire MilkSaFire_Milk_for_Fx_1_0x__1_0__by_BazonBloch.jpg

They work without needing any extra extension or replacing Firefox files!

You can install them on Firefox 1.0 (including 1.05) and Deer Park (Alpha 1 & 2).

SaFire is really faster than the previous Safarifox Themes :D

It also includes support for extensions which are usefull for Safari Themes as Zoomy (the small A, big A buttons get their right function with that), Fusion (Progressbar in URLbar), Compact Menu (the Apple symbol without any mod) and some other.

The findbar is fixed, you can open as many tabs as you want without the intermediate lines in the other Safarifox themes and some other bugs are eliminated.

The only problem i saw yet is: With mod-TBE, the Tab Closebutton is not displayed right.

But I don't care, the theme works perfectly with TabMix which is anyway much better than TBE ;)

Link to post
  • Replies 135
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

THIS is the Safari theme I've been waiting for! Fantastic work - I can't see any of the usual quirks that I've seen with Safari themes. The Apple logo for compact menus is a very nice touch as well.

You've put a smile on my face that's going to last the rest of the day! :-)

Link to post
i have modded it to seem be albook....
WTF is albook?
where is it the code of line separator in tab and where i modify to move up the text in tab?

Line Seperator in Tab:

tab {

your border commands !important;


for passive tabs or

tab[selected=true] {

your border commands !important;


for the active tab

e.g. if you don't want a seperator in the passive tabs:

tab {

border-right: 0px !important;


should work (i haven't really tested...)

text in tab:

.tab-text {

your margin commands !important;


for passive tabs and

*|tab[selected=true]. tab-text {

your margin commands !important;


for the active tab.

(Also not tested...)

and pst... this is no magic, but the DOM-Inspector is your friend!

Moe Zilla

Link to post
which css i must modify? i would like to have line separator greater then 22px

O.K., let's look a little more precise:

The css files responsible for the tabs are globaltabbox.css and for the icons globalbrowser.css.

You could mod them and then repack the theme, or just put the modification in your userChromes.css.

Note: In tabbox.css some graphics in globaltoolbar are used, such as tabboxactive-middle.png. You might also have to modify them if you want higher tabs.

But most important you have to change the max-height in the tab declaration.

@DrEaMs In DiGiTaL:


Link to post

It's a beautifull and a fast theme. Without any doubt it s great. Thank you.

One problem and it's strange - i can't resize my searchbar. Maybe it sounds stupid but the flexible space is not really flexible. Here's a screen problemtoresize0pw.th.jpg

My extensions: Zoomy 1.3, Compact Menu 1.7.2, Tab Mix

Help me please, thank you in advance.

Link to post
I wrote a mini-tutorial on how to make it look like Safari on OSX-E. http://www.osx-e.com/forum/index.php?showtopic=419

Tnhx i know these things. But i still can not resize my search bar.

It is strange because in userChrome.css i put:


#search-container, #searchbar {

-moz-box-flex: 20000 !important;


20000 !!!!! :o and it is still bigger than it must be.

On deviantart BazonBloch reccomend 2 ways:

1. relative Size to URL Bar: add this to your userChrome.css:

#search-container, #searchbar {

-moz-box-flex: 200 !important;


A value of -moz-box-flex: 1000 will make the SearchBar as big as the URL-Bar. The greater the value the bigger the SearchBar.

2. absolut size of the SearchBar: add this to your userChrome.css:

#search-container, #searchbar {

min-width: 400px !important;

max-width: 400px !important;


And an another question: Why there is a flexible space in Customize, if it is not flexible ? :slant:

P.S. I use SmoothStripes 4.1 SmoothMetal from hills-roppongi

Link to post


maybe that:

BazonBloch on the SaFire theme description"]A value of -moz-box-flex: 1000 will make the SearchBar as big as the URL-Bar. The greater the value the bigger the SearchBar.Note: Some Visual Styles have a bug which causes low values of -moz-box-flex to make big SearchBars. In this case use high values of -moz-box-flex to make the SearchBar small

That means normaly a low value should work (For me it does...), have you tried both? Big and small value?

You could try switching to another visual style, when you know whether this is the problem.

Good luck!

Link to post

Yesterday, there was an update on both themes:

Nothing big happend, just two new extensions are supported:

Stop/Reload (Stop or Reload was supported before) and Resize Searchbar.

With resize Searchbar no more userChrome.css coding is neccesary to do this, it's similar to the function in the Safari -fx Theme. But unfortunately, the resizer is a toolbar seperator, which looks slightly displaced there....

I made some modding to the SaFire milk theme:

Now it's SaFire turquoise :) :


If you like this or want to do something similar: It's easy:

As base I used SaFire Milk: With SaFire, this wasn't possible because of a 1Pixel Line between tab and toolbar, the themes are different in that point.

I added to the userChrome.css:

/*::::new color for main elements::::*/

page, window, dialog, menubar, menubarmenu, toolbar, toolbox, wizard, prefwindow, statusbar, tab[selected="true"], #PersonalToolbar {

background-image: none !important;

background-color: #00CCD0 !important;


/*:::::::new color for tab background and passive tabs:::::*/

.tabbrowser-tabs {

background-image: none !important;

background-color: #FFFF33 !important;


/*:::::::::remove an anoying border:::::::*/

toolbar[type="menubar"], menubar {

border-bottom: 0px !important;


/*::::::::compensation for lost of the border by moving tabs 1px up::::::*/

tab {

margin-top: 0px !important;


tab[selected="true"] {

margin-top: -1px !important;


For the Scrollbars i used the the SaFire Scrollbars with a green touch, see attachement if you like it.

I dropped them into the Theme (.jar = .zip) in the folder globalScrollbar.

If you like it (or an other color): Just do it! :)

I'm sorry but this is extremely slow for me (rendering pages).

Any ideas on this could be?

That's strange, because a theme has nothing to do with the rendering skills of a browser. Maybe it's a conflict with an extension (have you tried a new profile?) or you have replaced some Firefox files for previous Safarifox themes (e.g. browser.jar) and that makes troubles or some other thing... ...to be very shure it's the theme you should really make a new profile and reinstall Firefox.


Link to post
Hi Folks,

unfortunately, my modding-knowledge is quite limited. Does anybody of you want to match the Safire Theme to the InspiratSE Theme?


As long as you only want it to mod in the way it looks like sky's version of inspirrant SE, it's easy, as both themes have a safarifox origin. You basically only have to exchange graphics and a little bit of code:

So let's do it step by step:

1. Open InspiratSE_safari.jar (see thread linked above) and SaFire0_22milk.jar (see link in first post of this thread) with a program able to open such zip archives, e.g. winrar.

2. Copy all graphics from InspirantSE_safari.jar to SaFire0_22milk.jar of the following folders:

browser, globalmenu, globaltoolbar and perhaps some others....

3. There is only one graphic which you couldn't copy, because it is in SaFire milk 1px higher: The graphic of the active tab:tabboxactive-middle.png I already did this, right click my link and save as tabboxactive-middle22.png and copy it to SaFire to globaltoolbar.

You may want to modify this graphic, as it doens't really match the visual style. but that is always hard, as the visual style has a gradient which isn't possible on Firefox Tabs. I kept the SaFire Milk Tab, it fits better.

4. Now to the coding modifications:

(a) copy scrollbars.css in the global folder from inspirant_SE_safari to SaFire milk. (Tht'll give you the scrollbars from the visual style you use)

(b)Modify globalglobal.css. There are quite some things to do, I did it here, it's a mix of the Inspirant_SE global.css file and the one from Firefox default:

So replace it's complete code with this:

/* ===== global.css =====================================================

== Styles that apply everywhere.

======================================================================= */

/* all localizable skin settings shall live here */

@import url("chrome://global/locale/intl.css");

@import url("chrome://global/skin/formatting.css");

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

/* ::::: XBL bindings ::::: */

radio {

-moz binding: url("chrome://global/skin/globalBindings.xml#radio");


menulist > menupopup,

.menulist-menupopup {

-moz binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");


.menulist-compact {

-moz binding: url("chrome://global/content/bindings/menulist.xml#menulist-compact");


/* ::::: root elements ::::: */

window, page, dialog, wizard, prefwindow {

background-image: url('chrome://global/skin/toolbar/bkg.png') !important;

background-color: -moz-Dialog;

color: -moz-DialogText;

font: message-box;


/* deprecated */

window.dialog {

padding: 8px 10px 10px 8px;


[wait-cursor] {

cursor: wait !important;


/* ::::: alert icons :::::*/




.question-icon {

width: 32px;

height: 32px;


.message-icon {

list-style-image: url('chrome://global/skin/icons/alert-message.png');


.alert-icon {

list-style-image: url('chrome://global/skin/icons/alert-exclam.png');


.error-icon {

list-style-image: url('chrome://global/skin/icons/alert-error.png');


.question-icon {

list-style-image: url('chrome://global/skin/icons/alert-question.png');


/* ::::: iframe ::::: */

iframe {

border: none;

width: 100px;

height: 100px;

min-width: 10px;

min-height: 10px;


/* ::::: statusbar ::::: */

statusbar {

-moz-appearance: statusbar;

border-top: 1px solid ThreeDLightShadow;

border-left: 1px solid ThreeDShadow;

border-right: 1px solid ThreeDHighlight;

border-bottom: 1px solid ThreeDHighlight;

background-color: -moz-Dialog;

min-height: 22px;


statusbarpanel {

-moz-appearance: statusbarpanel;

-moz-box-align: center;

-moz-box-pack: center;

border-left: 1px solid ThreeDHighlight;

border-top: 1px solid ThreeDHighlight;

border-right: 1px solid ThreeDShadow;

border-bottom: 1px solid ThreeDShadow;

padding: 0 4px;


.statusbar-resizerpanel {

-moz-box-align: end;

-moz-box-pack: end;

-moz-appearance: resizerpanel;

padding: 0px;

border: none;


.statusbarpanel-iconic, .statusbarpanel-iconic-text, .statusbarpanel-menu-iconic {

padding: 0px 1px 0px 1px;


resizer[dir="bottomright"] {

-moz-appearance: resizer;

cursor: se-resize;


/* inspirant SE VS has also a problem with the flexible searchbox.... */

#search-container, #searchbar {

-moz-box-flex: 160 !important;

min-width: 70px !important;

max-width: 200px !important;


/* XXXBlake yeah, shoot me -- these don't belong here. I'll move them later. */

sidebarheader {

height: 22px;

background-color: transparent !important;

border-top: 3px solid;

-moz-border-top-colors: #BBBBBB #8C8C8C #DFDFDF;


sidebarheader > label {

padding-top: 2px;

color: -moz-DialogText;


/* ::::: miscellaneous ::::: */

.toolbar-focustarget {

-moz-user-focus: ignore !important;


5. Install the resulting file.

my result:


There may be some things to fix, but it's a good start I think :)

Moe Zilla

Link to post
  • 3 weeks later...

Big update on both themes:


  • both themes are up to latest nightlies, which includes a RSS Symbol in the URL Bar like in Safari :)
  • SaFire (but not milk) includes many new icons now, for all primary buttons different icons and some extension buttons, too.
  • maximum size of searchbox included --> no more problems with some visual styles
  • both themes got some subskins now:

With these Subskins you can choose e.g. a rounded URL-Bar, a bigger go Button, Favicons in the Bookmarks Toolbar, no Favicons on Tabs, Scrollbars of the visual style, sunken Aqua buttons and some other.

For details see the deviantART pages:


SaFire milk.

And another new thing: There is a nice SaFire mod out now: iFox by rizvan.

Link to post

Nice one! I really need to update my FF browser (still browsing with 1.0.4)

Love this theme (use Hills Safari FX at the moment), and there i just one thing which i think should be modified.

It's the searchbar. I like the magnifier more than a plain google logo, like in this screenshot

other than than it's an awesome skin. really like the new RSS button

Link to post

i would love to use either of these themes [safire or safire milk] but does anyone know why this [see attached] happens? im sure its just some setting i have to adjust but i have to admit im not the greatest at doing this stuff sorry! im using the safire milk theme in this shot but the same exact thing happens with safire. the tabs seem to be a bit smushed & the ends of the search bar are off center [?] i guess and the dot in between the address & search bar is all crazy too. its firefox 1.0.6


Link to post

Please sign in to comment

You will be able to leave a comment after signing in

Sign In Now

  • Create New...