Forum - Hilfe-Datei für die gesamte Iconbar!

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) � Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6

Seite 2 von 3 � Seite 1 2 3 Seite �

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 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 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

#11 | Hilfe-Datei für die gesamte Iconbar! datum

05.04.2019 00:26 (zuletzt bearbeitet: 05.10.2019 22:59)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

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"!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<style>
#icon_help_div_zentral {margin-left:5px; }
#icon_help_zentral {display: none; position: fixed;top:300px;margin:auto;color#000000;font-size:18px;background: #ffffff; color:#383838; padding:10px; border:5px double #000000; border-radius:5px; z-index:99999; text-align:left;font-weight:bold; cursor: default;} 
#icon_help_scroll_zentral {max-height:220px; overflow-y: auto;text-align:left;max-width: 500px;white-space: normal !important;margin-top:5px;}
#icon_help_scroll_zentral ul {font-size:13px; display: none;margin-left:20px;line-height:20px;background: #ffffff;}
#icon_help_scroll_zentral li {float:none;}
#icon_help_scroll_zentral h4:hover {color:#901000;}
#icon_help_scroll_zentral h4 {font-size:13px;color:#000000;padding:3px 0;margin:0px; cursor:pointer;}
#icon_help_close_div_zentral {float:right;font-size:14px;padding-right:2px;font-weight:bold; cursor:pointer;}
</style>
 
<div class="xob_icon_cont" id="icon_help_div_zentral"><span><img class="xob_icon xob_icon_on" src="//files.homepagemodules.de/b2001010/a_248.png" title="Zentrale Hilfe f&#252;r die Iconbar"></span>
<div id="icon_help_zentral">
<div id="icon_help_close_div_zentral">X</div>
 
<img src="//files.homepagemodules.de/b2001010/a_248.png"> <u>Hilfe Iconbar</u>
<br>
<div id="icon_help_scroll_zentral">
 
<h4>Wie funktioniert die Farbauswahl?</h4>
<ul>
<li>Texte k&#246;nnen mit den unterschiedlichsten Farben dargestellt werde!</li>
<li><font color="#ee8000">Zuerst</font> wird der Text markiert, der eingef&#228;rbt werden soll!</li>
<li>Die Textfarbe kann durch Anklicken der oberen Standardfarben ver&#228;ndert werden!</li>
<li>Soll der Text mit einer besonderen Farbe versehen werden,  wird das mit einem Klick in die gro&#223;e Farbauswahl durchgef&#252;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&#228;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&#246;nnen mit leuchtenden Farben dargestellt werde!</li>
<li><font color="#ee8000">Zuerst</font> wird auch hier der Text markiert, der eingef&#228;rbt werden soll!</li>
<li>Die Glow-Textfarbe kann durch Anklicken der Glow-Farben ver&#228;ndert werden!</li>
<li>Zur Zeit stehen sieben unterschiedliche Leucht-Farben zur Verf&#252;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&#252;s alles m&#246;glich?</h4>
<ul>
<li>.......</li>
<li>.......</li>
<br>
</ul>
 
</div>
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
$('#icon_help_div_zentral span img').on('click',function(){
$('#icon_help_zentral').toggle();
$(".page_user #icon_help_zentral").length();
});
 
$('#icon_help_close_div_zentral').on('click',function(){
$('#icon_help_zentral').hide();
});
 
$('#icon_help_scroll_zentral h4').on('click',function(){
$('#icon_help_scroll_zentral h4').next().hide(1);
$(this).next().toggle();
$(".page_user #icon_help_scroll_zentral").length();
 
// F&#252;r Verschachtelungen von Aufz&#228;hlungen!
$('#icon_help_zentral ul ul').show();
});
 
});
</script>
 

Schlie�en

Bis dann, viel Spaß beim Einbau!
Wolfgang

Hans58 und nobody finden das Top!

Antworten

#12 | RE: Hilfe-Datei für den super Color-Picker! datum

05.04.2019 10:46

Lieber Wolfgang,

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.

Wolfgang findet das Top!

Antworten

#13 | Große Farbauswahl mit festen Farben datum

14.03.2021 00:44 (zuletzt bearbeitet: 25.03.2021 21:00)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Große Farbauswahl mit festen Farben - Teil 4!

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)

Schlie�en

Installation für alle Template & Mobil

Einbau-Anleitung:

Iconbar öffnen unter "Amin > Layout > Iconbar"
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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<style>
#colormin_on {padding:5px 5px 0 6px;}
#colormin_on div {display:inline-block !important;width:25px; height:25px;margin:2px;border:1px solid #000000;border-radius:2px;text-align:left !important; cursor:pointer;}
#colormin_on div:hover {border-radius:50%;transition: border-radius 0.2s;}
 
#colormin_light {padding-left:5px;}
#colormin_light div {display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
</style>
 
<div id="colormin_on" data-dismiss="modal">
<div onclick="xob_insert ('[style=color:#000000;]','[/style]')" style="background-color: #000000" title="Schwarz">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993300;]','[/style]')" style="background-color: #993300" title="Orange dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333300;]','[/style]')" style="background-color: #333300" title="Olivegr&#252;n dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003300;]','[/style]')" style="background-color: #003300" title="Gr&#252;n dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003366;]','[/style]')" style="background-color: #003366" title="Himmelblau dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#000080;]','[/style]')" style="background-color: #000080" title="Marineblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333399;]','[/style]')" style="background-color: #333399" title="Indigo">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333333;]','[/style]')" style="background-color: #333333" title="Dunkelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#800000;]','[/style]')" style="background-color: #800000" title="Kastanie">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9000;]','[/style]')" style="background-color: #FF9000" title="Orange">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808000;]','[/style]')" style="background-color: #808000" title="Olivegr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008000;]','[/style]')" style="background-color: #008000" title="Gr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008080;]','[/style]')" style="background-color: #008080" title="Blaugr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#0000FF;]','[/style]')" style="background-color: #0000FF" title="Blau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#666699;]','[/style]')" style="background-color: #666699" title="Graublau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808080;]','[/style]')" style="background-color: #808080" title="Grau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#BA2F34;]','[/style]')" style="background-color: #BA2F34" title="Rot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9900;]','[/style]')" style="background-color: #FF9900" title="Bernstein">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CC00;]','[/style]')" style="background-color: #99CC00" title="Gelbgr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#339966;]','[/style]')" style="background-color: #339966" title="Meeresgr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#33CCCC;]','[/style]')" style="background-color: #33CCCC" title="T&#252;rkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#3366FF;]','[/style]')" style="background-color: #3366FF" title="K&#246;nigsblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#800080;]','[/style]')" style="background-color: #800080" title="Lila">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#999999;]','[/style]')" style="background-color: #999999" title="Mittelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF00FF;]','[/style]')" style="background-color: #FF00FF" title="Magenta">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC00;]','[/style]')" style="background-color: #FFCC00" title="Gold">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF00;]','[/style]')" style="background-color: #FFFF00" title="Gelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FF00;]','[/style]')" style="background-color: #00FF00" title="Limone">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FFFF;]','[/style]')" style="background-color: #00FFFF" title="Aqua">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00CCFF;]','[/style]')" style="background-color: #00CCFF" title="Meeresblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993366;]','[/style]')" style="background-color: #993366" title="Violettrot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCCCCC;]','[/style]')" style="background-color: #CCCCCC" title="Hellgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF99CC;]','[/style]')" style="background-color: #FF99CC" title="Rosa">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC99;]','[/style]')" style="background-color: #FFCC99" title="Pfirsich">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF99;]','[/style]')" style="background-color: #FFFF99" title="Hellgelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFCC;]','[/style]')" style="background-color: #CCFFCC" title="Blasses Gr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFFF;]','[/style]')" style="background-color: #CCFFFF" title="Blasses T&#252;rkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CCFF;]','[/style]')" style="background-color: #99CCFF" title="Helles Himmelblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CC99FF;]','[/style]')" style="background-color: #CC99FF" title="Blasses Violett">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#ffffff;]','[/style]')" style="background-color: #FFFFFF" title="Wei&#223;">&nbsp;</div>
</div>
<br>
 
<div id="colormin_light" data-dismiss="modal">
<div title="Rot" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#484848;">rt</div>
<div title="Blau" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#484848;">bl</div>
<div title="Grün" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#484848;">gn</div>
<div title="Gelb" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#484848;">ge</div>
<div title="Gold" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#484848;">go</div>
<div title="Weiss" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#484848;">ws</div>
<div title="Schwarz" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</span></div>
</div>
 

Schlie�en

Wolfgang

844er findet das Top!

Antworten

#14 | RE: Große Farbauswahl - Teil 1! datum

14.03.2021 17:15

Hallo Wolfgang

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 !

Gruß Alfred

Wolfgang findet das Top!

Antworten

#15 | Große Farbauswahl mit festen Farben und Background-Color! datum

20.03.2021 11:08 (zuletzt bearbeitet: 20.03.2021 14:05)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

Große Farbauswahl mit festen Farben und Background-Color! - Teil 5!

In der folgenden Version ist es möglich die 40 Farben nicht nur für die Schrift zu verwenden, sondern auch für den Hintergrund!
Hiermit können dann Wörter oder ganze Sätze farblich markiert werden!
Das Skript gleicht dem aus Beitrag #13, nur gibt es einen Button "Schrift" + "Hintergrund" mehr.

Hier nochmal besten Dank an Creator für seine super Unterstützung!

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)

Schlie�en

Installation für alle Template & Mobil

Einbau-Anleitung:

Iconbar öffnen unter "Amin > Layout > Iconbar"
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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<style>
.colormin_on {padding:5px 5px 0 6px;}
.colormin_on div {display:inline-block !important;width:25px; height:25px;margin:2px;border:1px solid #000000;border-radius:2px;text-align:left !important; cursor:pointer;}
.colormin_on div:hover {border-radius:50%;transition: border-radius 0.5s;}
 
#colormin_light {padding-left:5px;}
#colormin_light div {width:20px;display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
 
.schrift input[type="radio"]:hover {cursor:pointer;} 
.schrift input[type="radio"]:checked {cursor:default;}
.schrift {border:none;margin-left:10px;} 
</style>
 
<div class="schrift">
<input name="changeColor" id="schrift" type="radio" checked="checked"><span style="vertical-align:middle !important;padding:0 10px 0 5px;">Schrift</span>
<input name="changeColor" id="background" type="radio"><span style="vertical-align:middle;padding:0 0 0 5px;">Hintergrund</span>
</div>
 
<div class="colormin_on" data-dismiss="modal">
<div onclick="xob_insert ('[style=color:#000000;]','[/style]')" style="background-color: #000000" title="Schwarz">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993300;]','[/style]')" style="background-color: #993300" title="Orange dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333300;]','[/style]')" style="background-color: #333300" title="Olivegrün dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003300;]','[/style]')" style="background-color: #003300" title="Grün dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003366;]','[/style]')" style="background-color: #003366" title="Himmelblau dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#000080;]','[/style]')" style="background-color: #000080" title="Marineblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333399;]','[/style]')" style="background-color: #333399" title="Indigo">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333333;]','[/style]')" style="background-color: #333333" title="Dunkelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#800000;]','[/style]')" style="background-color: #800000" title="Kastanie">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9000;]','[/style]')" style="background-color: #FF9000" title="Orange">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808000;]','[/style]')" style="background-color: #808000" title="Olivegrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008000;]','[/style]')" style="background-color: #008000" title="Grün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008080;]','[/style]')" style="background-color: #008080" title="Blaugrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#0000FF;]','[/style]')" style="background-color: #0000FF" title="Blau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#666699;]','[/style]')" style="background-color: #666699" title="Graublau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808080;]','[/style]')" style="background-color: #808080" title="Grau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#BA2F34;]','[/style]')" style="background-color: #BA2F34" title="Rot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9900;]','[/style]')" style="background-color: #FF9900" title="Bernstein">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CC00;]','[/style]')" style="background-color: #99CC00" title="Gelbgrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#339966;]','[/style]')" style="background-color: #339966" title="Meeresgrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#33CCCC;]','[/style]')" style="background-color: #33CCCC" title="Türkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#3366FF;]','[/style]')" style="background-color: #3366FF" title="Königsblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#800080;]','[/style]')" style="background-color: #800080" title="Lila">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#999999;]','[/style]')" style="background-color: #999999" title="Mittelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF00FF;]','[/style]')" style="background-color: #FF00FF" title="Magenta">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC00;]','[/style]')" style="background-color: #FFCC00" title="Gold">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF00;]','[/style]')" style="background-color: #FFFF00" title="Gelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FF00;]','[/style]')" style="background-color: #00FF00" title="Limone">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FFFF;]','[/style]')" style="background-color: #00FFFF" title="Aqua">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00CCFF;]','[/style]')" style="background-color: #00CCFF" title="Meeresblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993366;]','[/style]')" style="background-color: #993366" title="Violettrot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCCCCC;]','[/style]')" style="background-color: #CCCCCC" title="Hellgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF99CC;]','[/style]')" style="background-color: #FF99CC" title="Rosa">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC99;]','[/style]')" style="background-color: #FFCC99" title="Pfirsich">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF99;]','[/style]')" style="background-color: #FFFF99" title="Hellgelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFCC;]','[/style]')" style="background-color: #CCFFCC" title="Blasses Grün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFFF;]','[/style]')" style="background-color: #CCFFFF" title="Blasses Türkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CCFF;]','[/style]')" style="background-color: #99CCFF" title="Helles Himmelblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CC99FF;]','[/style]')" style="background-color: #CC99FF" title="Blasses Violett">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#ffffff;]','[/style]')" style="background-color: #FFFFFF" title="Weiß">&nbsp;</div>
</div>
<br>
 
<div id="colormin_light" data-dismiss="modal">
<div title="Rot" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#484848;">rt</div>
<div title="Blau" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#484848;">bl</div>
<div title="Grün" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#484848;">gn</div>
<div title="Gelb" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#484848;">ge</div>
<div title="Gold" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#484848;">go</div>
<div title="Weiss" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#484848;">ws</div>
<div title="Schwarz" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</span></div>
</div>
 

<script>
window.addEventListener('load', function() {
  // Ersetzen von "background-color" mit "color"
  function switchToColor() {
    $('.colormin_on div').each(function(index, link) {
      $(this).attr('onclick', $(this).attr('onclick').replace("style=background-color:#", "style=color:#"));
    });
  }
  // Ersetzen von "color" mit "background-color"
  function switchToBackgroundColor() {
    $('.colormin_on div').each(function(index, link) {
      $(this).attr('onclick', $(this).attr('onclick').replace("style=color:#", "style=background-color:#"));
    });
  }
  // Umschaltung auf "Hintergrundfarbe" 
  function switchColorPicker() {
    $('input[type="radio"]#background').click(function() {
      if ($(this).is(":checked")) {
        switchToBackgroundColor();
      };
    });
    // Umschaltung auf "Schriftfarbe"
    $('input[type="radio"]#schrift').click(function() {
      if ($(this).is(":checked")) {
        switchToColor();
      };
    });
  }
 
  /* Nur für Templates v1-4 */
  // Umschaltung auf "Hintergrundfarbe" 
  switchColorPicker();
 
  /* Nur für Template v6 */
  // Umschaltung auf "Hintergrundfarbe" 
  $(window).on('shown.bs.modal', function() {
    switchColorPicker();
  });
  // Ersetzen von "background-color" mit "color" (default)
  $(window).on('hidden.bs.modal', function() {
    switchToColor();
  });
});
</script>
 

Schlie�en

Wolfgang

844er und Hans58 finden das Top!

Antworten

#16 | Große Farbauswahl Deluxe mit Background-Color! datum

21.03.2021 08:45 (zuletzt bearbeitet: 25.03.2021 21:03)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3034
Punkte:	3678
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	906

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)

Schlie�en

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!
Farbauswahl "Farben" in der Iconbar platzieren

In Zeile 2-5 lässt sich das Aussehen der Farb-Area anpassen.
In Zeile 7-9 ist die Anpassung für die Leuchtfarben untergebracht.
Die Zeilen 20-27 sind für die Leuchtfarben zuständig.
data-dismiss="modal" in den Zeilen 20+39 mit sind für das Schließen im (v6) notwendig.
In Zeile 33+34 befinden sich die Button "Schrift" und "Hintergrund"!
Zeile 84-90 und Zeile 131-139 sorgen für die Umschaltung auf "Background-Color"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
<style>
#cpicker_deluxe2 {padding:10px !important;margin:0 5px 5px 5px;border: 1px dotted #555555;background-color: #f6f6f6;}
#cpicker_deluxe2 .cpbase_deluxe2 {cursor:crosshair;padding:4px;}
#cpicker_deluxe2 .previewColor_deluxe2 {width: 40px;margin-left:5px; background:#ECEEFB;cursor: default;}
#cpicker_deluxe2 .chosenColor_deluxe2 {text-align:left;margin-left:1px;padding:8px; background:#ECEEFB; font-weight:bold; font-size:14px;color:#000000;cursor:pointer;}
 
#colormin_light {margin:0 0 0 10px;}
#colormin_light div {width:20px;display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
 
.schrift input[type="radio"] {box-shadow:none !important;}
.schrift input[type="radio"]:hover {cursor:pointer;} 
.schrift input[type="radio"]:checked {cursor:default;}
.schrift {border:none !important;margin:0 0 0 10px !important;color:#000000 !important;} 
</style>
 
<div style="clear:both;"></div>
 
<!-- Glow -->
<div id="colormin_light" data-dismiss="modal">
<div class="xob_icon_cont" title="Rot" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#484848;">rt</div>
<div class="xob_icon_cont" title="Blau" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#484848;">bl</div>
<div class="xob_icon_cont" title="Gr&#252;n" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#484848;">gn</div>
<div class="xob_icon_cont" title="Gelb" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#484848;">ge</div>
<div class="xob_icon_cont" title="Gold" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#484848;">go</div>
<div class="xob_icon_cont" title="Weiss" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#484848;">ws</div>
<div class="xob_icon_cont" title="Schwarz" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</span></div>
 
</div><div style="clear:both;"></div>
 
<!-- Umschaltung -->
<div class="schrift">
<input name="changeColor" type="radio" checked="checked"><span style="padding:0 10px 0 5px;">Schrift</span>
<input name="changeColor" id="background2" type="radio"><span style="padding:0 0 0 5px;">Hintergrund</span>
</div>
<div style="clear:both;"></div>
 
<!-- Farbtabelle -->
<div id="cpicker_deluxe2"  data-dismiss="modal">
<table  border="1" width="auto" cellpadding="0" cellspacing="0" style="border:1px solid #888888 !important;">
<tr><td class="cpbase_deluxe2" title="Farbe ausw&#228;hlen!"></td>
<td class="previewColor_deluxe2" title="Farbvorschau!"></td></tr>
<tr><td data-dismiss="modal" class="chosenColor_deluxe2" colspan="2" title="Erst Farbe ausw&#228;hlen, dann einf&#252;gen!">Keine Farbe ausgew&#228;hlt!</td></tr>
</table>
</div>
 
 
<script>
window.addEventListener('load', function(){
	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 colortable = $('<table></table>').attr('border', 0).attr('cellspacing', 0).attr('cellpadding', 0); 
		colortable.on('click',function(){
			var jla = $('#cpicker_deluxe2 .chosenColor_deluxe2');
			jla.html(artabus);
			jla.css('background-color', artabus);
 
			var cColorDec	= hex2dec('FFFFFF') - hex2dec(artabus.substr(1));
			var cColorHex	= dec2hex(cColorDec, 6);
			jla.css('color', '#' + cColorHex);
 
		        // Umschaltung von "color" auf "background"
		        if ($('input[type="radio"]#background2').is(":checked")) {
		            //insert('[style=background-color:' + artabus + ']', '[/style]');
		            xob_insert('[style=background-color:' + artabus + ']', '[/style]');
		        } else {
		            //insert('[style=color:' + artabus + ']', '[/style]');
		            xob_insert('[style=color:' + artabus + ']', '[/style]');
		        };
		});
 
		var H = W = 63;
		for (var Y = 0; Y <= H; Y++){
                         // 'height',..... Die H&#246;he eines Pixels bestimmt indirekt die Gesamth&#246;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]);
 
				column.mouseover(function(){
					artabus = $(this).attr('bgcolor');
					$('#cpicker_deluxe2 .previewColor_deluxe2').css('background-color', artabus);
				});
				row.append(column);
			}
			colortable.append(row);
		}
		$('#cpicker_deluxe2 .cpbase_deluxe2').empty().append(colortable); 
 
                // Umschaltung von "color" auf "background"
                $('#cpicker_deluxe2 .chosenColor_deluxe2').on('click',function(){
                  if ($('input[type="radio"]#background2').is(":checked")) {
                    //insert('[style=background-color:' + $(this).html() + ']', '[/style]');
                    xob_insert('[style=background-color:' + $(this).html() + ']', '[/style]');
                  } else {
                    //insert('[style=color:' + $(this).html() + ']', '[/style]');
                    xob_insert('[style=color:' + $(this).html() + ']', '[/style]');
                  };
                });
 
 
	function hex2dec(hexNumber) {
		return parseInt(hexNumber, 16);
	}
	function dec2hex(decNumber, chars) {
		if (Number(chars)) {
			return (decNumber + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
		}
		return decNumber.toString(16).toUpperCase();
	}
 
});
</script>
 

Schlie�en

Wolfgang

844er findet das Top!

Antworten

#17 | RE: Große Farbauswahl Deluxe mit einem Hintergrund-Color-Button datum

23.03.2021 15:21 (zuletzt bearbeitet: 25.03.2021 21:06)

creator

Informationen anzeigen

Beitr�ge:	61
Punkte:	144
Registriert seit:	17.10.2020

Homepage:	Nicht angegeben
Board Nr:
Likes	53

Es scheint einen Fehler in der Xobor-Forensoftware mit dem neuen Template (v6) zu geben. Habe diesbezüglich bereits einen Bugreport erstellt.

Bis der Fehler von Xobor behoben wurde, kann folgende Version verwendet werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
<style>
#cpicker_deluxe2 {padding:10px !important;margin:0 5px 5px 5px;}
#cpicker_deluxe2 .cpbase_deluxe2 {cursor:crosshair;padding:4px;}
#cpicker_deluxe2 .previewColor_deluxe2 {width: 40px;margin-left:5px; background:#ECEEFB;cursor: default;}
#cpicker_deluxe2 .chosenColor_deluxe2 {text-align:left;margin-left:1px;padding:8px; background:#ffffff; font-weight:bold; font-size:14px;color:#000000;cursor:pointer;}
 
.color_standard {margin:10px 0 0 15px !important;}
.color_standard img {margin:10px 0 0 0 !important;width:20px; height:20px;text-align:left !important; cursor:pointer;border:1px solid #ffffff;}
.color_standard img:hover {transition: border 0.5s;border:1px solid #000000 !important;}
.modal .color_standard img,.modal .color_standard,.modal #chosenColor_deluxe2_var {margin:0 !important;}
 
#chosenColor_deluxe2_var {margin:5px 0 0 10px !important;}
#chosenColor_deluxe2_var span{border:1px solid #000000;padding:2px 25px;margin-left:5px;border-radius:5px;cursor:pointer;font-size:13px;background-color:#ffffff;color:#222222;}
#chosenColor_deluxe2_var span:hover {transition: background 0.5s;background-color:#aaaaaa;color:#222222;}
 
#colormin_light {margin:0 0 0 10px;}
#colormin_light div {width:20px;display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
 
.xob_subiconlist {cursor:default;}
</style>
 
<script>
function colorMinInsertBBCodeFromModal(context, tag1, tag2) {
    if ($(context).closest('.modal-body').length != 0) {
        $(window).on('hidden.bs.modal', function(e) {
            xob_insert(tag1, tag2);
            $(this).off(e);
        });
    } else {
        xob_insert(tag1, tag2);
    }
}
</script>
 
<!-- Standardfarben -->
<div data-dismiss="modal" class="color_standard">
<div onclick="colorMinInsertBBCodeFromModal(this, '[rot]','[/rot]')" class="xob_icon_cont"><img title="[rot][/rot]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/rot_15.gif"></div>
<div onclick="colorMinInsertBBCodeFromModal(this, '[blau]','[/blau]')" class="xob_icon_cont"><img title="[blau][/blau]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/blau_15.gif"></div>
<div onclick="colorMinInsertBBCodeFromModal(this, '[gruen]','[/gruen]')" class="xob_icon_cont"><img title="[gruen][/gruen]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/gruen_15.gif"></div>
<div onclick="colorMinInsertBBCodeFromModal(this, '[orange]','[/orange]')" class="xob_icon_cont"><img title="[orange][/orange]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/orange_15.gif"></div>
<div onclick="colorMinInsertBBCodeFromModal(this, '[lila]','[/lila]')" class="xob_icon_cont"><img title="[lila][/lila]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/lila_15.gif"></div>
<div onclick="colorMinInsertBBCodeFromModal(this, '[weiss]','[/weiss]')" class="xob_icon_cont"><img title="[weiss][/weiss]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/weiss_15.gif"></div>
<div onclick="colorMinInsertBBCodeFromModal(this, '[schwarz]','[/schwarz]')" class="xob_icon_cont"><img title="[schwarz][/schwarz]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/schwarz_15.gif"></div>
 
<div id="chosenColor_deluxe2_var" title="Background-Color einfügen" class="xob_icon_cont"><span>Back</span></div>
</div>
<div style="clear:both;"></div>
 
<!-- Glow -->
<div data-dismiss="modal" id="colormin_light">
<div class="xob_icon_cont" title="Rot" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#000000;">rt</div>
<div class="xob_icon_cont" title="Blau" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#000000;">bl</div>
<div class="xob_icon_cont" title="Grün" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#000000;">gn</div>
<div class="xob_icon_cont" title="Gelb" onclick="colorMinInsertBBCodeFromModal('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#000000;">ge</div>
<div class="xob_icon_cont" title="Gold" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#000000;">go</div>
<div class="xob_icon_cont" title="Weiss" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#000000;">ws</div>
<div class="xob_icon_cont" title="Schwarz" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</div>
 
</div>
<div style="clear:both;"></div>
 
<!-- Farbtabelle -->
<div id="cpicker_deluxe2">
<table border="1" width="auto" cellpadding="0" cellspacing="0" style="border:0.5px solid #aaaaaa;">
<tbody><tr><td class="cpbase_deluxe2" title="Farbe auswählen!"></td>
<td class="previewColor_deluxe2" title="Farbvorschau!"></td></tr>
<tr><td data-dismiss="modal" class="chosenColor_deluxe2" colspan="2" title="Erst Farbe auswählen, dann einfügen!">Keine Farbe ausgewählt!</td></tr>
</tbody></table>
</div>
 
 
<script>
window.addEventListener('load', function() {
 
    /* 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 colortable = $('<table></table>').attr({
            'border': 0,
            'cellspacing': 0,
            'cellpadding': 0
        });
        colortable.click(function() {
            var cColorDec = hex2dec('FFFFFF') - hex2dec(artabus.substr(1));
            var cColorHex = dec2hex(cColorDec, 6);
            $('#cpicker_deluxe2 .chosenColor_deluxe2').html(artabus).css({
                'background-color': artabus,
                'color': '#' + cColorHex
            });
 
            $('#chosenColor_deluxe2_var span').css({
                'background': artabus,
                'color': '#' + cColorHex
            });
 
        });
 
        var H = W = 63;
        for (var Y = 0; Y <= H; 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;
 
                var column = $('<td></td>').css({
                    'width': 5,
                    'background': '#' + jl[R] + jl[G] + jl[B]
                }).attr('bgcolor', '#' + jl[R] + jl[G] + jl[B]);
 
                column.mouseover(function() {
                    artabus = $(this).attr('bgcolor');
                    $('#cpicker_deluxe2 .previewColor_deluxe2').css('background-color', artabus);
                });
                row.append(column);
            }
            colortable.append(row);
        }
        $('#cpicker_deluxe2 .cpbase_deluxe2').empty().append(colortable);
 

        $('#cpicker_deluxe2 .chosenColor_deluxe2').click(function() {
            if ($(this).html()) {
                colorMinInsertBBCodeFromModal(this, '[style=color:' + $(this).html() + ']', '[/style]');
            };
        });
 
        $('#chosenColor_deluxe2_var span').click(function() {
            colorMinInsertBBCodeFromModal(this, '[style=background-color:' + $('#cpicker_deluxe2 .chosenColor_deluxe2').html() + ']', '[/style]');
        });
 
        function hex2dec(hexNumber) {
            return parseInt(hexNumber, 16);
        }
 
        function dec2hex(decNumber, chars) {
            if (Number(chars)) {
                return (decNumber + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
            }
            return decNumber.toString(16).toUpperCase();
        }
 
    };
 
    switchColorPicker();
 
    $(window).on('shown.bs.modal', function() {
        switchColorPicker();
    });
 
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

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]")

Hans58, Wolfgang und 844er finden das Top!

Antworten

#18 | Fehlersuche: Große Farbauswahl Deluxe! datum

11.08.2022 15:56

EaglePipe

Informationen anzeigen

Beitr�ge:	34
Punkte:	34
Registriert seit:	04.07.2022

Homepage:	Nicht angegeben
Board Nr:
Likes	7

Hallo Zusammen

ich habe das Problem das bei diesem Code zwar alles funktioniert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
<style>
#cpicker_deluxe2 {padding:10px !important;margin:0 5px 5px 5px;}
#cpicker_deluxe2 .cpbase_deluxe2 {cursor:crosshair;padding:4px;}
#cpicker_deluxe2 .previewColor_deluxe2 {width: 40px;margin-left:5px; background:#ECEEFB;cursor: default;}
#cpicker_deluxe2 .chosenColor_deluxe2 {text-align:left;margin-left:1px;padding:8px; background:#ffffff; font-weight:bold; font-size:14px;color:#000000;cursor:pointer;}
 
.color_standard {margin:10px 0 0 15px !important;}
.color_standard img {margin:10px 0 0 0 !important;width:20px; height:20px;text-align:left !important; cursor:pointer;border:1px solid #ffffff;}
.color_standard img:hover {transition: border 0.5s;border:1px solid #000000 !important;}
.modal .color_standard img,.modal .color_standard,.modal #chosenColor_deluxe2_var {margin:0 !important;}
 
#chosenColor_deluxe2_var {margin:5px 0 0 10px !important;}
#chosenColor_deluxe2_var span{border:1px solid #000000;padding:2px 25px;margin-left:5px;border-radius:5px;cursor:pointer;font-size:13px;background-color:#ffffff;color:#222222;}
#chosenColor_deluxe2_var span:hover {transition: background 0.5s;background-color:#aaaaaa;color:#222222;}
 
#colormin_light {margin:0 0 0 10px;}
#colormin_light div {width:20px;display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
 
.xob_subiconlist {cursor:default;}
</style>
 
<script>
function colorMinInsertBBCodeFromModal(context, tag1, tag2) {
    if ($(context).closest('.modal-body').length != 0) {
   $(window).on('hidden.bs.modal', function(e) {
  xob_insert(tag1, tag2);
  $(this).off(e);
   });
    } else {
   xob_insert(tag1, tag2);
    }
}
</script>
 
<!-- Glow -->
<div data-dismiss="modal" id="colormin_light">
<div class="xob_icon_cont" title="Rot" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#000000;">rt</div>
<div class="xob_icon_cont" title="Blau" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#000000;">bl</div>
<div class="xob_icon_cont" title="Gr&#252;n" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#000000;">gn</div>
<div class="xob_icon_cont" title="Gelb" onclick="colorMinInsertBBCodeFromModal('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#000000;">ge</div>
<div class="xob_icon_cont" title="Gold" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#000000;">go</div>
<div class="xob_icon_cont" title="Weiss" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#000000;">ws</div>
<div class="xob_icon_cont" title="Schwarz" onclick="colorMinInsertBBCodeFromModal(this, '[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</div>
 
</div>
<div style="clear:both;"></div>
 
<!-- Farbtabelle -->
<div id="cpicker_deluxe2">
<table border="1" width="auto" cellpadding="0" cellspacing="0" style="border:0.5px solid #aaaaaa;">
<tbody><tr><td class="cpbase_deluxe2" title="Farbe ausw&#228;hlen!"></td>
<td class="previewColor_deluxe2" title="Farbvorschau!"></td></tr>
<tr><td data-dismiss="modal" class="chosenColor_deluxe2" colspan="2" title="Erst Farbe ausw&#228;hlen, dann einf&#252;gen!">Keine Farbe ausgew&#228;hlt!</td></tr>
</tbody></table>
</div>
 
 
<script>
window.addEventListener('load', function() {
 
    /* 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 colortable = $('<table></table>').attr({
  'border': 0,
  'cellspacing': 0,
  'cellpadding': 0
   });
   colortable.click(function() {
  var cColorDec = hex2dec('') - hex2dec(artabus.substr(1));
  var cColorHex = dec2hex(cColorDec, 6);
  $('#cpicker_deluxe2 .chosenColor_deluxe2').html(artabus).css({
 'background-color': artabus,
 'color': '#' + cColorHex
  });
 
  $('#chosenColor_deluxe2_var span').css({
 'background': artabus,
 'color': '#' + cColorHex
  });
 
   });
 
   var H = W = 63;
   for (var Y = 0; Y <= H; 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;
 
 var column = $('<td></td>').css({
'width': 5,
'background': '#' + jl[R] + jl[G] + jl[B]
 }).attr('bgcolor', '#' + jl[R] + jl[G] + jl[B]);
 
 column.mouseover(function() {
artabus = $(this).attr('bgcolor');
$('#cpicker_deluxe2 .previewColor_deluxe2').css('background-color', artabus);
 });
 row.append(column);
  }
  colortable.append(row);
   }
   $('#cpicker_deluxe2 .cpbase_deluxe2').empty().append(colortable);
 
   $('#cpicker_deluxe2 .chosenColor_deluxe2').click(function() {
  if ($(this).html()) {
 colorMinInsertBBCodeFromModal(this, '[style=color:' + $(this).html() + ']', '[/style]');
  };
   });
 
   $('#chosenColor_deluxe2_var span').click(function() {
  colorMinInsertBBCodeFromModal(this, '[style=background-color:' + $('#cpicker_deluxe2 .chosenColor_deluxe2').html() + ']', '[/style]');
   });
 
   function hex2dec(hexNumber) {
  return parseInt(hexNumber, 16);
   }
 
   function dec2hex(decNumber, chars) {
  if (Number(chars)) {
 return (decNumber + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
  }
  return decNumber.toString(16).toUpperCase();
   }
 
    };
 
    switchColorPicker();
 
    $(window).on('shown.bs.modal', function() {
   switchColorPicker();
    });
 
});
</script>
 

Schlie�en

Aber die User irritiert sind
das hier

1
 
[style=color:#007000][style=color:#007000][/style][/style]

steht

Ich sehe gerade vor lauter Klammern nicht mehr durch, kann mir jemand helfen

Antworten

#19 | Fehlersuche: Große Farbauswahl Deluxe! datum

11.08.2022 17:06 (zuletzt bearbeitet: 11.08.2022 17:07)

EaglePipe

Informationen anzeigen

Beitr�ge:	34
Punkte:	34
Registriert seit:	04.07.2022

Homepage:	Nicht angegeben
Board Nr:
Likes	7

Ich habe das Problem gerade ganz anders gelöst,
ich gebe nun eine Farbpalette vor und das Glühen und werde schauen wie die User damit klar kommen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<style>
#colormin_on {padding:5px 5px 0 6px;}
#colormin_on div {display:inline-block !important;width:25px; height:25px;margin:2px;border:1px solid #000000;border-radius:2px;text-align:left !important; cursor:pointer;}
#colormin_on div:hover {border-radius:50%;transition: border-radius 0.2s;}
 
#colormin_light {padding-left:5px;}
#colormin_light div {display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
</style>
 
<div id="colormin_on"  data-dismiss="modal">
<div onclick="xob_insert ('[style=color:#000000;]','[/style]')" style="background-color: #000000" title="Schwarz">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993300;]','[/style]')" style="background-color: #993300" title="Orange dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333300;]','[/style]')" style="background-color: #333300" title="Olivegr&#252;n dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003300;]','[/style]')" style="background-color: #003300" title="Gr&#252;n dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003366;]','[/style]')" style="background-color: #003366" title="Himmelblau dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#000080;]','[/style]')" style="background-color: #000080" title="Marineblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333399;]','[/style]')" style="background-color: #333399" title="Indigo">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333333;]','[/style]')" style="background-color: #333333" title="Dunkelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#800000;]','[/style]')" style="background-color: #800000" title="Kastanie">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9000;]','[/style]')" style="background-color: #FF9000" title="Orange">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808000;]','[/style]')" style="background-color: #808000" title="Olivegr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008000;]','[/style]')" style="background-color: #008000" title="Gr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008080;]','[/style]')" style="background-color: #008080" title="Blaugr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#0000FF;]','[/style]')" style="background-color: #0000FF" title="Blau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#666699;]','[/style]')" style="background-color: #666699" title="Graublau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808080;]','[/style]')" style="background-color: #808080" title="Grau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#BA2F34;]','[/style]')" style="background-color: #BA2F34" title="Rot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9900;]','[/style]')" style="background-color: #FF9900" title="Bernstein">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CC00;]','[/style]')" style="background-color: #99CC00" title="Gelbgr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#339966;]','[/style]')" style="background-color: #339966" title="Meeresgr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#33CCCC;]','[/style]')" style="background-color: #33CCCC" title="T&#252;rkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#3366FF;]','[/style]')" style="background-color: #3366FF" title="K&#246;nigsblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#800080;]','[/style]')" style="background-color: #800080" title="Lila">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#999999;]','[/style]')" style="background-color: #999999" title="Mittelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF00FF;]','[/style]')" style="background-color: #FF00FF" title="Magenta">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC00;]','[/style]')" style="background-color: #FFCC00" title="Gold">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF00;]','[/style]')" style="background-color: #FFFF00" title="Gelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FF00;]','[/style]')" style="background-color: #00FF00" title="Limone">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FFFF;]','[/style]')" style="background-color: #00FFFF" title="Aqua">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00CCFF;]','[/style]')" style="background-color: #00CCFF" title="Meeresblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993366;]','[/style]')" style="background-color: #993366" title="Violettrot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCCCCC;]','[/style]')" style="background-color: #CCCCCC" title="Hellgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF99CC;]','[/style]')" style="background-color: #FF99CC" title="Rosa">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC99;]','[/style]')" style="background-color: #FFCC99" title="Pfirsich">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF99;]','[/style]')" style="background-color: #FFFF99" title="Hellgelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFCC;]','[/style]')" style="background-color: #CCFFCC" title="Blasses Gr&#252;n">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFFF;]','[/style]')" style="background-color: #CCFFFF" title="Blasses T&#252;rkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CCFF;]','[/style]')" style="background-color: #99CCFF" title="Helles Himmelblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CC99FF;]','[/style]')" style="background-color: #CC99FF" title="Blasses Violett">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#ffffff;]','[/style]')" style="background-color: #FFFFFF" title="Wei&#223;">&nbsp;</div>
</div>
<br>
 
<div id="colormin_light" data-dismiss="modal">
<div title="Rot" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#484848;">rt</div>
<div title="Blau" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#484848;">bl</div>
<div title="Grün" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#484848;">gn</div>
<div title="Gelb" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#484848;">ge</div>
<div title="Gold" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#484848;">go</div>
<div title="Weiss" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#484848;">ws</div>
<div title="Schwarz" onClick="xob_insert ('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</span></div>
</div>
 
 
 

Schlie�en

Gruß Alex

Daishi findet das Top!

Antworten

#20 | Fehlersuche: Große Farbauswahl Deluxe! datum

11.08.2022 17:30

Das hoffe ich auch, Danke für deine Hilfe

Gruß Alex

Daishi und Wolfgang finden das Top!

Antworten

Minimierter Styleswitcher / Hintergrundwechsler für alle Template (auch V6) � � TAB-Menü / TAB-Spoiler / Boxen für Texte und Bildern

Seite 2 von 3 � Seite 1 2 3 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 451
Xobor-Webfonts fürs Forum installieren
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 4 02.01.2022 22:49
Mato • Zugriffe: 315

Glow - Leuchtender Text mit CSS3 "text-shadow" - Teil 1+3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

01.03.2017 07:11
von

Wolfgang • Zugriffe: 1620

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

24.12.2019 00:33
von

Wolfgang • Zugriffe: 1975

Transparenz-Effekte
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 9 01.04.2023 18:04
Kipper-Spedition • Zugriffe: 1786
Sonderzeichen fürs Forum bereitstellen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 3 12.04.2019 11:47
Wolfgang • Zugriffe: 5866

Xobor-Spoiler mit neuen Formatierungen ausstatten
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

24.11.2019 09:29
von

Wolfgang • Zugriffe: 2732

Scripte und Effekte fürs Forum und die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

07.07.2019 12:33
von

Wolfgang • Zugriffe: 12878

Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so �brig bleibt von Wolfgang 1 01.07.2019 23:15
Wolfgang • Zugriffe: 18235

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 €

143%