I finally got around to playing with J5 and annoyed to find that the Atum admin template has implemented a minimal form of link hinting that only detects target="blank"
and places an icon before the link text which just feels totally wrong. There doesn't seem to be anything similar in the Cassiopedia site default template fortunately.
So the first issue is to disable Atum from doing this. You don't really want to do this by editing the Atum template CSS as your changes will get lost on an update. The thing you need to do is to add a bit to the user.css
file for the template (creating the file first if it doesn't yet exist)
The following should do it:
a[target="_blank"]:before {
content:unset;
}
If it doesn't work try putting !important before the semicolon. If you want to hack the template css file the offending lines are around line 13,637 in the non-minified version
While I'm talking about this I have made some tweaks to the linkhinting css for Joomla 5. Now j5 comes with Font Awesome 6 there are better icons to use for external links in the current window and also in a new window. The icons fas fa right-from-bracket
(\f2f5) andfas fa right-to-bracket
(\f2f6) provide a matching pair which I think work better than to earlier version I was using for J3.
Also I've added a class nohint
which suppresses the icons if it is used for the link. There is no css for .nohint
, just the presence of it prevents the icons being generated in the :after position.
Here is the current css ready to copy & paste into a J5 template user.css
file.
/* internal no target or target self -> no after */
/* internal target not _self -> plain arrow-out ↗ \2197 with font-family serif */
a:not(.nohint)[href]:not([href^="http"]):not([class="noafter"])[target]:not([target="_self"]):after,
a:not(.nohint)[href^="https://{DOMAIN}"]:not([class="noafter"])[target]:not([target="_self"]):after,
a:not(.nohint)[href^="https://www.{DOMAIN}"]:not([class="noafter"])[target]:not([target="_self"]):after,
a:not(.nohint)[href^="http://{DOMAIN}"]:not([class="noafter"])[target]:not([target="_self"]):after,
a:not(.nohint)[href^="http://www.{DOMAIN}"]:not([class="noafter"])[target]:not([target="_self"]):after
{
font-family:serif;
content: "\2197";
font-size: 14px;
font-weight: 900;
padding-inline-start:5px;
}
/* external no target or target _self -> arrow-in fas fa right-to-bracket \f2f6 */
a:not(.nohint)[href^="https"]:not([href^="https://www.{DOMAIN}"]):not([href^="https://{DOMAIN}"]):not([class="noafter"])[target][target="_self"]:after,
a:not(.nohint)[href^="https"]:not([href^="https://www.{DOMAIN}"]):not([href^="https://{DOMAIN}"]):not([class="noafter"]):not([target]):after,
a:not(.nohint)[href^="http://"]:not([href^="http://www.{DOMAIN}"]):not([href^="http://{DOMAIN}"]):not([class="noafter"])[target][target="_self"]:after,
a:not(.nohint)[href^="http://"]:not([href^="http://www.{DOMAIN}"]):not([href^="http://{DOMAIN}"]):not([class="noafter"]):not([target]):after
{
font-family: "Font Awesome 6 Free";
content: "\f2f6";
font-size: 14px;
font-weight: 900;
padding-inline-start:5px;
}
/* external target not _self ->arrow-out-box fas fa right-from-bracket \f2f5 */
a:not(.nohint)[href^="https"]:not([href^="https://www.{DOMAIN}"]):not([href^="https://{DOMAIN}"]):not([class="noafter"])[target]:not([target="_self"]):after,
a:not(.nohint)[href^="http://"]:not([href^="http://www.{DOMAIN}"]):not([href^="http://{DOMAIN}"]):not([class="noafter"])[target]:not([target="_self"]):after
{
font-family: "Font Awesome 6 Free";
content: "\f2f5";
font-size: 14px;
font-weight: 900;
padding-inline-start:5px;
}
Of course you need to replace {DOMAIN}
in the above with your own host's address.
That's all for now
Comments powered by CComment