Forum - External - Link - Grafik: Links deutlicher darstellen!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6) � External - Link - Grafik: Links deutlicher darstellen!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | External - Link - Grafik: Links deutlicher darstellen! datum

07.04.2020 13:24 (zuletzt bearbeitet: 12.07.2023 20:26)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3392
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1278

External - Link - Symbol: Links deutlicher darstellen!
Aktualisiert 12.07.23

Um Links in Texten deutlicher darzustellen, werden sie oft unterstrichen, farblich verändert oder wenn es ganz dezent sein soll, nur mit einem "Mouseover" verändert!
Soll der Lesefluss nicht gestört werden, sind Links oft minimalistisch gekennzeichnet, hat aber den Nachteil, dass sie kaum zu erkennen sind.
Nicht so störend können Grafiken sein! Auch hier muss man abwägen und es ist auch Geschmackssache, wie stark die Grafiken ins Gewicht fallen!

Lösungen 1: ⇗

Die einfachste Art funktioniert über "Unicodes", die normal formatiert, gleich mit Schriftgröße und Farbe eingebaut werden können. Sie werden einfach in den Textfluss eingebaut! Funktioniert bestens!

Wichtig ! In den "Xobor-Foren" ist es bei der Vorschau so, dass beim ersten Klick die Unicodes normal angezeigt, beim zweiten Klick umgesetzt und dann erst angezeigt werden!
Beim Speichern eines Beitrages muss mindest einmal die Vorschau angeklickt werden, damit die Unicodes umgesetzt und als Symbol gespeichert werden können!

Die Unicode-Zeichenfolge wird ganz normal in den Textfluss eingebunden und kann, wie Text auch, frei formatiert werden!
Somit kann ganz nach Belieben ein Link hervorgehoben werden oder nicht!

Unicode: ↗

↗ ↗ ↗ ↗ Hier geht es zur Bildergalerie ↗

Unicode: ⇗

⇗ ⇗ ⇗ ⇗ Hier geht es zum Blog ⇗

Unicode: ⬀

⬀ ⬀ ⬀ ⬀ Hier geht es zur Portal ⬀

Schlie�en

Lösung 2:

Link-Symbole können auch als kleine "Background-Grafiken" eingesetzt und in ihrer Größe beliebig angepasst werden!
Will man die Grafiken nicht selber erstellen, kann man sie suchen und bestens mit dem Suchbegriff "External Link Icon", "External Link Symbol" oder "External Link Grafik" finden!
Viele Grafiken haben allerdings einen weißen Hintergrund, der nicht für jedes Forum passt.
Sucht man Grafiken mit der Endung *.png, sind sie fast immer ohne farblichen Hintergrund!

//files.homepagemodules.de/b104774/a_257_5cf3b1f1.png

//files.homepagemodules.de/b104774/a_258_066ab7ea.png

//files.homepagemodules.de/b104774/a_259_908f34a7.png

//files.homepagemodules.de/b104774/a_260_b36ae9bf.png

//files.homepagemodules.de/b104774/a_263_4f65c07f.png

//files.homepagemodules.de/b104774/a_264_c4413b27.png

//files.homepagemodules.de/b104774/a_265_a72f2d2b.png

//files.homepagemodules.de/b104774/a_262_69fd276a.png

//files.homepagemodules.de/b104774/a_256_a1b4bc38.png

//files.homepagemodules.de/b104774/a_271_068ff447.png

//files.homepagemodules.de/b104774/a_269_a3547a82.png

//files.homepagemodules.de/b104774/a_266_42760735.png

//files.homepagemodules.de/b104774/a_267_5e485335.png

//files.homepagemodules.de/b104774/a_270_cc6839b6.png

//files.homepagemodules.de/b104774/a_268_e999beb2.png

//files.homepagemodules.de/b104774/a_272_77a06e7d.png

//files.homepagemodules.de/b104774/a_273_04da5ea6.png

Schlie�en

Mit dem folgenden Eintrag können komplette Kategorien und Bereiche, wie Beiträge, Bildergalerie, Blog u.s.w. mit Link-Grafiken versehen werden!
Wichtig ist, welcher Bereich mit den Link-Grafiken versehen werden soll!
Über die rechte Maustaste und "Untersuchen" kann man die zuständige "class" ausfindig machen!
Im Beispiel sind für das Business-Template, die Beiträge, die Aktivity-Feeds, Letzte Beiträge und der Blog bedacht!
Eingetragen wird alles in Eigener CSS Code!
In Zeile 3 wird die Größe der Grafik eingestellt.
In Zeile 4 der Abstand zwischen Verlinkung und Link-Symbol.
In Zeile 5 der Abstand zwischen Link-Symbol und fortlaufenden Text.

1
2
3
4
5
6
 
.xquoteable a, .cmhsp a, .fdetail a strong,  .blog-article-body a{
background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
background-size:10px;
padding-right:15px !important;
margin-right:5px;
}
 

In Templates v6 mit "Responsive-Design" ist der folgende Eintrag nicht notwendig!
Eintrag für Templates v1-4 in CSS / SCSS!
In der mobile Version sind nur die Beiträge mit Link-Grafiken bedacht!

1
2
3
4
5
6
 
.xquoteable a {
background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
background-size:10px;
padding-right:15px !important;
margin-right:5px;
}
 

Schlie�en

HTML-Links können über "style" gezielt mit Link-Grafiken versehen werden!
Anpassung erfolgen wie bereits beschrieben!

<a style="background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat; background-size:10px; padding-right:15px;margin-right:5px;" href="https://www.server.de">External - Link - Grafik</a>

Schlie�en

Umschlossene Foren-Links können über " ... " gezielt mit Link-Grafiken versehen werden!
Anpassung erfolgen wie bereits beschrieben!

[style=background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat; background-size:10px; padding-right:15px !important;margin-right:5px;;][url=https://www.server.de]External - Link - Grafik[/url][/style]

Schlie�en

Umschlossene Foren-Links können über neu erstellte "Foren-Codes" gezielt mit Link-Grafiken versehen werden!
Unter "Admin > Layout > Iconbar > Iconbar bearbeiten", Reiter "Foren-Code " aufrufen!
"Erweiterter Foren-Code " muss eingeblendet sein (Grundstellung)!
Unter Ersetze: und Mit: folgendes eingeben!
Anschließend speichern nicht vergessen!
Erstellten Foren-Code in "nicht sichtbar " (linke Seite) verschieben!

1
2
3
4
5
 
Ersetze: 
[Link] ... [/Link]
 
Mit:
<span style="background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat; background-size:10px; padding-right:15px !important;margin-right:5px;"> ... </span>
 

[Link][url=https://www.server.de]External - Link - Grafik[/url][/Link]

Schlie�en

Nachtrag für die mobile Funktion:

1. Damit die Link-Grafiken in den Templates V1-4 auch Mobil funktionieren, muss der Eintrag auch in "" erfolgen!
2. Adresse der Background-Grafik ohne "HTTPS" muss unbedingt in Anführungszeichen gesetzt werden!
3. Wichtig! Beim Test-Wechsel der Templates immer CSS und CSS / SCSS überprüfen!

https://files.homepagemodules.de/b104774/a_263_4f65c07f.png

Bis dann und viel Spaß

Wolfgang

Hans58, ichwersonst und Kipper-Spedition finden das Top!

Antworten

#2 | RE: External - Link - Grafik: Links deutlicher darstellen! datum

12.07.2023 12:00 (zuletzt bearbeitet: 12.07.2023 19:54)

Kipper-Spedition

Informationen anzeigen

Beitr�ge:	192
Registriert seit:	09.10.2022

Homepage:	Link
Letzte Spende	Betrag 10 � Forum Spende
Sternzeichen	Stier
Likes	132

Hallo Wolfgang,
ich hab die Link-Grafik im CSS eingefügt.

1
2
3
4
5
6
 
.xquoteable a{
  background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
  background-size:10px;
  padding-right:15px;
  margin-right:5px;
}
 

Schlie�en

Wie bekomme ich denn die Linkzeichen bei den Zitaten weg, oder die Zeichen weiter nach hinten gerückt? So sieht es nicht gerade schön aus. Ich brauche das Linksymbol eigentlich nur in den Beiträgen.

Wie immer vorab ein großes Dankeschön!

Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#3 | RE: External - Link - Grafik: Links deutlicher darstellen! datum

12.07.2023 21:37 (zuletzt bearbeitet: 12.07.2023 21:44)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3392
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1278

Zitat von Kipper-Spedition im Beitrag #2
Hallo Wolfgang,
ich hab die Link-Grafik im CSS eingefügt.

.....

Wie bekomme ich denn die Linkzeichen bei den Zitaten weg, oder die Zeichen weiter nach hinten gerückt? So sieht es nicht gerade schön aus. Ich brauche das Linksymbol eigentlich nur in den Beiträgen.

Wie immer vorab ein großes Dankeschön!

Arndt

Hallo Arndt.

Das sollte nicht so aussehen!

Lösung 1:

Fehler behoben!
Für die Grafik wird mit "padding-right" Platz gemacht und hier hat es im Zitat nicht funktioniert!
Habe "padding-right" ein "!important" spendiert, jetzt geht es (siehe Zeile 4)!
Im Beitrag #1 ist bereits alles nachgetragen!

1
2
3
4
5
6
7
 
/* Linksymbol für Links in Beiträgen */
.xquoteable a {
  background: url("//files.homepagemodules.de/b104774/a_255_164190a9.png") center right no-repeat;
  background-size:10px;
  padding-right:15px !important;
  margin-right:5px;
}
 

Lösung 2:

Linksymbol im Zitat ausblenden.
Muss nach dem CSS-Eintrag "Linksymbol" eingetragen werden!

1
2
3
4
5
6
 
/* Linksymbol ausblenden */
/* Zitate */
.xquotecont a {
  background:none !important; 
  padding-right:0 !important;
}
 

PS:

Das Linksymbol macht sich nicht in allen Bereichen nützlich, manchmal passt es einfach nicht!
Hier können die Classes ausfindig gemacht und das Linksymbol ausgeblendet werden!

Besten Dank fürs Testen und Feedback
Wolfgang

Kipper-Spedition findet das Top!

Antworten

#4 | RE: External - Link - Grafik: Links deutlicher darstellen! datum

13.07.2023 03:31

Für das testen gehe ich gerade noch so.
Und stimmt, manchmal muss ich bei meinen Angestellten auch mal was rot und mit Ausrufezeichen schreiben... und schon klappt das,,,,

Wolfgang!

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

FAQ verbessern und interessanter gestalten - (v4, v6 + Mobil) � � Xobor-Spenden-Button - In der Foren Übersicht, im Profil, im Beitrag, im Portal und in der Mitgliederliste!

�hnliche Themen

Antworten

Letzter Beitrag

Das Plugin "Externe Inhalte einbinden" - Cookie Abfrage erweitern
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

12.03.2024 10:08
von

Kipper-Spedition • Zugriffe: 401

Aktive Links in der Fußleiste mit Hintergrundfarbe versehen oder ausblenden - Teil 1-2
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 1 18.04.2023 16:57
Wolfgang • Zugriffe: 297

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 1835

Link unten entfernen - Linkänderung in der Fußleiste
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi

03.11.2022 06:49
von

Wolfgang • Zugriffe: 437

Xobor-Spoiler mit Grafik in der Titelleiste
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 04.07.2022 22:30
Daishi • Zugriffe: 572

YouTube Video-Link in Embed-Link konvertieren (Video-Konverter)!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.07.2019 19:17
von

Wolfgang • Zugriffe: 1444

Verlinkte Grafik - Hinweis auf spezielle Beiträge, Ereignisse und Favoriten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.03.2017 08:25
von

Wolfgang • Zugriffe: 2074

Signatur: Themen als Grafik - Beliebig formatieren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

11.03.2016 14:45
von

Wolfgang • Zugriffe: 1760

Syntax-Highlighting - Quellcode im Forum farbig darstellen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.02.2015 21:29
von

Wolfgang • Zugriffe: 1321

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €