Open External Forum Links in a New Tab

GuildPortal admin site link to the original post

This script searches for any link inside the forum posts and makes it open in a new tab/window. Additionally, it adds a css class name of "external-link" so you can style the link differently. In the example below, it adds an external link icon after the link.

Code
Ideally, add the following code to a Free Form Text/HTML widget on the Forums Page. But you could also add it to the Footer HTML (Control Panel > Custom HTML & Script > Footer Area).

<style>
a.external-link {
  background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/forum_link.gif) top right no-repeat;
  padding-right: 20px;
}
</style>
<script>
$(function(){
  var guild = 'GuildID=' + getGroupId();
  $('.MessageBodyCell1 a').each(function(){
    if (this.href && !this.href.match(guild)){
      $(this).addClass('external-link').attr('target','_blank');
    }
  });
});
</script>

Customizing

• Change or remove the background image by modifying the image url in orange. Adjust the padding-right in red to fit the image.
• If you want to modify the link color, do it as follows:
  

   .external-link:link { color: #ffcc00; }
   .external-link:hover { color: #ffffff; }
   .external-link:visited, .external-link:active { color: #ff8800; }

  Modify the link colors in blue as desired.