Safarifox theme SaFire

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

On DeviantArt are two new Safarifox Themes:

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

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

#300683

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! :-)

#300744

your theme is great....

i have modded it to seem be albook....

but i have two question for you

where is it the code of line separator in tab and where i modify to move up the text in tab?

thank you....

#301392

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

#301478

WTF is albook?

It's a theme...

#301490

wow this is amazing.....i wish everyone would use this from now on to build their themes.....

thanks for the work you put into this.....

#301503

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

#301558

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:

thanks!

#301568

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

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

Help me please, thank you in advance.

#301593

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

#301603

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 !!!!! 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

#301626

@totosha:

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!

#301634

well, thank you all

After multiple tests the best choice for me is:

}

#search-container, #searchbar {

min-width: 200px !important;

max-width: 200px !important;

}

I love this theme

Have fun everybody

#301649

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

Any ideas on this could be?

#302078

how strange, it works fine in an odl lap im using right now... perhaps u got some adds or spam? they ussually slow dwon ur connection

#302094

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.

scrollbars_green.zip

Attachment: scrollbars_green.zip

#302157

I don't know why, but this theme is now working super fast... I guess its something on my end.

#302814

Hi Folks,

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

Thx...

#304767

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

Thx...

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



.message-icon,

.alert-icon,

.error-icon,

.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

#304919

Thank you!!

#305064

Big update on both themes:

Changes:

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

SaFire milk.

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

#309620

Wow cool man I've been waiting for rss icon in adress bar for a long time!

#309622

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

#309636

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

#309671

A suggestion for you is to put how to install these themes because for some people it might be difficult for them to figure out. Great themes though!

#309684