Topic on Skin talk:Chameleon

External links

3 comments • 12:54, 15 January 2019 5 years ago

3

Loman87 (talkcontribs)

Hi,
is there any method to differentiate internal and external links in Chameleon? I am talking about the classical mediawiki icon .
Thanks for the help,
Lorenzo

Reply Edited 11:44, 14 January 2019 5 years ago

F.trott (talkcontribs)

This probably worked out of the box in the beginning, but the skinning system was reworked a few years ago and now you have to add it explicitly.

You can add the necessary styles, either by adding them to your MediaWiki:Common.css or MediaWiki:Chameleon.css or by adding a Less file.

The following is taken from Vector:

.mw-body-content {

   .external {

      background-position: center right;
      background-repeat: no-repeat;

      background-image: url( 'images/external-link-ltr-icon.png' );
      background-image: linear-gradient( transparent, transparent ), /* @embed */ url( 'images/external-link-ltr-icon.svg' );
      // Do not serve SVG to Opera 12, bad rendering with border-radius or background-size (T87504)
      background-image: -o-linear-gradient( transparent, transparent ), url( 'images/external-link-ltr-icon.png' );

      padding-right: 13px;

   }
}

Of course, you will have to provide images/external-link-ltr-icon.png, images/external-link-ltr-icon.svg, images/external-link-rtl-icon.png, and images/external-link-rtl-icon.svg and correct the path to these images in your css.