derek derek derek

In order for people to easily distinguish external links from article links in the ExpressionEngine wiki, you can use CSS3 substring matching selectors to identify whether the link is local or external.  Internet Explorer 5.5/6, does not support this feature of CSS3. The good news is that for people using IE5.5/6, they are no worse off than before implementing these style rules, and everyone else using a modern browser will benefit. In your CSS for your wiki, and order of the rules is important, you should already have some default link styles (which will vary based on the theme you are using):

[css]
a, a:visited { text-decoration: none; color: #3B6CB5; background-color: transparent; }
a:hover { color: #8AD5F5; text-decoration: underline; background-color: #000; }
a.noArticle, a.noArticle:visited {
background: url(http://www.example.com/themes/wiki_themes/azure/images/broken_link.gif) center left no-repeat;
padding-left: 10px;
color: #973030;
}[/css]

Following these rules, apply substring selected styles. First, we style all URL links to be external. This will style anything that begins with “http” as an external link. Your relative and absolute path links will not be altered:

[css]div#content a[href^=“http:”] {
padding-left: 8px;
background: url(http://www.example.com/themes/wiki_themes/azure/images/ext_link.gif) center left no-repeat;
}[/css]

Now we override that styling for the special case of links using URLs that are still pointing at your own domain:

[css]div#content a[href^=“http://www.example.com”] { background: inherit; padding-left: 0; }[/css]

Lastly, we override the style rules with the “.noArticle” class selector so that they remain styled like we want them:

[css]div#content a.noArticle[href^=“http://www.example.com”], div#content a.noArticle:visited[href^=“http://www.example.com”] {
background: url(http://www.example.com/themes/wiki_themes/azure/images/broken_link.gif) center left no-repeat;
padding-left: 10px;
color: #973030;
}[/css]