Pick of the Week - Nov 10 [Show all picks]
Path Finder 5 - A feature-laden Finder replacement
Submit Hint Search The Forums LinksStatsPollsFAQHeadlinesRSS
12,000 hints and counting!

Make Safari 4's active tab more visible Web Browsers
One of the issues people are having with tabs on top in Safari 4 is that it's hard to distinguish which tab is currently frontmost. I found this an issue even with the previous location of the tab bar in Safari 3. The problem, for me at least, is that the Unified interface theme doesn't provide sufficient distinction between the tab which is frontmost and those which are in the background. I don't have this problem with the interface in other areas, like the Finder, and I suspect it's because windows don't get grouped as closely as tabs do.

My solution is simple and only takes me a few minutes:
  1. Quit Safari then navigate to it in the Finder.
  2. Control-click on Safari and select Show Package Contents from the pop-up menu. Navigate into Contents » Resources.
  3. Make a copy of the following four files somewhere outside of the Safari package to serve as a backup: AW_ActiveTabCenterFill.png, AW_ActiveTabLeftCap.png, AW_ActiveTabLeftCapFirstTab.png, AW_ActiveTabRightCap.png.
  4. Open the original files (within the Safari package) in your image editor of choice.
  5. I added a two-pixel wide red border to each image as indicated here:
    • AW_ActiveTabCenterFill.png: Add a border only at the top.
    • AW_ActiveTabLeftCap.png: Add a border on the left side of the image. (I didn't add the border to the curved portion at the bottom left.)
    • AW_ActiveTabLeftCapFirstTab.png: Add a border only to the left side of the image.
    • AW_ActiveTabRightCap.png: Add a border only to the right side of the image. (I didn't add the border to the curved portion at the bottom right.)
    I used a red color because I find it's easy to locate when I look at the tab bar, but it's not visually distracting the rest of the time. Others may, of course, prefer a different color.
For users of Safari prior to version 4, the same effect can be achieved by modifying these files in a similar way, though I find a one-pixel wide border is sufficient: TabBevel_Caps.tif (left, right and bottom edges) and TabBevel_Middle.tif (bottom edge only).

[robg adds: I tried this, and it worked very nicely, though I had to use PNG-24 to insure a transparent background. As an experiment, I took the editing even further, and replaced the entire gray gradient with something more colorful:
With a colored tab, I find the top tab bar location doesn't bother me nearly as much as it did when all the tabs were a near-uniform shade of gray. Because these files are under Apple's copyright, we cannot distribute modified versions, but only instructions on which files to modify.]
    •    
  • Currently 0.00 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (0 votes cast)
 
[12,167 views]  

Make Safari 4's active tab more visible | 35 comments | Create New Account
Click here to return to the 'Make Safari 4's active tab more visible' hint
The following comments are owned by whomever posted them. This site is not responsible for what they say.
Any reason why I wouldn't see any of those files in my Safari Resources folder? ##
Authored by: earthsaver on Thu, Mar 12 2009 at 8:11AM PDT


---
- Ben Rosenthal
MBP 2.8 - Leopard

[ Reply to This | # ]
Any reason why I wouldn't see any of those files in my Safari Resources folder? ##
Authored by: robg on Thu, Mar 12 2009 at 8:16AM PDT
Not that I can think of -- you're running Safari 4?

-rob.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: larrybic on Thu, Mar 12 2009 at 8:30AM PDT
robg's "add blue tint" version is perfect! Please provide the code! I hope it gets added to Safari Buddy 4 or, better still, incorporated in the prefs. I might actually use "tabs on top" if that was the case! But hey---it is a beta! Do you think the folks in Cupertino check this page?

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: robg on Thu, Mar 12 2009 at 9:11AM PDT
I very much doubt that Apple will do anything to add color to the interface -- the trend the last (seemingly forever) years has been to remove color.

If there were code to provide, I would. But there's not -- it's just a gradient fill I applied to the tab. You can do this in a couple of ways -- enclose the area with the selection tool, then gradient fill the selection; gradient fill another layer then trim away those bits that are outside the area you'd like filled, so the original graphic shows; etc.

I left the gray outlines and shadows in place, and just replaced the inner gray fills in all four of the files.

-rob.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: b00le on Thu, Mar 12 2009 at 8:49AM PDT
Very nice idea, but you should know that it does not work if you have put the tabs back where (some people think) they belong, using, e.g. Safari 4 Buddy, because the old tabs don't seem to use a fill image

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: robg on Thu, Mar 12 2009 at 8:56AM PDT
I expect that if you use the 'move tab' hint, you'll need to modify the Safari 3-style files, as described at the end of the hint -- but I haven't tested that theory.

-rob.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: NaOH-Lye on Thu, Mar 12 2009 at 8:59AM PDT
Correct, Rob. The files for old-style tabs are still included in the Safari package, so the edit can be done using the files mentioned at the end of the hint.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: pub3abn on Thu, Mar 12 2009 at 9:59AM PDT
You will need to repeat this modification EVERY TIME you update/upgrade Safari. That is probably obvious to most users of this site, but I'm just saying.... Although I like the look of colored tabs, the prospect of doing this with every update is a bit too discouraging for me. Unless, of course, someone develops some little haxie-type program that will attend to this for you.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: ershler on Thu, Mar 12 2009 at 10:14AM PDT
Please remember that Safari 4 is just in beta form. Suggestions like the ones pointed out here should be sent to Apple feedback. Perhaps the active tab color (and the inactive tab color perhaps) could be in the preferences in the final version. Anybody interested should send feedback to Apple.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: NaOH-Lye on Thu, Mar 12 2009 at 10:19AM PDT
I did send Apple feedback about this. Interestingly, Safari has a built-in method for bug reporting. And the Apple web site has a page for feedback where the software is sorted by application. Unfortunately, Safari is not one of the available applications for which users can directly provide feedback. The only recourse I could think of was to use the Safari bug reporting mechanism. Hopefully, this approach didn't cause them to disregard the suggestion.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: NaOH-Lye on Thu, Mar 12 2009 at 10:15AM PDT
I've been doing this for years, and you're right. But it's a very quick drag-and-drop procedure as long as you keep a backup of the four modified files.

In the past, incremental Safari updates did not include drastic interface overhauls, so the adjusted files were always re-usable. For me, then, that meant I got nearly 4 years out of my last set of adjusted files since I used them with both Safari 2 and Safari 3.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: asmeurer on Thu, Mar 12 2009 at 10:18AM PDT
It's not like you will have to modify the file each time. Just save a copy somewhere so you can switch it back when Safari is updated. And if it turns out that the new Safari changes the file to something else that you would have to modify again, then you should probably reconsider whether this hint is still necessary at that point.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: DevMac on Thu, Mar 12 2009 at 10:32AM PDT
Great hint.

However, I can't seem to change the inactive tabs, i.e., the center fill.

Perhaps I am not using the proper file.

Using Photoshop

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: f3rdito on Thu, Mar 12 2009 at 11:29AM PDT
I like the blue one! Can it be made available for download? Thanks

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: soundsgoodtome on Thu, Mar 12 2009 at 11:44AM PDT
hey, robg,

that blue tab is sweet.... how about posting it online for us, somewhere? :-)

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: Korich on Thu, Mar 12 2009 at 12:19PM PDT
Make Safari 4's active tab more visible
Authored by: bdjones on Thu, Mar 12 2009 at 12:06PM PDT
just a general comment but if you have trouble seeing the difference in the greys in Safari 4 tabs you might want to consider a better monitor. Apple's monitors (and other SIPS/HIPS monitors) don't cost that much because they're greedy... I do like the Rob's blue tab though.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: jpmd on Thu, Mar 12 2009 at 12:19PM PDT
Just open AW_ActiveTabCenterFill.png (it actually is a gradient fill for the entire height of the tab, not just the top as perhaps implied in the original post) in Photoshop, then use Image -> Adjustments -> Color Balance and play with the sliders until you get a color you like.

[ Reply to This | # ]
thanks!
Authored by: fursonice on Thu, Mar 12 2009 at 3:17PM PDT
you rock!

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: dppeak on Thu, Mar 12 2009 at 6:31PM PDT

I liked the idea of modifying the active tab to create more contrast between active and inactive tabs. However, things didn't quite look right since the tab was one color and the rest of the window was gray. I decided to modify the inactive tabs and see what happened. I liked this solution more. I modified the following files:

AW_InactiveTabCenterFill.png
AW_InactiveTabLeftCap.png
AW_InactiveTabRightCap.png
AW_TitlebarCenterFill.png
AW_TitlebarLeftCap.png
AW_TitlebarRightCap.png

I opened them in Photoshop and did like jpmd suggested with Image -> Adjustments -> Color Balance. These are the settings I used for Midtones: Cyan: -100, Magenta: -68, Yellow: -25 and Preserve Luminosity is checked.

Tell me what you think.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: larrybic on Thu, Mar 12 2009 at 9:10PM PDT
How about if you post a screen shot of the multicolor tabs!

Meanwhile, having the active tab in color-of-your-choice is soooo much better that I can now use the "tabs on top" which does free up a little more screen real estate. It's even cool with no tabs at all!

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: robg on Fri, Mar 13 2009 at 6:24AM PDT
The geeklog comment system won't allow users to insert images. However, dppeak sent me an image to post, so here it is (click for the full-size version):
-rob.

[ Reply to This | # ]
RobG - Show us your PNGs !!
Authored by: tc60045 on Fri, Mar 13 2009 at 7:16AM PDT
Rob, you tease us graphically-impaired users -- just put some links up to your website and give us your PNGs, baby.

Share the love!

xoxoxo

[ Reply to This | # ]
RobG - Show us your PNGs !!
Authored by: robg on Fri, Mar 13 2009 at 8:03AM PDT
Sorry, I can't do that -- it's not my file to share, so I can't upload it. I see in the comments, though, that someone has linked to a file somewhere.

In theory, someone could probably record a Photoshop action (or similar in Graphic Converter?) to do the work to the files, so then you'd just have to run a macro ... but that's beyond my Photoshop skills.

-rob.

[ Reply to This | # ]
RobG - Show us your PNGs !!
Authored by: abou on Fri, Mar 13 2009 at 11:32AM PDT
Make Safari 4's active tab more visible
Authored by: abou on Fri, Mar 13 2009 at 11:48AM PDT
Make Safari 4's active tab more visible
Authored by: apikoros on Fri, Mar 13 2009 at 2:11PM PDT
Has anyone got the "old" Safari 3-style tabs colored blue like Rob's? That's what I would really like, but I can't seem to do it myself. I tried creating them with the only photo editing software I have, Compositor, but I'm incompetent.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: zm on Mon, Mar 16 2009 at 11:08AM PDT
Works with Safari v3: SafariBlueTab3

[ Reply to This | # ]
Make Safari 4's inactive tabs less visible
Authored by: Aet on Fri, Mar 13 2009 at 9:05PM PDT
Beautiful!

I don't have any problem discerning the currently active tab at a glance, but that appearance makes me want to go ahead and try the modification anyways.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: ianeiloart on Wed, Mar 18 2009 at 4:12AM PDT
No, you didn't insure anything. Insurance is a financial and contractual arrangement to get monetary compensation when something goes wrong. The word you're looking for is "ensure".

http://www.yourdictionary.com/grammar-rules/Insure_vs_Ensure.html

---
Ian Eiloart

[ Reply to This | # ]

Make Safari 4's active tab more visible
Authored by: robg on Wed, Mar 18 2009 at 1:07PM PDT
In English, the words are often used interchangeably, even Merriam-Webster includes both definitions for 'insure':
in•sure
transitive verb
1 : to provide or obtain insurance on or for
2 : to make certain especially by taking necessary measures and precautions
If it's good enough for them, it's good enough for me.

-rob.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: profmacdaddy on Fri, Mar 20 2009 at 8:54AM PDT
Thanks dppeak! I like your modifications the best - keeping the active tab as its default color, but changing inactive tabs to a dark blue-grey.

Hopefully the official release will easily allow changing of tab colors in preferences.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: dppeak on Thu, Mar 26 2009 at 9:28PM PDT
Thanks for the approval profmacdaddy! Glad I could contribute.

[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: wsw on Mon, Mar 30 2009 at 12:37AM PDT
Is there a way to colorize the tabs when they are moved to the bottom?

[ Reply to This | # ]
Make Safari 3 (& 4.0 Final) active tab more visible
Authored by: zm on Sat, Jun 13 2009 at 4:56PM PDT
My previous post included a link to blue-tab graphics for Safari 3.

Now that the final version of Safari 4.0 is out, the file names and graphic needed updating. That has been included in the same link.

[ Reply to This | # ]