Hilfe-Datei für die gesamte Iconbar! Aktualisiert 28.08.22
• Möchte man für die gesamte Iconbar mit einer Hilfe ausstatten, werden Aufklappmenüs und Scroll-Hilfen notwendig! • Die folgende Hilfe lässt sich über das "Fragezeichen-Icon" öffnen und schließen, auch über das "X"! • Die Scrollfunktion wird automatisch eingeschaltet, wenn sie benötigt wird. Sie ist von der Höhe des Hilfe-Fensters abhängig! • Die Breite des Fensters passt sich der Überschrift und der maximal eingestellten Breite des Textes an! • Mit zusätzlichen Überschriften für die einzelnen Hilfe-Themen • Mit gegenseitiger Auslösung!
Installation für alle Template & Mobil
Einbau-Anleitung:
Iconbar öffnen unter "Amin > Layout > Iconbar"
Reiter "HTML" anklicken und das neue Script unter "HTML" eintragen!
Namen vergeben (z.B.: Zentral-Hilfe) und unter "Name" eintragen!
Speichern nicht vergessen!
"Hilfe-Datei" am Ende der Iconbar schieben!
In Zeile 2 kann das Hilfe-Icon ausgerichtet werden!
In Zeile 12+16 kann das Hilfe-Icon ausgetauscht werden!
In Zeile 3 wird das Hilfe-Fenster formatiert und kann beliebig angepasst werden!
In Zeile 5 wird die Schriftgröße des Textes, in Zeile 7 die der Überschrift eingestellt!
In Zeile 16 kann die Haupt-Überschrift angepasst werden!
In Zeile 7 löscht margin:0px den Absatz nach der Überschrift (nur fürs Standard-Template!)
In Zeile 20-62 kann der Hilfe-Text gestaltet werden. Hier, einschließlich "Glow"!
<h4>Wie funktioniert die Farbauswahl?</h4> <ul> <li>Texte können mit den unterschiedlichsten Farben dargestellt werde!</li> <li><font color="#ee8000">Zuerst</font> wird der Text markiert, der eingefärbt werden soll!</li> <li>Die Textfarbe kann durch Anklicken der oberen Standardfarben verändert werden!</li> <li>Soll der Text mit einer besonderen Farbe versehen werden, wird das mit einem Klick in die große Farbauswahl durchgeführt!</li> <li>Im rechten Farbfeld kann die aktuelle Farbe eingesehen werden!</li> <li>Die zuletzt genutzte Farbe wird im unteren Farbfeld gespeichert und kann durch ein Mausklick erneut verwendet werden!</li> <li>Zusätzlich wird im unteren Feld zur Farbe der Farbcode angezeigt!</li> <br> </ul>
<h4>Wie funktioniert die Auswahl mit den Leuchtfarben "Glow"?</h4> <ul> <li>Texte können mit leuchtenden Farben dargestellt werde!</li> <li><font color="#ee8000">Zuerst</font> wird auch hier der Text markiert, der eingefärbt werden soll!</li> <li>Die Glow-Textfarbe kann durch Anklicken der Glow-Farben verändert werden!</li> <li>Zur Zeit stehen sieben unterschiedliche Leucht-Farben zur Verfügung!</li> <br> </ul>
<h4>Was kann der Multidialog-Assistent?</h4>
<ul> <li>.......</li> <li>.......</li> <br> </ul>
<h4>Was kann man mit den Sonderzeichen alles machen?</h4>
<ul> <li>.......</li> <li>.......</li> <br> </ul>
<h4>Was ist mit den DropDown-Menüs alles möglich?</h4> <ul> <li>.......</li> <li>.......</li> <br> </ul>
ich habe soeben Deine "Zentrale Hilfedatei" in meinem Standard-Testforum umgesetzt. Es funktioniert wie eine Eins und meine Mitglieder werden sich sehr darüber freuen. Du hast Dich mal wieder selbst übertroffen! Dankeschön für Deine Mühe, Deine Ausdauer und Deine unendliche Geduld, Lösungen für alle zu finden.
Die große Farbauswahl in den vorangegangenen Beiträgen punktet mit Ihren Funktionen und den super feinen Abstufungen der Farben! Sie ist allerdings recht groß und reagiert auf ein Verschieben (draggable) träge! Nicht immer ist die große Anzahl der Farben notwendig und wird auch nicht in jedem Forum gebraucht!
In der folgenden Version sind die Farben auf 40 große Farb-Button beschränkt, dass in den meisten Fällen völlig ausreicht! Hinzu kommen noch 7 Button mit "Leuchtfarben"! Alle Button sind zur besseren Mouseover-Erkennung animiert! Das folgende Skript arbeitet gut mit "Xobor Superklick" zusammen und funktioniert auch in der mobilen Version!
Große Farbauswahl ohne "Xobor Superklick" für die Templates (v1-4)
Große Farbauswahl mit "Xobor Superklick" für die Templates (v1-4)
Große Farbauswahl im neuen resposive Template Xobor (v6)
Gruppe in der Iconbar anlegen, Namen vergeben: z.B. Farbauswahl und Größe auf 350px stellen!
"Weitere Einstellungen" anklicken, "Versatz" auf ca. -330px, Rechte vergeben!
Reiter "HTML" anklicken.
Namen vergeben z.B. "Color".
Unter "HTML" den folgenden Code eintragen.
Zusätzliche Foren-Codes sind nicht erforderlich!
• In Zeile 3 lässt sich die Größe und das Aussehen der Farb-Button anpassen. • In Zeile 4+8 sind die Hover-Animationen untergebracht. • Die Zeilen 12-55 sind für die Farb-Button zuständig. • Die Zeilen 60-66 sind für die Leuchtfarben zuständig. • Die Zeilen 11+59 mit data-dismiss="modal" sind für das Schließen im (v6) notwendig. • Das Menü kann beliebig erweitert, reduziert und farblich angepasst werden!
HAMMER !! Funktioniert sehr gut im v6-Template. ENDLICH hast du meinem Forum mehr Farbe in´s Leben gebracht Vielen Dank für die viele Arbeit, die sich sehen lassen kann !
Gruppe in der Iconbar anlegen, Namen vergeben: z.B. Farbauswahl und Größe auf 350px stellen!
"Weitere Einstellungen" anklicken, "Versatz" auf ca. -330px, Rechte vergeben!
Reiter "HTML" anklicken.
Namen vergeben z.B. "Color".
Unter "HTML" den folgenden Code eintragen.
Zusätzliche Foren-Codes sind nicht erforderlich!
• In Zeile 3 lässt sich die Größe und das Aussehen der Farb-Button anpassen. • In Zeile 4+8 sind die Hover-Animationen untergebracht. • Zeile 10+11 sind für den Mauszeiger "Radio-Button". • Die Zeilen 21-64 sind für die Farb-Button zuständig. • Die Zeilen 69-75 sind für die Leuchtfarben zuständig. • Die Zeilen 20+68 mit data-dismiss="modal" sind für das Schließen im (v6) notwendig. • In Zeile 16+17 befinden sich die Button "Schrift" und "Hintergrund"! • Zeile 80-121 sorgen für die Umschaltung auf "Background-Color" • Das Menü kann beliebig erweitert, reduziert und farblich angepasst werden!
Große Farbauswahl Deluxe mit Background-Color! - Teil 6
Es ist immer Geschmacksache, wie das Forum aussehen soll, welche Funktionen es erfüllen soll und wen man ansprechen will! In der folgenden Version ist es möglich die Große Farbauswahl DELUXE mit dem schon beschriebenen Hintergrund-Button auszurüsten! Es können nach Belieben Wörter oder ganze Sätze farblich markiert werden! Das Skript gleicht dem aus Beitrag #3, nur gibt es auch hier einen Button "Schrift" + "Hintergrund" mehr.
Große Farbauswahl ohne "Xobor Superklick" für die Templates (v1-4)
Große Farbauswahl mit "Xobor Superklick" für die Templates (v1-4)
Große Farbauswahl im neuen responsiven Template Xobor (v6)
var H = W = 63; for (var Y = 0; Y <= H; Y++){ // 'height',..... Die Höhe eines Pixels bestimmt indirekt die Gesamthöhe des Farbauswahlfensters var row = $('<tr></tr>').attr('height', 3); var j = Math.round(Y * (510 / (H + 1)) - 255);
for (var X = 0; X <= W; X++){ var i = Math.round(X * (total / W)); var R = aR[i] - j;
if (R < 0) R = 0; if (R > 255 || isNaN(R)) R = 255; var G = aG[i] - j; if (G < 0) G = 0; if (G > 255 || isNaN(G)) G = 255; var B = aB[i] - j; if (B < 0) B = 0; if (B > 255 || isNaN(B)) B = 255; // 'width',..... Die Breite eines Pixels bestimmt indirekt die Gesamtbreite des Farbauswahlfensters var column = $('<td></td>').attr('width', 5).attr('bgcolor', '#' + jl[R] + jl[G] + jl[B]).css('background-color','#' + jl[R] + jl[G] + jl[B]);
/* https://www.interclasse.com/scripts/colorpicker.php */ /* edited for compatibility with the xobor forum software */
function switchColorPicker() {
var artabus = ''; var total = 1657; var aR = new Array(total); var aG = new Array(total); var aB = new Array(total); for (var i = 0; i < 256; i++) { aR[i + 510] = aR[i + 765] = aG[i + 1020] = aG[i + 5 * 255] = aB[i] = aB[i + 255] = 0; aR[510 - i] = aR[i + 1020] = aG[i] = aG[1020 - i] = aB[i + 510] = aB[1530 - i] = i; aR[i] = aR[1530 - i] = aG[i + 255] = aG[i + 510] = aB[i + 765] = aB[i + 1020] = 255; if (i < 255) { aR[i / 2 + 1530] = 127; aG[i / 2 + 1530] = 127; aB[i / 2 + 1530] = 127; } }
var hexbase = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'); var jl = new Array(); for (var x = 0; x < 16; x++) { for (var y = 0; y < 16; y++) { jl.push(hexbase[x] + hexbase[y]); } }
var row = $('<tr></tr>').css('height', 3); var j = Math.round(Y * (510 / (H + 1)) - 255);
for (var X = 0; X <= W; X++) { var i = Math.round(X * (total / W)); var R = aR[i] - j;
if (R < 0) R = 0; if (R > 255 || isNaN(R)) R = 255; var G = aG[i] - j; if (G < 0) G = 0; if (G > 255 || isNaN(G)) G = 255; var B = aB[i] - j; if (B < 0) B = 0; if (B > 255 || isNaN(B)) B = 255;
In dieser Version wird der Cursor an der richtigen Stelle eingefügt.
@Wolfgang Neu ist die Funktion colorMinInsertBBCodeFromModal, die statt xob_insert verwendet wird. Diese Funktion wartet im v6, bis das Modal-Fenster geschlossen wurde, und ruft erst dann xob_insert auf. Du musst colorMinInsertBBCodeFromModal zusätzlich mit dem keyword this aufrufen, also beispielsweise colorMinInsertBBCodeFromModal(this, "[rot]", "[/rot]")
/* https://www.interclasse.com/scripts/colorpicker.php */ /* edited for compatibility with the xobor forum software */
function switchColorPicker() {
var artabus = ''; var total = 1657; var aR = new Array(total); var aG = new Array(total); var aB = new Array(total); for (var i = 0; i < 256; i++) { aR[i + 510] = aR[i + 765] = aG[i + 1020] = aG[i + 5 * 255] = aB[i] = aB[i + 255] = 0; aR[510 - i] = aR[i + 1020] = aG[i] = aG[1020 - i] = aB[i + 510] = aB[1530 - i] = i; aR[i] = aR[1530 - i] = aG[i + 255] = aG[i + 510] = aB[i + 765] = aB[i + 1020] = 255; if (i < 255) { aR[i / 2 + 1530] = 127; aG[i / 2 + 1530] = 127; aB[i / 2 + 1530] = 127; } }
var hexbase = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'); var jl = new Array(); for (var x = 0; x < 16; x++) { for (var y = 0; y < 16; y++) { jl.push(hexbase[x] + hexbase[y]); } }
var row = $('<tr></tr>').css('height', 3); var j = Math.round(Y * (510 / (H + 1)) - 255);
for (var X = 0; X <= W; X++) { var i = Math.round(X * (total / W)); var R = aR[i] - j;
if (R < 0) R = 0; if (R > 255 || isNaN(R)) R = 255; var G = aG[i] - j; if (G < 0) G = 0; if (G > 255 || isNaN(G)) G = 255; var B = aB[i] - j; if (B < 0) B = 0; if (B > 255 || isNaN(B)) B = 255;