Große Farbauswahl / Alte Version! - Teil 1 Aktualisiert 26.08.22
Diese super Farbauswahl hat viel Interesse geweckt und viele Liebhaber gefunden. Mit dem folgenden Script und der Anleitung, kann der Color-Picker in allen Xobor-Templates und der neuen Iconbar verwendet werden. Das Script wurde von "Ingmar" aus dem "Support" überarbeitet und läuft fehlerfrei.
In dem folgenden Script kommen zum Color-Picker noch 7 Standard-Farben zur Auswahl hinzu. Damit beim erstmaligen Öffnen die Farbpalette nicht in der Mitte "schwebt", wird die Farbauswahlpalette ganz links angeordnet.
Achtung! Das Script ist veraltet, funktioniert auch in sehr alten Browsern! Wenn die Funktion in alten Browsern nicht gewährleistet sein muss, bitte auf die nachfolgenden Beiträge #2, #3, #13, #15, #16 zugreifen!
Der neue (alte) Color-Picker:
Installation für alle Templates & Mobil
Einbau-Anleitung:
Iconbar öffnen unter "Amin > Layout > Iconbar"
Reiter "Farben" anklicken, Breite auf 250px einstellen!
"Weitere Einstellungen" anklicken, "Versatz" auf -130px einstellen, Rechte vergeben!
Speichern!
Reiter "HTML" anklicken und das neue Script unter "HTML" eintragen
Namen vergeben (z.B.: Farbpalette 1) und unter "Name" eintragen
Speichern!
"HTML" Farbpalette in die Gruppe "Farben" ans Ende schieben!
<script language="Javascript" type="text/javascript"> addColorPicker(); var ns6=document.getElementById&&!document.all; var ie=document.all; // https://www.interclasse.com/scripts/colorpicker.php var artabus=''; function addColorPicker() { var total=1657; var X=Y=j=R=G=B=0; 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 i=0; var jl=new Array(); for (x=0;x<16;x++) for (y=0;y<16;y++) jl[i++]=hexbase[x]+hexbase[y];
var colortable = '<'+'table border="0" cellspacing="0" cellpadding="0" onmouseover="showColor(event);" onclick="pickColor();">';
} function pickColor() { var jla=document.getElementById('chosenColor'); jla.innerHTML=artabus; jla.style.backgroundColor=artabus; xob_insert('[style=color:'+artabus+']','[/style]');
} function showColor(e){ source=ie?event.srcElement:e.target; if(source.tagName=="TABLE")return; while(source.tagName!="TD" && source.tagName!="HTML")source=ns6?source.parentNode:source.parentElement; document.getElementById('previewColor').style.backgroundColor=artabus=source.bgColor; } function lastColor(choose) { if (choose.innerHTML != "") { xob_insert('[style=color:'+choose.innerHTML+']','[/style]');
Super Color-Picker mit vergrößertem Auswahlbereich - Teil 2 Aktualisiert 26.08.22
Das Script wurde dieses mal von Florian überarbeitet und läuft ebenso fehlerfrei. Ein Plus ist die Verwendung von Schrift-Komplementärfarben in der unteren Farbauswahlleiste. Dadurch ist der hier eingetragene Farb-Code immer gut lesbar!
Mir persönlich war die Farbpalette immer zu klein! In der folgenden Anleitung ist Florians Script verbaut und die Farbpalette um einiges größer. Die Auswahl und Differenzierung der Farben fällt hier leichter!
Installation für alle Template & Mobil
Einbau-Anleitung:
Iconbar öffnen unter "Amin > Layout > Iconbar"
Reiter "Farben" anklicken, Breite auf 350px einstellen!
"Weitere Einstellungen" anklicken, "Versatz" auf -230px einstellen, Rechte vergeben!
Speichern!
Reiter "HTML" anklicken und das neue Script unter "HTML" eintragen
Namen vergeben (z.B.: Farbpalette 2) und unter "Name" eintragen
Speichern!
"HTML" Farbpalette in die Gruppe "Farben" ans Ende schieben!
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]);
Große Farbauswahl / Super Color-Picker - Mit Glow-Effekt erweitert! Teil 3 Aktualisiert 17.02.19
Der Super Color-Picker bietet eine gute Möglichkeit, den Glow-Effekt unterzubringen! Man braucht nur wie im Beitrag Glow - Leuchtender Text mit CSS3 "text-shadow" - Teil 1 und "Einbau in die Iconbar in Gruppe Farben" verfahren!
Installation für alle Template & Mobil
Einbau-Anleitung:
Iconbar öffnen unter "Amin > Layout > Iconbar"
Reiter "Farben" anklicken, Breite auf 400px einstellen!
"Weitere Einstellungen" anklicken, "Versatz" auf -330px einstellen, Rechte vergeben!
Speichern!
Reiter "HTML" anklicken und das neue Script unter "HTML" eintragen
Namen vergeben (z.B.: Farbpalette 3) und unter "Name" eintragen
Speichern!
"HTML" Farbpalette in die Gruppe "Farben" ans Ende schieben!
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]);
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]);
Super Color-Picker nach oben öffnen! Aktualisiert 26.08.22
Will man nur das Menü mit der Farbpalette nach oben öffnen, geht das sogar über Eigener CSS Code!
Installation nur für die Template (v1-4)
Einbau-Anleitung:
• Rechte Maustaste auf Menü-Icon! • ID unter "Element untersuchen" oder "Untersuchen" finden! • id="xob_sub_..." (hier 70) suchen und wie folgt in die CSS schreiben! • Der negative Wert von "margin-top" muss so angepasst werden, dass der untere Rand des geöffneten Menüs gerade noch das Menü-Icon berührt! • Das Template wird nicht verändert!
Du hast Dich selbst übertroffen, es funktioniert nun alles wunderbar! Es sind keine Änderungen an den Templates mehr nötig und die Farben werden sowohl bei einem neuen Beitrag sowie bei einer Beitragsänderung angezeigt.
Hier der Beweis:
Mein Farbpicker ist auf die Bedürfnisse meiner Mitglieder zugeschnitten. Die Anzeige erfolgt über dem Icon und der Hintergrund ist auch angepaßt.
Ich habe mir nun den fürs Standard-Template aktualisierten Colorpicker-Code in die Iconbar eingefügt, und tatsächlich: Es funktioniert jetzt einwandfrei! Super! Vielen herzlichen Dank, lieber Wolfgang! Sehr erfreulich, dass das nun so schön funktioniert!
Ich verwende in allen meinen Foren das Standard-Template.
Hilfe-Datei für den Super Color-Picker! Aktualisiert 28.08.22
Es kann auch sinnvoll sein, in Form von Hilfe-Dateien den Color-Picker aufzurüsten und mehr Informationen anbieten, besonders dann, wenn er mit vielen Funktionen ausgerüstet ist! Die folgende Hilfe lässt sich über ein "Fragezeichen-Icon" öffnen und schließen. Zusätzlich ist ein Schließen über das bekannte "X" möglich!
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.: Hilfe) und unter "Name" eintragen!
Speichern nicht vergessen!
"Hilfe-Datei" in die Gruppe "Farben" unter die Standard-Farben schieben!
In Zeile 10 kann das Hilfe-Icon ausgetauscht werden!
In Zeile 3 wird das Info-Fenster formatiert und kann beliebig angepasst werden!
In Zeile 4 wird die Schriftgröße eingestellt!
In Zeile 15-36 kann der Hilfe-Text gestaltet werden. Hier, einschließlich "Glow"!
<h5>Wie funktioniert die Farbauswahl?</h5> <ul> <li>Texte können mit den unterschiedlichsten Farben dargestellt werde!<br></li> <li><b>Zuerst</b> 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> </ul>
<br>
<h5>Wie funktioniert die Auswahl mit den Leuchtfarben "Glow"?</h5> <ul> <li>Texte können mit leuchtenden Farben dargestellt werde!</li> <li><b>Zuerst</b> 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> </ul>
Sehr große Hilfe-Datei für den Super Color-Picker! Aktualisiert 28.08.22
Fällt die Hilfe sehr groß aus und soll das Hilfe-Fenster klein bleiben, sind noch zusätzliche Themen-Spoiler nötig, die jeweils ein Hilfe-Thema öffnen! Die folgende Hilfe lässt sich auch hier über ein "Fragezeichen-Icon" öffnen und schließen. Auch über das "X" ist ein Schließen möglich! Mit Scroll-Funktion, mit zusätzliche Überschrift und automatischer Anpassung der Fensterbreite!
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.: Hilfe) und unter "Name" eintragen!
Speichern nicht vergessen!
"Hilfe-Datei" in die Gruppe "Farben" unter die Standard-Farben schieben!
In Zeile 11+12 kann das Hilfe-Icon ausgetauscht werden!
In Zeile 2 wird das Info-Fenster formatiert und kann beliebig angepasst werden!
In Zeile 4 wird die Schriftgröße eingestellt!
In Zeile 18-36 kann der Hilfe-Text gestaltet werden. Hier, einschließlich "Glow"!
<h5>Wie funktioniert die Farbauswahl?</h5> <ul> <li>Texte können mit den unterschiedlichsten Farben dargestellt werde!</li> <li><b>Zuerst</b> 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> </ul>
<div style="clear:both;"></div>
<h5>Wie funktionieren die Leuchtfarben "Glow"?</h5> <ul><li>Texte können mit leuchtenden Farben dargestellt werde!</li> <li><b>Zuerst</b> 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> </ul>