Hallo Foris!

Ich möchte gerne die externen Links (auf eine fremde Homepage) innerhalb der Content-Area meiner Homepage anders darstellen als die internen Links (eigene Homepage), so dass der User bereits vor dem Anklicken weiß, ob er meine Seite verlässt oder nicht.

Ich habe auch schon etwas herumgefrickelt, aber ich schaffe es weder, die Kennzeichnung auf die Content-Area zu beschränken noch auf die externen Links.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
 
<style>
/* <![CDATA[ */
/* Externer Link mit Font Awesome Icon dahinter */
#content-area a[href^="http://"]:not([href*="palaneris.de"]):after,
#content-area a[href^="https://"]:not([href*="palaneris.de"]):after {
font-family: "Font Awesome 5 Free";
font-size: 9px; 
content: "\f35d";
padding-left: 5px;
}
/*]]>*/
</style>
 

Lasse ich nun die Einschränkungen weg

 a:after {
font-family: "Font Awesome 5 Free";
font-size: 9px; 
content: "\f35d";
padding-left: 5px;
}
 

funktioniert es zwar, aber dann werden natürlich auch die internen Links sowie die in den Menüs entsprechend gekennzeichnet. Grundsätzlich funzt es also - "nur" meine Spezifizierung ist irgendwie falsch.

Kann mir jemand sagen, was ich falsch mache?

Lieben Dank!
Kersten.

hast du uns bitte mal deine URL?

du könntest doch einfach vor die externen links jeweils eine Class einfügen. Dann sprichst du nur die Class mit deinen Wünschen an.

Hi TiJo!

Die Url lautet www.palaneris.de. Sie ist noch geschützt, weil noch nicht fertig. Allerdings wird sie recht umfangreich mit ziemlich vielen Links. Da jeweils manuell ne Class einfügen...?!?! Dann kann ich auch manuell das Sonderzeichen einfügen; ist vermutlich etwas weniger aufwändig. Ich hatte gehofft, dass mir das mit einem Snippet erspart bleibt...

naja. Versteh mich nicht falsch. Aber die Links gibst du ja auch manuell ein? Oder importierst du die?
Für mich klingt das bissle nach einem XY-Problem: ist es nicht wesentlich einfach das Sonderzeichen in die Zwischenablage zu kopieren und die Links durchzugehen, als nach einem Code zu suchen der das für dich macht?

aber du kannst auch mal noch den jQuery Code ausprobieren:

$('a:not([href^="http://your-website.com"]):not([href^="#"]):not([href^="/"])').addClass('external');
 

und dann die Class external entsprechend bearbeiten.


P.S natürlich erstmal jQuery auf deiner Seite einbinden, falls noch nicht geschehen.

Ja, wahrscheinlich hast du recht. Das bedeutet nur, künftig immer dran zu denken und jetzt den massigen Inhalt noch mal durchgehen.

Hatte nicht erwartet, dass es ein Problem ist, diese Links anzusprechen. Da war ich wohl wieder etwas zu naiv...

jQuery nutze ich schon, aber bei dem Code habe ich ja auch das Problem, dass es nicht auf die Links im Content beschränkt ist, oder?

weil mich der Ehrgeiz gepackt hat:

$('.jtpl-content a:not([href^="https://jordan-brennholz.de"]):not([href^="#"]):not([href^="/"])').addClass('external');
 

Danke, TiJo, aber irgendwas mache ich immer noch falsch...

<script src="https://code.jquery.com/jquery-latest.js">
</script>
 
<script type="text/javascript">
//<![CDATA[
/* Externe Links mit einer Class versehen */
$('.jtpl-content a:not([href^="https://palaneris.de"]):not([href^="#"]):not([href^="/"])').addClass('external');
//]]>
</script>
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
 
<style>
/* <![CDATA[ */
/*externe Links mit Icon versehen*/
.external a:after {
font-family: "Font Awesome 5 Free";
font-size: 9px; 
content: "\f35d";
padding-left: 5px;
}
/*]]>*/
</style>
 

Ferndiagnose ist da schwer. Hier mal zwei Punkte:

1. ich weiß nicht, ob deine Contentklasse wirklich jtpl-content heißt. Schau da mal über den Inspektor von den Browser-Entwickungtools nach.
2. muss das

a: after
 

hinter

.external
 

weg.

Hallo TiJo,

vielen Dank für deine Mühe. Nun habe ich es sogar mit meinem ursprünglichen Code hinbekommen. ... manchmal müsste Blödheit einfach bestraft werden...

Als ich noch mal kontrollieren wollte, ob jtpl-content richtig ist (ist es!), fiel mir auf, dass ich in meinem Code die content-area falsch angesprochen hatte. Richtig ist: content_area! Und siehe da - mein erster Code funzt. Ich kann dir nicht sagen, wie oft ich da gestern raufgeschaut habe... aber es ist mir einfach nicht aufgefallen.

Ich danke dir sehr, für deine Mühe und deine Hilfe!!!
GLG
Kersten.

Hallo zusammen,

ich möchte im Sinne der Barrierefreiheit auch gerne externe Links mit dem entsprechenden Symbol kennzeichnen. Leider kenne ich mich wenig mit CSS aus, aber wenn ich das richtig verstehe, ist im Font Awesome Icon-Set ja schon ein Icon für den Pfeil hinterlegt.

Ich habe nun versucht, den Code zu kopieren und auf meiner Website einzufügen, aber der Pfeil wird immer noch nicht angezeigt, nur ein kleines Rechteck. Es scheint so, dass kein Icon geladen bzw. angezeigt werden kann? Kann mir jemand sagen, was ich falsch mache?

<style>
/* <![CDATA[ */
/* Externer Link mit Font-Awesome-Icon direkt dahinter */
#content_area a[href^="ttp://"]:not([href*="beispielseite.de"]):after,
#content_area a[href^="ttps://"]:not([href*="beispielseite.de"]):after {
font-family: "Font Awesome 5 Free";
font-size: 9px; 
content: "\f35d";
padding-left: 5px;
}
/*]]>*/
</style>