Safari Makeover > Use Bigger Toolbar Icons
by Scott Chitwood, 10th January 2006


Last week we explored methods in which to alter Safari's Browser.nib to give it an Aqua Unified appearance, plus a few other cosmetic tweaks.

At the time I was nearly satisfied with the makeover, the only thing I found a little lacking was my choice of toolbar icons. As such, there was a nagging in my head to take the mod a little further. Then, upon seeing the latest release of Camino (1.0b2) and its gorgeous set of simple toolbar icons, I knew exactly what it was I wanted.



Copying Camino's toolbar icons to a working folder I set about renaming them and creating "push" 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.



So, what to do? 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



We'll be working with the toolbar icons in the top row, all will be modified to allow for icons up to 32x32 pixels by entering the dimensions in the Size pane of the Inspector tool. Take note of the two pair of icons that have been highlighted — those sets are held within containers that must also be modifed, take them up to 64x32 pixels. It may be neccessary to maually adjust the location of the icons within the containers once the dimensions have been changed.




L-R: original container, modified container, modified container with modified icons, container dimensions.

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!



Now that we have a consistent, across-the-board dimension of 32x32 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. And if 32x32 isn't big enough to suit your browser, go ahead and tweak up a few notches — just remember to leave enough space for your url address field. :^)

And one more thing. Just so we don't get accused of favourtism with the Tiger kids, those of you running Panther (and possibly Jaguar) can play along with this mod. For your purposes, the ToolbarItems are coded into the Browser.nib, so you'll need to make all your changes there. It does take a little more effort; you'll need to modify the size and position of the entire ToolbarItems container and then move everything below that down the window to avoid overlapping elements, but it is time well spent in pursuit of knowledge.



Or, for those of you who'd like to just download and install my modified images and .nib files, you may do so in both Tiger and Panther flavoured editions.