Applying external link images

From Gamepedia Help Wiki
Jump to: navigation, search
Applying the proper CSS will allow a wiki to avoid this.

External links are followed by a Lock.svg or a External.svg on some wikis. To apply this to your wiki, the following applies the external link image correctly to the right of the links as well as making sure the images don't make a checkered board (see image).

div#content a.external {
  background-image: url(https://commons.gamepedia.com/media/2/25/External.svg);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 10px;
  padding-right: 13px;
}

To apply the lock to HTTPS links:

div#content a.external[href ^="https://"] {
  background-image: url(https://commons.gamepedia.com/media/0/03/Lock.svg);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 10px;
  padding-right: 13px;
}


NOTE:
Prof hydra.svg Wikis on the UCP would need to change the image URLs to point to https://commons.fandom.com/wiki/.

Checkered board issue[edit | edit source]

If you only need to fix the checkered board issue, just apply the following CSS to the class that is applying the image (usually div#content a.external).

background-repeat: no-repeat;
background-position: center right;
padding-right: 13px;