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

Styles, Theme, Cosmetic and Appearance related tips, tricks, tweaks, and Graphics

Moderator: STG Styles Team

Forum rules
NOTE: Post full styles only in the Styles Forum

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

Postby Frost » 05 Jun 2007, 04:33

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.
A fresh new style can keep your visitors coming back.

White Fusion Skins - Coding and Design Tutorial Blog
User avatar
Frost    
Style Author
Style Author
 
Posts: 88
Joined: 19 Dec 2006, 17:28
Location: Exile
Favorite Team: Zomg?!
Gender: Male
phpBB Knowledge: 5




phpBB Academy at StarTrekGuide
Support STG
Using PayPal Donate

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

Postby Tyler » 07 Jun 2007, 13:50

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. :good:

:hello: Tyler.
http://www.soundtrackforum.net
dedicated to film music and game scores
User avatar
Tyler
Cadet IV
Cadet IV
 
Posts: 45
Joined: 11 Feb 2007, 07:44
Gender: Male
phpBB Knowledge: 2

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

Postby Gleasonator » 30 Jun 2007, 20:22

Very nice. Thank you! :good:

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.
Sniper_E's SRSLY HARDKORE GANGSTA RAP
Sniper_E wrote:My eyes sag they look like bags it makes me mad I get it from dad then I'm sad till it makes me gag and makes me lag oh what a drag.
User avatar
Gleasonator    
Ensign
Ensign
 
Posts: 67
Joined: 09 Jun 2007, 11:12
Gender: Male
phpBB Knowledge: 4

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

Postby Yoris » 02 Jul 2007, 01:48

:this: 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?
Image
User avatar
Yoris
Cadet I
Cadet I
 
Posts: 11
Joined: 17 Jun 2007, 09:19
Location: Behind You
Favorite Team: Boca
Gender: Male

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

Postby Frost » 05 Jul 2007, 14:42

It should have worked just fine, show me the site that it didn't work on
A fresh new style can keep your visitors coming back.

White Fusion Skins - Coding and Design Tutorial Blog
User avatar
Frost    
Style Author
Style Author
 
Posts: 88
Joined: 19 Dec 2006, 17:28
Location: Exile
Favorite Team: Zomg?!
Gender: Male
phpBB Knowledge: 5

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

Postby Tyler » 12 May 2011, 13:48

Yoris wrote: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;
}
http://www.soundtrackforum.net
dedicated to film music and game scores
User avatar
Tyler
Cadet IV
Cadet IV
 
Posts: 45
Joined: 11 Feb 2007, 07:44
Gender: Male
phpBB Knowledge: 2


Return to Styles Tweaks, Tips and Graphics

Who is online

Users browsing this forum: No registered users and 1 guest