Removing external hyperlink arrows when linking from an image

(Max Edwards) #1

I use Squiz Matrix to edit a website for the company I work for. The version is v5.3.1.1. I am trying to link to external websites using an image as my link. However, I can not figure out how to remove the external hyperlink arrow from next to the pictures. I have attached a screenshot circling the pesky arrows that I just can't seem to remove. Does anybody know if there is a way to remove these arrows?

 

I hope this makes sense. If any further information is required to solve this, please let me know.

 

Thanks Capture.PNG (162 KB)

#2

This hasn't got anything to do with Matrix really, it's how your site has been styled/designed and not something you'd be able to turn on/off from the editing interface.

 

It looks like that icon is added to all links, then hidden for any links that point internally.

 

You could try creating a redirect page asset, and then linking each image to your redirect asset, instead of directly to the external link. That should get rid of the arrows.

(Nic Hubbard) #3

It looks like those arrows are added using CSS. They are for sure not added from Matrix.

(Oliver Kass) #4

Yep, you could look at adding a new class to your css file that hides the arrow on specific external links. If you use inspect element / firebug etc you should be able to find the class that's applying the arrows and write a new one to counteract it. For example if your class was something like:

 

.external-link:after {
    content: " \f105";
    font-family: FontAwesome;
}
 
You could write a new class with something like:
 
.no-arrow:after {
    content: none;
}

 

You can apply your class in the html for each image and then test in in the inspector before making any changes to see how it works.

 

Oli

(Max Edwards) #5

Thanks very much for your help. I'm not able to change the CSS coding for the site as it is for a local authority. I just manage the content. Just knowing that I can't remove the arrows means I can look for an alternative solution.

(Anthony Ponomarenko) #6

You could add some inline styles to hide the arrows. Not the best solution but it would work.