Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Create custom clicked-link outlines in Safari Web Browsers
Back in December, before Safari 1.2 was released, David Hyatt wrote a post about outline highlights in Safari. Now that we have Safari 1.2, I have noticed that it no longer gives you a dotted outline (or anything for that matter) when you click on a link. So what I have found is that if you take the outline code that David Hyatt posted in December and make Safari use a custom Cascading Style Sheet, then all links will have an IE-like glowing outline when you click on links.

To do this, Open any text editor that is able to save a .css file (basically a pure text file), and paste the below code.

:link:active, :visited:active { outline: 3px auto; color: lightblue; }
Save the file somewhere, and name it something ending in .css. Then go into your Safari Preferences and click on the Advanced icon. From there, you can set a custom CSS file for Safari to use; point it to the file you just created. Of course you can take out the color: lightblue;, and Safari will use the same color of the link on each site. Or you can even change it to the color of your choice. To see the effects, you'll have to open a new web page; it won't change any already loaded pages.

This hint can also be used in Net News Wire and any other app that is able to use custom CSS files w/ webcore.
    •    
  • Currently 2.80 / 5
  You rated: 2 / 5 (5 votes cast)
 
[7,984 views]  

Create custom clicked-link outlines in Safari | 13 comments | Create New Account
Click here to return to the 'Create custom clicked-link outlines in Safari' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Create custom clicked-link outlines in Safari
Authored by: luhmann on Feb 18, '04 12:32:30PM

I'd like to edit this to turn off any underlined hints (like the ugly ones on MacOSXhints.com), and to make the outline appear on HOVER as well. But I don't know CSS well enough to do this...



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: stewby on Feb 18, '04 01:03:36PM

I'm not sure I know exactly what you are looking for. This will turn off underlining on hover only, and add outline to hover:

a:active, a:visited, a:hover { outline: 3px auto }
a:hover { text-decoration: none ! important; }

if you want to turn off *all* link underlining, change the second line to:

a { text-decoration: none ! important; }

However, if you do that you'll want to make sure that there's some other !important rule (a specific color, an outline, etc.) for the plain 'a' tag, or you'll never be able to find links that are set to the same color as the text (which isn't a very good idea, but some people do none the less).



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: luhmann on Feb 18, '04 02:38:53PM

Hmm, doesn't seem to work. Yes I'd like to turn off all underlining. But the above code doesn't seem to help with either the hover or the underlining - everything works pretty much the same as the original code in the hint above - even on newly opened web pages. Actually, it doesn't even work as well, because now the outline is the same color as the text rather than as specified (lightblue).

This is why I hate CSS - it is so difficult to get right.



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: luhmann on Feb 18, '04 06:18:39PM
This seems to work for me. It turns out I had to quit and relaunch Safari to get it to work:
:link, :visited { text-decoration: none }
:link { text-decoration: none }
:link:hover, :visited:hover { outline: 3px auto; color: lightblue; }
:link:active, :visited:active { outline: 3px auto; color: lightblue; }


[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: stewby on Feb 19, '04 01:21:11AM

I had taken the color specification out of my example; sorry about that. I also noticed that I had to quit and re-launch, but other than that my CSS should work fine.

If you don't ever want the underlines, it's best to put in the ! important as in my example; that ensures that you'll get text-decoration: none even if they specifically set a text-decoration for :hover using a higher-precedence selector than a simple catch-all :hover



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: huzzam on Feb 18, '04 03:12:02PM

shouldn't the second line be:

a:hover { text-decoration: underline !important; }

? --peter



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: stewby on Feb 19, '04 01:23:13AM

No... that would make hovered links always have an underline, and the question was about removing all underlines.



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: robg on Feb 18, '04 03:35:30PM

You realize, of course, that there's a theme here that doesn't use underlines? Just go into your Display Preferences and select Color Effects, and it's 100% line-free viewing until you hover over a link.

-rob.



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: semios on Feb 18, '04 05:37:46PM
So what I have found is that if you take the outline code that David Hyatt posted in December and make Safari use a custom Cascading Style Sheet, then all links will have an IE-like glowing outline when you click on links.

How 'bout a graphic to illustrate what these words mean?

[ Reply to This | # ]

Create custom clicked-link outlines in Safari
Authored by: akuma-x on Feb 18, '04 05:51:02PM
Create custom clicked-link outlines in Safari
Authored by: sfn on Feb 18, '04 06:25:22PM
Doesn't the page's css always win? I have always used:
a  { color: #003366; text-decoration: none }
to turn off underlining in Safari but it won't override a pages css of a link's text-decoration. I don't quite understand the addition of
!important
here either.

---
-sfn

[ Reply to This | # ]

Cascading Order in CSS
Authored by: nicksay on Feb 18, '04 11:26:56PM

According to the W3C CSS Specification, style sheets may have three different origins: author (i.e. the page), user (i.e. you), and user agent (i.e. Safari). Obviously, styles defined in these three scopes may overlap. The CSS cascade assigns each rule a "weight", and when several rules apply, the one with the greatest "weight" takes precedence.

By default, author-defined rules have precedence over user-defined rules. The user agent-defined rules always have the least "weight" of all. Since, this cascade strategy gives the author's style sheets higher weight than the user's, the W3C recommends that the user agent provide the ability to "turn off" certain style sheets (e.g. through a pull-down menu).

However, to create a balance of power between author and user within CSS itself, the !important declaration reverses the precedence chain. Both author- and user-defined rules may contain the !important declaration, and user !important rules override author !important rules.

Therefore, by using the !important declaration in one's user-defined style sheet (i.e. the one specified in the "Advanced" tab of Safari's preferences), one ensures that those rules are applied instead of any author-defined ones.



[ Reply to This | # ]
Cascading Order in CSS
Authored by: sfn on Feb 19, '04 08:32:00AM

Thanks, I glanced at the CSS1 docs and left it a that.

-s

---
-sfn



[ Reply to This | # ]