phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

External link icons similar to Wikipedia

For support and discussion related to templates and themes in phpBB 3.3.
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations
User avatar
P_I
Community Team Member
Community Team Member
Posts: 2437
Joined: Tue Mar 01, 2011 8:35 pm
Location: Western Canada 🇨🇦

External link icons similar to Wikipedia

Post by P_I »

One user-friendly touch on Wikipedia is links to PDF documents display an icon at the end of the link, i.e. http://example.org/test.pdf Image

Source: Help:External link icons - Wikipedia

Has anyone implemented something similar in phpBB's CSS?

Adding the following Wikipedia's CSS coding to the bottom of links.css, purging phpBB cache and browser cache does not seem to work for me on my phpBB 3.3.11 test instance.

Code: Select all

a[href*=".pdf"].external {
	background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
	/* @noflip */
	padding: 8px 18px 8px 0;
}
Google also turned up How to add file-type icons to links with CSS · GitHub which does seem to work although the PDF icon is not in appropriate colour and therefore not quite as obvious to the reader.

Code: Select all

/*
  For this to work you need to have already included FontAwesome (https://fortawesome.github.io/Font-Awesome/) in your <head>:
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
*/

a[href$=".pdf"]:after {
  font-family: FontAwesome;
  content: "\00a0\f1c1";     /* 00a0 is a non-breaking space, f1c1 is the pdf symbol */
}
Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams
Top
User avatar
Mannix_
Registered User
Posts: 2003
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: External link icons similar to Wikipedia

Post by Mannix_ »

Using a[href*=".pdf"] instead of a[href*=".pdf"].external will probably fix your issue ;)
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
Top
User avatar
P_I
Community Team Member
Community Team Member
Posts: 2437
Joined: Tue Mar 01, 2011 8:35 pm
Location: Western Canada 🇨🇦

Re: External link icons similar to Wikipedia

Post by P_I »

:oops: Thanks. Totally missed that when I did the cut-and-paste.

The fully working version based on MediaWiki:Common.css - Wikipedia that I have added to links.css is

Code: Select all

a[href*=".pdf"],
a[href*=".pdf?"],
a[href*=".pdf#"],
a[href*=".PDF"],
a[href*=".PDF?"],
a[href*=".PDF#"] {
    background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
    /* @noflip */
    padding-right: 18px;
}
Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams
Top

Return to “[3.3.x] Styles Support & Discussion”