mNo edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
<syntaxhighlight lang="css"> |
<syntaxhighlight lang="css"> |
||
div#content a.external { |
div#content a.external { |
||
− | background-image: url(https://commons.gamepedia.com/media |
+ | background-image: url(https://commons.gamepedia.com/media/2/25/External.svg); |
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||
background-position: center right; |
background-position: center right; |
||
Line 17: | Line 17: | ||
<syntaxhighlight lang="css"> |
<syntaxhighlight lang="css"> |
||
div#content a.external[href ^="https://"] { |
div#content a.external[href ^="https://"] { |
||
− | background-image: url(https://commons.gamepedia.com/media |
+ | background-image: url(https://commons.gamepedia.com/media/0/03/Lock.svg); |
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||
background-position: center right; |
background-position: center right; |
||
Line 25: | Line 25: | ||
</syntaxhighlight> |
</syntaxhighlight> |
||
+ | {{Note|Wikis on the UCP would need to change the image URLs to point to https://commons.fandom.com/wiki/|center}} |
||
+ | |||
+ | ==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 <code>div#content a.external</code>). |
If you only need to fix the checkered board issue, just apply the following CSS to the class that is applying the image (usually <code>div#content a.external</code>). |
||
Revision as of 17:47, 1 October 2020
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;
}
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;