tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/18957-verwendung-externe-linksRockSolid Themes: Discussion 2021-11-16T16:13:21Ztag:help.rocksolidthemes.com,2012-07-23:Comment/420817872017-03-04T13:54:36Z2017-03-06T09:39:45ZVerwendung: Externe Links<div><p>Produkt: Tao Contao</p>
<p>Guten Tag,<br>
Das Icon hinter externen Links wird in tao nicht automatisch
angezeigt.<br>
Sie haben in diesem Beitrag (<a href="http://help.rocksolidthemes.com/discussions/contao/15771-verwendung-link-_targetblank-icon-nicht-zu-sehen">http://help.rocksolidthemes.com/discussions/contao/15771-verwendung...</a>)
zwar eine Lösung angeboten, die auch funktioniert, in meinen
Augen aber unbefriedigend ist.<br>
Beim Schreiben eines Artikels muss man also, nachdem man einen Link
eingefügt hat, in den Quelltext umschalten, um dann beim
<code><a></code>-tag manuell "class="external-link""
einzutippen. Das ist nicht nur umständlich. Es ist vor allem
html-unkundigen Redakteuren nicht zuzumuten und widerspricht auch
dem Sinn eines CMS.<br>
Ich habe deshalb in die tinymce.css die Klasse
<code>.external-link{}</code> eingefügt. Im Editor steht nun
unter Formate "external-link" zur Verfügung (so wie
"drop-cap"). Der Link lässt sich auch damit auszeichnen. Das
Ergebnis ist aber leider nicht <code><a class="external-link"
href....</code>, sondern <code><span
class="external-link"><a
href=...</a></span></code>. Und damit funktioniert es
wieder nicht. Das Icon wird nicht angezeigt. Haben Sie keine
bessere Lösung?<br>
Beste Grüße</p></div>Higotag:help.rocksolidthemes.com,2012-07-23:Comment/420817872017-03-04T15:12:09Z2017-03-04T15:12:10ZVerwendung: Externe Links<div><p>Sorry, in meinem Beitrag oben ist ein Teil des Textes ungewollt
zum Link und abgeschnitten worden. Hier noch einmal der
entsprechende Absatz:</p>
<p>Beim Schreiben eines Artikels muss man also, nachdem man einen
Link eingefügt hat, in den Quelltext umschalten, um dann beim
»a-tag« manuell »class="external-link"«
einzutippen. Das ist nicht nur umständlich. Es ist vor allem
html-unkundigen Redakteuren nicht zuzumuten und widerspricht auch
dem Sinn eines CMS.</p>
<p>Ich habe deshalb in die tinymce.css die Klasse
».external-link{}« eingefügt. Im Editor steht nun
unter Formate »external-link« zur Verfügung (so
wie »drop-cap«). Der Link lässt sich auch damit
auszeichnen. Das Ergebnis ist aber leider nicht</p>
<p>a class="external-link"..., sondern span
class="external-link"......</p>
<p>Und damit funktioniert es wieder nicht. Das Icon wird nicht
angezeigt.</p></div>Higotag:help.rocksolidthemes.com,2012-07-23:Comment/420817872017-03-06T09:48:29Z2017-03-06T09:48:29ZVerwendung: Externe Links<div><p>Vielen Dank für Ihre Frage.</p>
<p>Wenn Sie möchten, dass alle Links die in einem neuen
Fenster (<code>target="_blank"</code>) geöffnet werden das
Icon erhalten, können Sie folgenden CSS-Code in die Datei
<em>files/tao/css/custom.css</em> einfügen:</p>
<pre>
<code>.main-content a[target=_blank]:after {
font: 0.8125em/1 "RockSolid Icons";
content: "\e151";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-left: 0.25em;
}</code>
</pre>
<p>Alternativ können Sie mit folgendem CSS-Code das Icon auf
für <code>span</code>-Tags mit der Klasse anzeigen lassen:</p>
<pre>
<code>span.external-link:after {
font: 0.8125em/1 "RockSolid Icons";
content: "\e151";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-left: 0.25em;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/420817872017-03-06T15:00:23Z2017-03-06T15:00:23ZVerwendung: Externe Links<div><p>Vielen Dank für die schnelle Antwort. Es funktioniert
prima. Allerdings sieht es besser aus, wenn man den Abstand
dahinter und nicht davor definiert, also "margin-right" statt
"margin-left". Wenn der Link mitten im Text ist, hat man sonst
quasi ein Leerzeichen zwischen Link und Icon, aber zwischen Icon
und dem folgenden Wort nicht mehr.<br>
Was jetzt noch nicht so schön ist: Das Icon wird
natürlich auch erzeugt, wenn Bilder, z.B. Logos, mit externen
Links versehen werden. Gibt es eine Klasse in der Art von
"image-link", mit der man das Icon bei Bildern wieder ausschalten
könnte?</p></div>Higotag:help.rocksolidthemes.com,2012-07-23:Comment/420817872017-03-06T15:38:45Z2017-03-06T15:38:45ZVerwendung: Externe Links<div><p>Mit folgendem CSS-Code können Sie das Icon für
Bild-Links entfernen:</p>
<pre>
<code>.main-content .image_container a[target=_blank]:after {
content: none;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/420817872017-03-06T18:08:53Z2017-03-06T18:08:54ZVerwendung: Externe Links<div><p>Super! Problem gelöst! Besten Dank!</p>
<p>Ein kleiner Hinweis an alle, die vielleicht einmal über dem
gleichen Problem "brüten": Die Lösung - also kein Icon
hinter Bild-Links - funktioniert nur bei Bildern, die per
Inhaltselement vom Typ "Hyperlink" eingefügt werden, nicht,
wenn das Bild im tinymce eingefügt und verlinkt wird.</p></div>Higotag:help.rocksolidthemes.com,2012-07-23:Comment/420817872021-11-16T14:41:47Z2021-11-16T14:41:47ZVerwendung: Externe Links<div><p>Vielleicht für manche auch eine Idee:</p>
<pre>
<code>// Zeile 401 in main.scss
a {
color: $link-color;
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
&:hover, &:active {
outline: 0;
}
&.external-link:after,
&[href^="http://"]:not([href*="example.com"]):after ,
&[href^="https://"]:not([href*="example.com"]):after {
@include icon("\e151", em(13));
margin-left: em(4);
}
}</code>
</pre></div>steininger