Safari Makeover

by Scott Chitwood • Thursday January 4th, 2007
Posted in More Than Words, Tips and Tricks

Get Unified and grow those Toolbar icons!

Ready to have a little fun and get away from Safari’s brushed metal interface at the same time? A few quick hacks to the Browser.nib file with Interface Builder is all it takes to replace Safari’s heavy metal with a nice dose of Aqua Unified.

Want to go a step further? Make a few alterations to the icon containers located in the ToolbarItems.nib — a nifty hack which will enable larger icons of 32×32 pixels. That’s a nice jump up from the default size of 28×25 pixels.

Here’s a quick look of the mod. Screenshots always help one visualize the possibilities :^)

Before and After

Back it up before you hack it up.

Using the Go to folder… command in the Finder’s Go menu, navigate to the directory noted below by pasting the directory path into the pop up dialog and pushing the button labeled Go.

/Applications/Safari/Contents/

Right-Click or Control-Click on the Resources folder located within the Contents folder and use the Create archive of “Resources” command to create a handy back up the original files.

Archive Resources

Metallurgy 101: Brushed Metal to Apple Unified.

Now open the language project folder (.lproj) for your install. In our mod we’ll open the Browser.nib located in the English.lproj directory. Once the .nib is open in Interface Builder, open the Inspector palette from the Tools menu and set it to the Attributes pane.

Deselect the Has texture option and enable the Unified title/toolbar look option.

Inspector Panel Attributes

Close and save the Browser.nib. It’s that easy. As long as you’re at it, repeat the procedure for the Downloads.nib.

Let’s get big: Toolbar icons.

Not too shabby kids, we’re off to a good start. But one question begs to be answered. Do the default toolbar icons work with Apple Unified? Or do they fight and clash with it? That all depends on who you ask, and you’re sure to find strong opinions on all sides of that issue , all of which are valid :^)

Safari Unified

For my part, I’m a fan of the gorgeous set of simple toolbar icons in Camino (1.0b2), so those are what we’ll use for our Safari makeover.

Safari Makeover G

Copying Camino’s toolbar icons to a working folder I set about renaming them and creating Disabled and Pressed states for each image to import into Safari. The process went quick enough, but I failed to take one thing into account; Safari has unique sizes for its default toolbar icons and it was quite apparent when I fired it up and saw the results of my tampering — the images were cropped top and bottom, and, in some cases the horizontal spacing was way off.

Bad Icons

So, what now? Resize the toolbar icons to match Safari’s defaults? That could have worked, but being a stickler for detail, loss of image quality wasn’t something I was willing to sacrifice. Time to fire up Interface Builder and examine what kind of options the ToolbarItems.nib might be willing to offer us.

/Applications/Safari/Contents/Resources/English.lproj/ToolbarItems.nib

Once the ToolbarItems.nib is open, go to the Layout menu and enable Show Layout Rectangles so you can see the icon and icon container locations.

ToolbarItems.nib

We’ll be working with the toolbar icons in both the top and bottoms rows, all will be modified to allow for icons up to 32×32 pixels by entering the dimensions in the Size pane of the Inspector palette. Make sure to include icons to the right of the URL/Google search field.

Icons that are set up as pairs are special importance — those sets are held within containers that must also be modified prior to resizing the icons — take the containers up to 64×32 pixels. It may be neccessary to maually adjust the location of the icons within the containers once the dimensions have been changed.

ToolbarItems.nib

ToolbarItems.nib Modded

Once your mods to the ToolbarItems.nib are complete and your new toolbar icon images have been copied into Safari’s Resources folder, close it all out and fire up Safari to see the results!

Safari Makeover

Now that we have a consistent, across-the-board dimension of 32×32 pixels coded into our toolbar icons we’ve opened the window of opportunity to use a vast array of Mac OS Classic icons and Mozilla specific toolbar icons from existing browser themes in our newly revamped copy of Safari. Here’s a couple of variants just for fun :^)

Safari Makeover

This set, “Toolbar”, features icons created by Improv, Pastence.

Safari Makeover

Here’s a cheery little set of icons from Elvardo’s creation, “Kids”.

Download.

For those of you who’d like to skip all that, feel free to download my modified .nib files and Camino icons. Enjoy!

Disclaimer.

This software modification was created and tested on Safari 2.0.4 under Mac OS X 10.4.8 using Interface Builder 2.5.4.

This software modification is distributed as is, the user agrees to and assumes all risks associated with modifying original software resources.



9 Comments

  1. Indraunt
         February 7, 2007

    Thats pretty cool…
    What I’m curious about is whether you can make the ends of the address bar curved like the searchbar, and also, whether it’s possible to change the colour of the bookmarks bar… or at least get rid of the stripes on it.

    Cheers!

  2. Rampant1
         February 7, 2007

    Interesting thoughts there — I’ll do a little digging and see what I can find :^)

  3. Rampant1
         February 9, 2007

    Looks like I’m striking out on both items.

    While you can change the URL field to round corners and have it preview the nib in Interface Builder they somehow don’t stick when Safari is launched. Perhaps something deeper in there that I’m not seeing.

    The tabs aren’t happening either — they’ll remain striped (when using default Aqua or Unified windows) as long as Apple continues to have them embedded in the UI.

  4. Rampant1
         February 14, 2007

    Getting back to the tabs idea. I completely forgot about an old hack to a couple of TIFF files in the Resources folder…

    TabBevel_Caps.tif and TabBevel_Middle.tif.

    The two image files create the bevelled edge of the tabs, therefore they are mostly transparent in nature. It’s easy enough to open them in Photoshop to make alterations. Add a little color to them and you create an image that overlays the tabs. The drawback to this hack is it does nothing for the bookmarks bar — you’ll still have Aqua stripes in that part of the UI.

    Real Tabs

  5. Makkisan
         March 3, 2007

    Very nice . Thanks for sharing

  6. Rob
         March 24, 2007

    Brilliant, thanks for the .nib files and Camino icons, I did modify the icons (bookmark, back, forward, refresh and stop) with Firefox versions which you can get from http://kmgerich.com/category/icons/ (psd file with gridlines)

    If you want a screenshot let me know

    Cheers

  7. Rob
         March 24, 2007

    Fox on Safari

  8. Rampant1
         March 24, 2007

    Nice! Thanks for sharing Rob :^)

  9. Rampant1
         March 27, 2007

    Here’s a look at the nib with Uno 1.5 applied to Safari. Pretty darn sweet! Say good-bye Aqua pinstripes.

    with Uno 1.5

Sorry, comments for this entry are closed at this time.


1 Trackbacks/Pingbacks

  1. Pingback: The Offical OS X Customizations Screenshot Thread - Page 274 - MacNN Forums on February 28, 2007

Size

Colors