[How To] Remove dotted lines from links and image links

[Frost Chris Frost]

To some style designers, creating the perfect theme that flows together flawlessly only to have ugly dotted lines surround a link or image on hover or click, is aggravating. Here is an example of how to get rid of those on all browsers (I think; IE & Firefox for sure)

Note: Some users supposedly use their keyboard to navigate through your site. Seeing as how these are forums I really doubt it. Anyways, removing these dotted lines will also remove their way of knowing where they are whilst navigating with their keyboard. Use your best judgment here I guess.

There is a better way that works on just clickable images but I think it's just for firefox, I'll post that as well when I find it.

Open stylesheet.css

Add this:

Code: Select all

a {
outline: none;
}

This should disable all dotted lines on any linked object on your site.

[Tyler]

Many thanks Frost for this tip.

It's a beauty, those little details make a great style.
I've copy/past it in my stylesheet, and now my forum looks a lot more distinct.

Tyler.

[Gleasonator Alex]

Very nice. Thank you!

But for RC2 you need to edit root/styles/prosilver/themes/content.css and add the code to the end of that for it to work.

Also be sure to refresh the theme via ACP after applying the edit.

[Yoris]

have some problem... it doesnt work, i did exactly as it says in the first and fourth post, i have RC1 -- i have installed like 15 mods in my forum so im not so much of a noobie. but sth is wrong here, it didnt work for me... any thoughts?

[Frost Chris Frost]

It should have worked just fine, show me the site that it didn't work on

[Tyler]

have some problem... it doesnt work,...

Additional way to remove dotted lines:

Code: Select all

a {
   outline: 0;
}

For flash files:

Code: Select all

object, embed {
  outline: 0;
}