Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
#1 Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo
Ich hätte einen tollen Verbesserungsvorschlag was das Kenntlich machen von Links in Foren-Beiträgen anbelangt.
Wäre es möglich, das man ein zusätzliches Symbol für Links mit angezeigt bekommt ??
Hier ein Bild von dem Symbol welches ich meine:
Vorteil ist ganz einfach der, das man dann in Beiträgen einen eingefügten Link besser erkennt, wenn in Beiträgen zusätzlich Textpassagen mit der gleichen Farbe markiert sind.
Mein Einführung eines solchen Symbols kann man einen Link besser von einem farblich markierten Text erkennen.
Das wäre doch eine tolle Sache !
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
#2 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Mich persönlich stören solche Grafiken im Textfluss eher beim lesen. Auch sieht das immer ein bisschen nach Werbung aus.
Aber wenn du möchtest kann man das recht einfach per CSS realisieren:
Siehe https://wiki.selfhtml.org/wiki/HTML/Tuto...en_kennzeichnen
So könnte das z.B. aussehen.
2
3
.xquoteable a::before {
content: '→ ';
}
Per CSS sind aber nur ASCII-Zeichen möglich. Um eine richtige Grafik anzuzeigen müsstest du das etwas komplizierter angehen.
Technik · #3 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Danke dir @Ingmar
Leider habe ich von solchen Befehlen nicht die große Ahnung
Wo muss ich diesen Befehl einarbeiten? Im CSS/SCSS unter Layout im Admin-Menü?
Ich weiß das du viel um die Ohren hast und würde aber gern Fragen, ob du mir einen Befehl erstellen könntest, wenn du mal Zeit dazu hast.
Ich weiß leider nicht, wo ich in seinem Befehl oben was wo zwischenfügen muss aus seinem Link oben...
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
#4 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
#5 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
#6 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo @Ingmar
Danke für den Tip und den Link. Ich glaub, ich habs. Nur die Farbe und Größe des Icon hinter dem Link stört mich noch ein bisschen...
Wie das ganze jetzt in meinem Testforum aussieht, seht ihr hier: www.cnh-forum.xobor.de
Er macht das Icon aber auch hinter einem Grafik-Datei eingefügtem Bild... Hmmmm....
Wenn jemand den CSS/SCSS Befehl haben möchte ? Ich füg ihn hier mal ein:
.xquoteable
a {
padding-right: 2em;
color: none;
background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22blue%22%20points%3D%222%2C5%203%2C5%203%2C3%209%2C3%209%2C9%207%2C9%207%2C10%2010%2C10%2010%2C2%202%2C2%22/%3E%3Cpolygon%20points%3D%220.5%2C10.5%203.5%2C7.5%202%2C6%205.5%2C6%205.5%2C10%204.5%2C8.5%201.5%2C11.5%22/%3E%3C/svg%3E") no-repeat right;
/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon fill="none" points="2,5 3,5 3,3 9,3 9,9 7,9 7,10 10,10 10,2 2,2"/><polygon points="0.5,10.5 3.5,7.5 2,6 5.5,6 5.5,10 4.5,8.5 1.5,11.5"/></svg> */
}
Nachtrag: Im Bezahl-Forum auf www.krone-forum.de klappt es auch super und sieht dort so aus
844er sagt DANKESCHÖN 
Fehlende PS werden durch Wahnsinn ersetzt
#7 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Nachtrag zu meinem Beitrag oben
Leider funktioniert der CSS-Befehl nicht unter Verwendung des "alten" Business Template (v4)
Unter www.caseih-forum.de geht es nicht.....
@Ingmar
Kannst du mir da vielleicht nochmal Schützenhilfe geben ???
Gruß Alfred
Fehlende PS werden durch Wahnsinn ersetzt
#8 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo 844er,
ich finde das Thema mit dem Link-Symbol auch sehr interessant und gut, aber nur, wenn das Symbol gezielt und nicht überall eingesetzt wird!
Bei mir funktioniert komischer Weise der "Unicode" von Ingmar nicht, .... schade! 
Habe in meinem Forum zufälliger Weise das Business-Template (v4) eingebaut und einiges ausprobiert!
Mit Deiner vorgegebenen "Data-Url" ist es schwierig im Business-Template die Link-Grafik zu positionieren.
Bei mir verschwindet die Grafik im Business (v4) hinter der Verlinkung.
Versucht man mit "padding" die Link-Grafik wieder nach rechts zu schieben, vergrößert sich der Abstand zum nächsten Wort (wenn es eins gibt!)
Habe eine Lösung ohne "Data-Url" gefunden.
- Man kann auch jede beliebige Grafik einsetzen, ohne noch den Data-Url-Code zu erstellen!
- Kommt in "Admin > Layout > Farben & Einstellungen > CSS > Eigener CSS Code".
- Mit "background-size" wird die Größe der Linkgrafik bestimmt.
- Mit "padding" wird der Abstand zum nächsten Wort angepasst.
2
3
4
5
6
/* Link-Symbol */
.xquoteable a {
background: url(//files.homepagemodules.de/b104774/a_256_a1b4bc38.png) center right no-repeat ;
background-size:20px auto;
padding-right:22px;
}
Bis dann und hoffentlich klappt es!
Wolfgang
#9 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo @Wolfgang
Ein ganz großes DANKESCHÖN für die Mühe die du dir gemacht hast. Da wäre ich nicht drauf gekommen.
Habe da ganz viel ausporbiert, was nicht geklappt hat. Dank deines Befehls klappt es jetzt auch in meinen Foren mit Business (v4) Template
So macht Support-Forum Spaß 
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
#10 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hab ich mir doch gedacht, dass Wolfgang sich hier noch mit einer Lösung meldet 
#11 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo
Ich habe das Symbol jetzt mal gegen ein anders Symbol 
ausgetauscht und in die CSS/SCSS des neuen Design und des alten Design eingefügt.
Hier nun nochmal die einzelnen Befehle in abgeänderter/getesteter Version für alle die das auch in ihr System einfügen wollen
CSS-Befehl für das alte Template (z. B. Business-Template v4) lautet:
/* Link-Symbol */
.xquoteable a {
background: url(https://img.icons8.com/small/16/000000/external-link.png) center right no-repeat ;
background-size:20px auto;
padding-right:22px;
}
Sieht im Business-Template v4 so aus
CSS/SCSS-Befehl für das neue Template Xobor v6:
.xquoteable
a {
padding-right: 1.5em;
color: none;
background: url("https://img.icons8.com/small/16/000000/external-link.png") center right no-repeat ;
}
Sieht dann im Beitrag unter Verwendung des Xobor v6 Template so aus
PS: Das von mir verwendete Symbol kann jederzeit durch ein anderes ausgetauscht werden. Solltet ihr ein anderes Symbol bevorzugen, so könnt ihr diese natürlich nach euren wünschen abändern.
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
#12 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo @Wolfgang @Ingmar
Ich habe doch nochmal ein Problem... Wie ich gerade gesehen habe, wird mir das eingfügte Icon für Links in Beiträgen leider nicht in der mobilen Ansicht auf dem Smartphone angezeigt....
Hier mal ein Bild in der Desktopansicht "altes Template" wo das Icon (grüner Pfeil) angezeigt wird
Hier mal ein Bild in der Mobilen-Ansicht "altes Template" wo das Icon nicht angezeigt wird
PS: Das Icon fehlt auch bei Aufruf per Handy beim "Neuen Template v6"....
Beim Aufruf des neuen Template via Laptop/PC wird mir das Icon wunderbar angezeigt...
Sorry, das ich nochmal nerve.... Wäre schön wenn ihr mir da nochmal mithelfen könnt. Benutzt werden die Befehle im letzten Beitrag.
Könnt ihr mir da vielleicht nochmal weiterhelfen....
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
#13 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo 844er,
habe da für das mobile Template etwas festgestellt....
- Hast Du zwischen den neuen V6-Templates gewechselt? Hier muss Du erneut eintragen, bitte überprüfen!
- Für die Template V1-4 muss unter "Admin > Layout > Mobil > CSS / SCSS" ein weiterer Eintrag erfolgen, damit es mobil läuft!
- Korrektur Beitrag #8:
Bildadressen ohne HTTPS: müssen unbedingt mit Anführungsstrichen eingetragen werden!
Eigentlich müsste hier eine Fehlermeldung kommen, aber das passiert nicht immer!/* Link-Symbol */
.xquoteable a {
background: url("//files.homepagemodules.de/b104774/a_256_a1b4bc38.png") center right no-repeat ;
background-size:20px auto;
padding-right:22px;
} - Wenn alles nicht läuft, Unicode-Zeichen direkt in den Text einfügen.
Vorschau zweimal anklicken, damit die Forensoftware die Unicodes umsetzt!
Sie lassen sich wie normale Zeichen in Größe und Farbe formatieren!
https://www.server.de↗
Diese Unicodes funktionieren im Forum:
↗ ↗
⬀ ⬀
⇗ ⇗
- Habe hierzu einen kleinen Beitrag geschrieben, wer Interesse hat....
External - Link - Grafik: Links deutlicher darstellen!
Bis dann und danke fürs Feedback!
Gruß
Wolfgang
#14 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo @Wolfgang
ALTER SCHWEDE !!!! Super super vielen DANK für die viele Arbeit die du dir für mich gemacht hast.
Also dafür würde ich dir echt nen Kasten Bier ausgeben wenn ich könnte
Vielen vielen lieben Dank, wenn ich da noch mit klar komme... WAHNSINN !!
Ja, ich habe die betreffenden Foren auf das neue V6-Template umgestellt. Aber noch nicht alle, da das V6 ja noch in der Beta-Phase ist, trau ich mich noch nicht so ganz..
Ich habe das mit den Anführungsstrichen gestern schon behoben, weil mir das schon aufgefallen war. Zusätzlich habe ich gestern Abend/Nach noch was anderes im CSS/SCSS V6-Template probiert, was den "Fehler" in der mobilen Ansicht via Handy glatt gelöst hat.
Ich habe gestern unter dem dem CSS-/SCSS-Befehlt für das V6-Template (siehe Beitrag #11) folgenden Befehl vor die letzte Klammer hinzugefügt, womit das tatsächlich in der Ansicht auf dem Handy geklappt hat:
content: "\f08e";
display: inline-block;
font-weight: normal !important;
font-style: normal !important;
So sieht es dann auf einem Tablett/Handy jetzt aus (www.krone-forum.de und cnh-forum.xobor.de):
Leider hat dieser zusätzliche Befehl beim Aufrufen des alten V4-Template via Handy/Tablett nicht gewünschten Erfolg gehabt.
Ich werde deinen Vorschlag aber nachher unbedingt mal ausprobieren, da mich zur Zeit mein Bandscheibenvorfall "lahm" legt...
Werde dann nochmal berichten
Vielen vielen Dank sagt 844er
Fehlende PS werden durch Wahnsinn ersetzt
#15 RE: Links in Beiträgen besser kenntlicher machen mit zusätzlicher kleiner Grafik
Hallo @Wolfgang @Ingmar
Ich habe den "Fehler" gefunden, warum mir das Icon für Links in Beiträgen unter Verwendung des v1-4 Template (altes Template) nicht in der mobilen Ansicht angezeigt wird...
Hin und wieder braucht man einfach mal eine Mütze voll Schlaf um über das Problem nochmal nachzudenken. Da hatte ich total das Brett vor dem Kopf/Denkfehler.....
Die Lösung des Problems ist ganz einfach:
Man muss -wenn man das alte Template v1-4 benutzt- den CSS/SCSS Befehl auch zusätzlich in den Einstellungen der Mobil-Ansicht eingeben (siehe Bild ) ! 
Man muss also den Befehl
/* Link-Symbol */
.xquoteable a {
background: url(" //files.homepagemodules.de/b104774/a_268_e999beb2.png") center right no-repeat ;
background-size:17px auto;
padding-right:20px;
}
an beiden Stellen im Admin-Bereich (siehe roter und grüner Pfeil im Bild oben) eintragen. Wenn ihr das macht, dann wird das Icon für Weiterführungslinks auch in der Mobilen-Ansicht via Handy/Tablett richtig angezeigt.
Das Icon (grün markiert im Befehl) kann natürlich jederzeit gegen ein anderes Icon (welche ihr hier findet: Verschiedene Linksymbole in Forum und Farbe) ausgetauscht werden. Hier ein großes Dankeschön an @Wolfgang für die Bereitstellung der Icons
Wenn man nun das alte Template v1-4 per Handy/Tablett aufruft, dann sieht das in der Mobilen-Ansicht so aus:
Wichtiger Hinweis für alle, die Ihr altes Template v1-4 auf das neue Xobor-Tempalte v6 umstellen:
Wer sein altes Template auf das neue Template umstellt, der braucht den CSS/SCSS-Befehl oben nur einmal unter
Admin/Layout/Farben&Einstellungen/CSS/SCSS
einfügen und abspeichern.
Wünsche allen viel Spaß mit dem Einfügen des Icon für Weiterführungslinks in seinem Forum. Ich habe alle meine Foren hiefür schon umgestellt.
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!