Sign in to follow this  
Followers 0

Firebird -> Safari Tutorial

2 posts in this topic

Hey guys, this is what you’ve all been waiting for – my update to MageGuru’s awesome Phoenix to Safari tutorials...

I’ll admit now that there are a couple of stages that I’ve left out of MageGuru’s tutorial because, for me, they just get in the way of using “Safari”.

So, if you want your Safari to look like this

SafariBirdSmall.jpg

Follow these tutorials.

Oh, and I’ll include MageGuru’s unedited steps that I left out at the very end of my tutorial, too.

Step 1: The Skin

As we all know, Lynchknot’s skins for Mozilla are the best there are, so take a moment to choose a skin that you like from Lynchknot’s Firebird Skins

NB: I recommend using the Experimental Saf Icon/Tab skin. You can try to get the older saf skins working, but I’ve not had much luck with these, and I think it looks silly having brushed windows with panther titlebars… It’s up to you, though.

Step 2: The Titlebar Text

1) Dowload this (updated to Safari 1.0) copy of brand.dtd.

2) Ensure all instances of Mozilla Firebird are closed.

3) Open C:\Program Files\MozillaFirebird\chrome\en-US.jar in WinRAR (or whatever) and find \Locale\en-US\Global\brand.dtd

4) Replace this with the file downloaded in step 1.

5) Close WinRAR and open Mozilla Firebird “Mozilla Firebird” should now be replaced with “Safari”, like this.

Step 3: The Icon

For this step, you will need ResHacker (or similar). Reshacker is available at the ResHacker homepage.

1) Download the Safari icon

2) Ensure all instances of Mozilla Firebird are closed.

3) Open C:\Program Files\MozillaFirebird\ MozillaFirebird.exe in ResHacker

4) Navigate to Icon Group\32512\1033

5) Right-click the icon group, and select “Replace Resource…”

6) Click “Open file with new icon…” and find the icon downloaded in step 1. Click the replace button.

7) Save the ResHacked .exe

8) Open Mozilla Firebird, and the icon should now be a Safari one, like this.

Step 4: The About Box

1) Download this updated About.PNG

2) Ensure all instances of Mozilla Firebird are closed.

3) Open C:\Program Files\MozillaFirebird\chrome\browser.jar in WinRAR, and find \content\browser\about.png

4) Replace this with the image downloaded in step 1.

5)Close WinRAR and open Mozilla Firebird

6) Open the “About” box. The Safari logo should now be shown, like this.

Step 5: The Go Button

1) Download this updated Go-Large.PNG

2) Ensure all instances of Mozilla Firebird are closed.

3) Open C:\Documents and Settings\[user name]\Application Data\Phoenix\Profiles\default\[some number].slt\chrome\saf-p.jar in WinRAR and find \browser\go-large.png

4) Replace this with the image downloaded in step 1.

5) Close WinRAR and open Mozilla Firebird

6) The go button should have changed to the downloaded image.

Step 6: The User-Agent String

1) Install the UA Bar.

2) Restart Mozilla Firebird

3) Customise your toolbar, and drag the UA Bar somewhere.

4) Enter Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/103u (KHTML, like Gecko) safari/100 into the UA Bar and hit enter.

N.B.: This UA String is the most current at the time of writing, and is (apparently) the UA string for the Safari build on Panther. For future reference, all Safari UA strings should be of the form Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-us) AppleWebKit/XX (KHTML, like Gecko) Safari/YY, where XX and YY indicate builds of the appropriate software (Apple WebKit and Safari).

5) Remove the UA bar

6) Restart Mozilla Firebird.

OK, that’s as far as my tutorial will take you. If you want to do things like hiding the Menus, I’m just going to copy the exact steps from MageGuru’s tutorial.

Originally posted by MageGuru

[step 7]: A much better use for the Spider button.

What this will do is add back a Spider button, which when pressed will

bring up a drop down menu that has the File, Edit, View... Toolbar items.

1) Click on the following link Compact Menu, and hit the Install button.

2) Right click and save as PNG's the following two images...  spider-small.png  and  spider-large.png

Also download compact.css.

3) Close Phoenix.

4) Open up the File compact.jar in Winrar 3.0. This is located

in C:\Program Files\Phoenix\chrome\.

5) Then go to \skin\classic\compact\, and drop in spider-small.png, spider-large.png

and compact.css . Hit ok on the dialog.

6) Close Winrar.

7) Open Phoenix, and right click the center toolbar and go to Customize,

now add the Spider button where you want.

All done, a better use for that Spider button.

Now you may ask why would you want a drop down menu for functions

that are on the toolbar already? Well, read on to [step 8].

[step 8]: How turn off the File, Edit, View... Toolbar.

I don't take credit for this one, but I forget who came up with it...

1) Download the following file userchrome.css.

2) Now in Explorer go to C:\Documents and Settings\

user profile\Application Data\Phoenix\Profiles\default\?????????.slt\chrome\.

(Assuming you're running XP.)

3) Copy 'n' Paste userChrome.css into the above directory.

4) Open Phoenix, The File, Edit, View... Toolbar will now be blank.

5) Now right click your button bar and go to Customize, Move all the buttons,

the Address bar, and the Search bar on the button bar to the now top blank bar.

6) Move the Bookmarks Toolbar Items to the area that was previously occupied

by your buttons. I would also recommend adding a Flexible Space to the end

of the Bookmarks Toolbar Items, This will allow you to a right click on the bar and

go to Customize for later modifications.

7) Close the Customize window.

8) Go to the Spider Icon (I really hope you did Tutorial 8 first). Then to View,

Toolbars and uncheck Bookmark Toolbar.

Now you should have two toolbars. One with your buttons, Address bar, and

Search Bar, and the other with your bookmarks.

Ok, that's it.

You should be done now.

P.S. @Anarchi5t: If you want to add to this, let me know and I'll post your stuff up here too.

Oh, and I'm going to keep this closed so that people don't fill it with a quagmire of posts.

If anyone wants to post comments, please use this thread

0

Share this post


Link to post
Share on other sites

Heres a few more tips for Stevie BM's Updated tutorial for turning Mozilla Firebird into Safari.

All these tips are based on getting your browser to look identical to the default layout shown on the offical page http://www.apple.com/safari/

Step 1: Fixing the fields

You may notice that the address bar and search bar are both rounded, However on Safari only the search bar is rounded the address bar is squared to do this you will need the following images.

leftcap.png

rightcap.png

Use the instructions in Step 3 to add the snapback arrow.

Now you need to open the skin (e.g. SAF-P.jar), For WinXP users this should be located in

C:\Documents and Settings\user profile\Application Data\Phoenix\Profiles\default\?????????.slt\chrome\

In WinRAR go to \Browser\ and drag both images into that directory.

The fields should now be correct

Step 2: Adding the "Movement Dot"

You may notice in Apple software such as iTunes Apple uses a dot to signify where windows can be resized. In Safari one of these dots appear after the address bar. To do this I picked one of the less useful buttons (Cut) I figured not many people would use cut while browsing as on most sites you will only have permission to copy not cut. If cut is needed simply copy the images to the same directory under the name of your personal "less useful" button.

You will need to download the following image cut.png an again open the skin (e.g. SAF-P.jar), For WinXP users this should be located in "C:\Documents and Settings\user profile\Application Data\Phoenix\Profiles\default\?????????.slt\chrome\" and in WinRAR go to \Browser\ and drag the image into that directory.

Now restart Firebird and enter the customize menu, Now drag the cut button which should now resemble the dot to after the address bar.

Step 3: Adding the snapback and the word "google" to the search bar

Right I will now quote MageGuru's original tutorial but with a slight modification for the new version.

1)Download the following two images snapback.png and search-bar.png you will also need to download autocomplete.css

Originally posted by MageGuru

2) Open lynchknot's Safari theme file in Winrar 3.0. Located in C:\Documents and Settings\

user profile\Application Data\Phoenix\Profiles\default\?????????.slt\chrome\.

(Assuming you're running XP.)

3) In Winrar go to \global\arrow\, and drop in snapback.png. Hit ok on the dialog.

4) Now while still in Winrar go back to \global\, and drop in autocomplete.css. Hit ok on the dialog.

5) Then go to \browser\, and drop in search-bar.png. Hit ok on the dialog.

6) Close Winrar.

Now when you open Firebird the snapback and google bar should now fit as the original png was designed for different shaped bars.

Step 4: Layout

Heres just a quick instruction to set the layout more like Safari (As seen on the homepage)

Preview

For the colours I am using Xero's Brushed Panther WindowBlinds4 theme it gives the brushed metal look and also adds the 3 button operation and the roll-up button on the right.

Another little tip is when entering the title of your toolbar bookmarks to add 3-4 spaces before the title this just spread them out abit as they are bunched close in Firebird where as Safari spreads them out a little bit.

Right that should be everything you should now have a browser that really does look like Safari.

Hope this helps! Dont forget this is a locked topic and if you need help use this topic

Thread

Post edited.

Added quote block to Steps 3.2 - 3.6 at Anarchi5t's request.

-----------------

Stevie BM

0

Share this post


Link to post
Share on other sites
This topic is now closed to further replies.
Sign in to follow this  
Followers 0