One of our templates customers asked how to hide the SEF Advance external link icon.
Mind you, this icon looks pretty cool. You may even see its variations on some big sites, like BBC.
Our customer, though, seemed to prefer a conventional look for their external links. And we obliged.
In this use case tutorial, you will learn where your external links get this pretty icon from and how to hide it.
The customer runs their website on our JS Elan template.
Their external link icon in question looked like in the screenshot below:
And here is the icon's .png image:
Do I Need to Hide This Icon?
When our customer asked to hide that icon, I had a mixed feeling.
The External Link Icon Advantages
On one hand, it adds that extra touch to your design, that makes it aesthetically more professional and appealing.
Moreover, this little icon also serves as a mini Call-to-Action. It has been purposely designed to enhance a conventional HTML hyperlink and prompt a click.
And we all love when our visitors interact with our web pages. We all are happy to see them click links we placed for them.
I am sure, for these reasons top dogs, for example, BBC, use it on their sites:
As you can see on this image, BBC even placed the link icon before the link text.
They recognize that the icon actually looks like a button and will more likely prompt a click than the text link.
Even Google offers this icon in its Font Awesome library:
Everything in life, though, has two sides.
The External Link Icon Disadvantages
Pleasing aesthetic and enhanced usability may sound like winning arguments.
Our customer, however, decided to hide this external link icon. Makes sense. Graphics are resources hogs.
Top dogs like BBC run their websites on dedicated and powerful servers.
Their resources allow them to add extra graphics on their pages without noticeable effect on the site performance.
The majority of us most likely run our websites on shared or virtual servers.
With our limited resources, we mostly have to be minimalistic and less ambitious when it comes to adding graphics.
Otherwise, our sites will suffer an increase in website loading time. And Google will reflect this drop in ranking us accordingly.
To put it all together, to display the SEF Advance external link icon or hide it is up to you and your unique situation.
There are advantages and disadvantages. You decide.
How Can I Hide This Icon?
As we mentioned in the introduction, this icon comes from your SEF Advance component.
It ads this icon to its backend user interface as well:
If you inspect this icon's front end code, you will find out that:
- the CSS class, responsible for displaying this icon is
a.ext - the file where this CSS class dwells is
/media/sef_advance/css/extlink.css - the CSS property displaying this icon is
background
To hide it on your front end pages, running on our JS Elan, or any other of our templates, please do the following.
- Go to Extensions > Templates > Templates:
You will be taken to the Templates: Templates (Site) screen.
- Click Js_elan Details and Files:
You will see the Templates: Customise (Js_elan) screen.
- Click css
- Click custom.css
Note: if you don't have custom.css file inside your css folder, create it.
- Add inside your custom.css the following custom CSS code:
/** Hide the extlink.png external link icon - Start **/
a.ext {background: none; padding: 0;}
/** Hide the extlink.png external link icon - Finish **/
- Click Save.
There you have it.
What's Next?
Join our Joomlashack Everything Club now. Become a member and find everything you need to build great Joomla websites:
- 22 powerful extensions
- 20 beautiful templates
- 500+ easy to follow training videos
- 2 best-selling Joomla books.
About the author
