Gamepedia Help Wiki
No edit summary
No edit summary
Line 3: Line 3:
 
External links are followed by a [[:File:Lock.svg|Lock.svg]] or a [[:File:External.svg|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).
 
External links are followed by a [[:File:Lock.svg|Lock.svg]] or a [[:File:External.svg|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).
   
<syntaxhighlight lang="css">
+
<syntaxhighlight lang="css" style="overflow-x: auto;">
 
div#content a.external {
 
div#content a.external {
 
background-image: url(https://commons.gamepedia.com/media/2/25/External.svg);
 
background-image: url(https://commons.gamepedia.com/media/2/25/External.svg);

Revision as of 17:59, 1 October 2020

Checkered board external link

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 Wikis on the UCP would need to change the image URLs to point to https://commons.fandom.com/wiki/

Checkered board issue

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;
background-size: 10px;
padding-right: 13px;