Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,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 2.11 / 5
  You rated: 4 / 5 (9 votes cast)
 
[22,422 views]  

Make Safari 4's active tab more visible | 36 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 whoever 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 Mar 12, '09 08:11:43AM



---
- 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 Mar 12, '09 08:16:52AM

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 Mar 12, '09 08:30:36AM

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 Mar 12, '09 09:11:40AM

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 Mar 12, '09 08:49:56AM

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 Mar 12, '09 08:56:24AM

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 Mar 12, '09 08:59:39AM

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 Mar 12, '09 09:59:00AM

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 Mar 12, '09 10:14:21AM

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 Mar 12, '09 10:19:52AM

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 Mar 12, '09 10:15:30AM

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 Mar 12, '09 10:18:54AM

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 Mar 12, '09 10:32:53AM

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 Mar 12, '09 11:29:29AM

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 Mar 12, '09 11:44:11AM

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 Mar 12, '09 12:19:02PM
Make Safari 4's active tab more visible
Authored by: bdjones on Mar 12, '09 12:06:51PM

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 Mar 12, '09 12:19:43PM
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 Mar 12, '09 03:17:35PM

you rock!



[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: dppeak on Mar 12, '09 06:31:30PM

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 Mar 12, '09 09:10:16PM

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 Mar 13, '09 06:24:45AM
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 Mar 13, '09 07:16:53AM

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 Mar 13, '09 08:03:11AM

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 Mar 13, '09 11:32:18AM
Make Safari 4's active tab more visible
Authored by: abou on Mar 13, '09 11:48:23AM
Make Safari 4's active tab more visible
Authored by: apikoros on Mar 13, '09 02:11:37PM

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 Mar 16, '09 11:08:27AM
Works with Safari v3: SafariBlueTab3

[ Reply to This | # ]
Make Safari 4's inactive tabs less visible
Authored by: Aet on Mar 13, '09 09:05:16PM

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 Mar 18, '09 04:12:18AM
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 Mar 18, '09 01:07:58PM
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 Mar 20, '09 08:54:46AM

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 Mar 26, '09 09:28:14PM

Thanks for the approval profmacdaddy! Glad I could contribute.



[ Reply to This | # ]
Make Safari 4's active tab more visible
Authored by: wsw on Mar 30, '09 12:37:17AM

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 Jun 13, '09 04:56:34PM

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 | # ]
Make Safari 5's active tab more visible
Authored by: phyljohn on Aug 03, '11 06:54:44PM

An update for Safari 5.1:

the files to modify are:

AW ActiveTabFill~snowleopard.png
AW ActiveTabLeftCap~snowleopard.png
AW ActiveTabRightCap~snowleopard.png

I used a solid yellow fill, which really stands out, but to each his own. The original files should be *copied* to a folder outside of the Safari package, copied again to another folder without changing the file names, the second set of copies modified in an image editor (I used GraphicConverter) and the modified copies copied to replace the originals inside the Safari package (administrator access required). Trying to modify the originals whilst they are inside the Safari package causes problems with permissions. If you wish keep the original and copies that are outside the package for future reference.



[ Reply to This | # ]