"Zitat mit Name" für die neuen Iconbar - Teil 1 Aktualisiert 02.05.21
Zitat von WolfgangIn der neuen Iconbar ist die Zitat-Funktion mit "quote" bezeichnet, jetzt auch mit Möglichkeit der Namensangabe! Mag man die englische Bezeichnung nicht, kann man das ganz leicht verändern!
In der neuen Iconbar ist die Zitat-Funktion mit "quote" bezeichnet, jetzt auch mit Möglichkeit der Namensangabe! Mag man die englische Bezeichnung nicht, kann man das ganz leicht verändern!
1. Neuen Foren-Code erstellen:
• Iconbar aufrufen! • Reiter Foren-Code anklicken! • Erweiterte Foren-Codes muss eingeblendet sein! • Alten Foren-Code [quote] ...[/quote] in "nicht sichtbar" verschieben! • Den neu erstellten Foren-Code an die richtige Position schieben!
• Es ist nur der folgende Eintrag in "Eigener CSS Code" notwendig! • In Zeile 2+3 muss evtl. die Schriftfarbe und der Hintergrund dem Forum angepasst werden!
PS: Mittlerweile verfügen die Xobor-Forum über zwei Zitat-Funktionen, einmal über "Diesen Beitrag einfügen" und eine sehr große "Erweiterte Zitatfunktion", die hier Forum bereits aktiviert sind!
Erweiterte Zitatfunktion - Aussehen verbessern - Teil 2! Aktualisiert 17.10.21
×
Erweiterte Zitatfunktion
Erweiterte Zitatfunktion
Wenn man die "erweiterte Zitatfunktion" für sich entdeckt hat, kann sie sehr nützlich sein, nur ist das Design in den Templates (v1-4), finde ich, etwas zu kurz gekommen (siehe unter Bilder vorher)! Im neuen responsive Template Xobor (v6) ist es gut gelöst!
Wie wird die "erweiterte Zitatfunktion" aktiviert?
Unter "Admin > Forum > Einstellungen > Erweiterte Zitatfunktion aktivieren" die Option auf "Ja" stellen!
Im "User-Menü" unter "Einstellungen > Forum Einstellungen > Automatische Zitate deaktivieren" auf "Nein" stellen!
Funktioniert nur im eingeloggten Zustand!
Maximierte Zitatübersicht:
Die Zitatleiste in "Beitrag bearbeiten" oder neuen "Beitrag schreiben":
Das Aussehen kann über ein CSS-Eintrag in "Eigener CSS Code" bestimmt werden!"
Zeile 2-5 passt das Zitat im Beitrag an!
Zeile 8-27 ist für das Aussehen des Zitat-Buttons, der Zitatleiste, für die minimierten und maximierten Zitatübersicht zuständig
Durch Zeile 24 wird die Scroll-Leiste in der maximierten Zitatübersicht erst dann eingeblendet, wenn sie gebraucht wird!
In den Zeile 8-27 muss "background" und "color" evtl. dem Forum angepasst werden! Am besten ist es, nach und nach "background" und "color" zu löschen und schauen, wie die Farben passen!
Zitate XXL mit Spoiler-Button und Scroll-Funktion - Teil 3 Aktualisiert 17.10.21
Zitate sind sehr gut, um darauf hinzuweisen, um welchen Beitrag es geht! Gut in Beiträgen mit großer Beteiligung! Sind Zitate sehr groß ausfallen und möchte man die Übersicht behalten, bleibt nur ein manuelle Kürzung übrig. Es gibt auch eine komfortable Lösung von creator, die er im Support für das Xobor (v6) vorgestellt hat! Hier wird das Zitat mit einer kleinen, festgelegten Höhe angezeigt! Ein Klick auf die Buttonleiste, gibt das Zitat in voller Größe und Länge wieder! Ein weiterer Klick verkleinert das Zitat! Besonders hilfreich zeigt sich das Skript in der mobilen Ansicht, wo alles auf kleinsten Raum angezeigt werden soll!
Eine unschöne Eigenart der Spoiler-Funktion sind die Positionen nach dem Öffnen und Schließen! Hat man einen langen Beitrag oder langes Zitat, öffnet den Spoiler und scrollt ihn bis zum Ende, findet man sich nach dem Schließen mitten im Beitrag wieder! Abhilfe schafft hier eine automatisches scrollen zur Lesehöhe!
Zitate mit Spoiler-Button und scrollen zur Lesehöhe Das folgende Skript baut auf das Skript von Creator auf - Danke dafür!
Zitate im V6 und Zitatbreite 100% - Mit Spoiler-Button und scrollen zur Lesehöhe - Zugeklappt
Zitate mit Spoiler-Button und scrollen zur Lesehöhe - Zugeklappt
Zitate mit Spoiler-Button und scrollen zur Lesehöhe - Zugeklappt
Zitate mit Spoiler-Button und scrollen zur Lesehöhe - Aufgegeklappt
Zitate ohne Spoiler-Button - Höhe Zitat, kleiner 200px
Die CSS und das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 9+54 funktioniert das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile!
Die Zeilen 2+3 sorgen dafür, dass beide Button gleich aussehen und am unteren Rand der Zitate platziert werden!
Durch Zeile 18-22 wird die Zitat-Funktion erst aktiv, wenn Zitate eine Höhe von 200px überschreiten! Soll die Höhe verändert werden, muss der Wert von "200px" in den Zeilen 2 (160px), 18,19 und 36 gleichermaßen verändert werden!
In Zeile 50-52 steckt das Scrollen zur Lesehöhe! Der Wert "-100" bestimmt den Abstand zum oberen Rand. Der Wert "500" bestimmt die Scrollgeschwindigkeit!
Info! Falls die Button-Leiste keine Farbe annehmen will, "background" in Zeile 2 mit "!important" versehen (background: #f0f1f2 !important)."
Die CSS und das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Das Skript funktioniert auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile!
Die Zeilen 2+3 sorgen dafür, dass beide Button gleich aussehen und am unteren Rand der Zitate platziert werden!
Zeile 5-10 sorgen für die reduzierte Form der Zitate.
Info! Falls die Button-Leiste keine Farbe annehmen will, "background" in Zeile 2 mit "!important" versehen (background: #f0f1f2 !important)."
Das Skript kann in die "Kopf- oder Fußzeile" oder besser als Plugin in "Untere Leiste - header" kopiert werden!
Durch Zeile 23-27 wird die Spoiler-Funktion erst aktiv, wenn Zitate eine Höhe von 200px überschreiten! Soll die Höhe verändert werden, muss der Wert von "200" in den Zeilen 2, 23, 24+41 gleichermaßen verändert werden!
In Zeile 56 steckt die Scroll-Funktion! Der Wert "-100" bestimmt den Abstand zum oberen Rand. Der Wert "500" bestimmt die Scrollgeschwindigkeit!
Zitate mit Scrollbalken rechts - Komfortabel - Zitatname beim Scrollen immer zu sehen! - Hier Xobor (v6)
Das Skript braucht nicht als Plugin installiert werden, wird nur nach Eigenes Javascript kopiert! Durch den Eintrag von Zeile 3+7 funktioniert das Skript auch in Eigene Fußzeile , HTML vor Navigation oder Eigene Kopfzeile!
[b]Das Test-Skript in Aktion![/b] [quote="User X - Zitat höher 200px"]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [rot]Text[/rot] [/quote]
[b]Das Test-Skript in Aktion![/b] [quote="User X - Zitat höher 200px"]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [blau]Text[/blau] [/quote]
[b]Das Test-Skript in Aktion[/b] [quote="User X - Zitat kleiner 200px"]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [/quote]
[b]Das Test-Skript in Aktion![/b] [quote=""|p4079]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [blau]Text Text Text Text[/blau]
[b]Mein Script:[/b]
[code]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [/code][/quote]
[spoiler=Zitate im Spoiler] [b]Das Test-Skript in Aktion![/b] [quote="User X - Zitat höher 200px"]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [rot]Text[/rot] [/quote]
[b]Das Test-Skript in Aktion![/b] [quote="User X - Zitat höher 200px"]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [blau]Text[/blau] [/quote]
[b]Das Test-Skript in Aktion[/b] [quote="User X - Zitat kleiner 200px"]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [/quote]
[b]Das Test-Skript in Aktion![/b] [quote=""|p4079]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [blau]Text Text Text Text[/blau]
[b]Mein Script:[/b]
[code]Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text [/code][/quote] [/spoiler]
Tolle Sache !!! Vielen lieben Dank an alle, die an dieser Verbesserung beteiligt waren.
Es gibt leider aber auch ein aber.....
Habe das Script mal gleich in eines meiner Foren eingebaut. Funktioniert gut, ABER leider ist der untere Balken mit Mouseover-Effekt versehen. Sieht dann bei mir so aus:
Ich benutze das v6-Template
Das sieht optisch nicht gut aus... Was muss ich da im Script abändern, damit der Balken eine Farbe hat. Wenn ich mit der Maus drüber fahre, dann erscheint ein grauer Balken. Geh ich mit der Maus wieder runter, ist der Balken durchsichtig.
Fehlersuche: Zitate XXL mit Spoiler-Button und Scroll-Funktion
Hallo Alfred, so wie es aussieht, wird die CSS nicht richtig erkannt! Was ist, wenn Du in Zeile 3 den Hintergrund nochmal mit "background: #f0f1f2 !important" versiehst! Sollte so auf jeden Fall funktionieren! Allerdings geht der Hover-Effekt verloren!
Nachtrag: Ist btn-light richtig eingetragen? Hast Du für "btn-light" in "CSS/SCSS" etwas eingetragen? Vielleicht hilft es, das Skript erneut zu kopieren! Ich hatte zwischendurch schon mal etwas geändert und vielleicht nicht sofort gesperrt!
Danke für die schnelle Antwort und vor allem die schnelle Hilfe.
Zitat von Wolfgang im Beitrag #6Was ist, wenn Du in Zeile 3 den Hintergrund nochmal mit "background: #f0f1f2 !important" versiehst! ...
Das war die Ursache bei mir... Mir fehlte der !important - Befehl im Script. Jetzt ist alles tuti Großes Dankeschön an dich und alle Beteiligten. Ihr seit spitze !
Zitate XXL mit Spoiler-Button und Scrollbalken rechts
Bei den Zitaten gibt es zwei Variationen, das manuell erstellte Zitat oder das per Auswahl (Erweitertes Zitat)! Deswegen musste ich in Beitrag #4 den Punkt 3.3 nochmals überarbeiten, um beide Zitat-Typen zu berücksichtigen! Habe noch zusätzlich das Test-Skript unter Punkt 4. erweitert!
Zitate in verschiedenen Variationen mit Spoiler-Button und Scroll-Funktion - Teil 3
Durch das viele Testen ist mir aufgefallen, dass sich Zitate beim Minimieren, Maximieren und in Spoilern besonders verhalten! Hier war mal wieder ein zusätzlich Tun erforderlich. Die Lösungen hat hierfür creator geliefert!
Echt klasse!
Jetzt haben die Zitate immer eine gleiche Höhe, egal ob sie minimiert, maximiert oder mobil angesehen werden! Auch funktionieren sie jetzt in Spoilern!
Ich finde, dass das Aussehen jeder einzelnen Variation ihren Reiz hat. Es stehen jetzt für alle Templates die Variation mit reduzierter und 100iger Zitatbreite zur Verfügung, mit Spoiler-Leiste oder Scroll-Balken rechts!