Seite 1 von 6
#1 Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6 von Wolfgang 14.06.2014 01:03

avatar

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



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
 
<!-- https://www.interclasse.com/scripts/colorpicker.php -->
<!-- edited for compatibility with the xobor forum software -->

<style type="text/css">
#cpbase {
background-color:#ffffff;
border:1px solid #555555;
padding:5px;
}
#previewColor {
width:40px;
border:1px solid #555555;
}
#chosenColor {
padding: 0 5px;
margin:7px;
border:1px solid #555555;
}
.xob_subiconlist {
padding:10px !important;
}
</style>


<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:auto;margin-top:5px;clear:both;" data-dismiss="modal">
<tr>
<td id="cpbase"></td><td id="previewColor"></td>
</tr><tr>
<td id="chosenColor" colspan="2" onclick="lastColor(this);"></td>
</tr>
</table>

<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();">';

var H=W=63;
for (Y=0; Y<=H; Y++){
s='<'+'tr height="3">';
j=Math.round(Y*(510/(H+1))-255);
for (X=0; X<=W; X++){
i=Math.round(X*(total/W));
R=aR[i]-j;if(R<0)R=0;if(R>255||isNaN(R))R=255;
G=aG[i]-j;if(G<0)G=0;if(G>255||isNaN(G))G=255;
B=aB[i]-j;if(B<0)B=0;if(B>255||isNaN(B))B=255;
s=s+'<'+'td width="5" bgcolor=#'+jl[R]+jl[G]+jl[B]+' style="background:#'+jl[R]+jl[G]+jl[B]+'"><'+'/td>';
}
colortable += s+'<'+'/tr>';
}
colortable += '<'+'/table>';
document.getElementById('cpbase').innerHTML = colortable;


}
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]');

}
}
 
</script>
 







Interessante Links:







Bis dann und viel Spaß

Wolfgang

#2 Große Farbauswahl / Super Color-Picker für alle Xobor-Templates von Wolfgang 14.06.2014 15:44

avatar

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


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
 
<style>
#cpicker {
border: 1px solid #999999;
background-color: #f6f6f6;
}
#cpicker .cpbase table {
cursor: crosshair;
}
#cpicker .previewColor {
border: 1px solid #999999;
width:40px;
cursor:default;
background:#ECEEFB;
}
#cpicker .chosenColor {
color: #000000;
border: 1px solid #999999;
text-align:left;
padding:4px;
background:#ECEEFB;
font-weight:bold;
font-size:14px;
}
.xob_subiconlist {
padding:10px !important;
}
</style>


<div class="xob_icon_cont">
<table id="cpicker" data-dismiss="modal">
<tr>
<td class="cpbase"></td><td class="previewColor"></td>
</tr><tr>
<td class="chosenColor" colspan="2"> 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 .chosenColor');
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);

//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 .previewColor').css('background-color', artabus);
});
row.append(column);
}
colortable.append(row);
}
$('#cpicker .cpbase').empty().append(colortable);
 
$('#cpicker .chosenColor').on('click',function(){
if ($(this).html()) {
//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>
 







Bis dann und gutes Gelingen

Wolfgang

#3 Große Farbauswahl / Super Color-Picker - Mit Glow-Effekt erweitert! von Wolfgang 02.03.2017 18:38

avatar

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


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
 
<style>
#cpicker {
border: 1px solid #999999;
background-color: #f6f6f6;
}
#cpicker .cpbase table {
cursor: crosshair;
}
#cpicker .previewColor {
border: 1px solid #999999;
width:40px;
cursor:default;
background:#ECEEFB;
}
#cpicker .chosenColor {
color: #000000;
border: 1px solid #999999;
text-align:left;
padding:4px;
background:#ECEEFB;
font-weight:bold;
font-size:14px;
}
#colormin_light {
display:flex;
margin: -5px 0 10px 0;
clear:both;
cursor:pointer;
}
.xob_subiconlist {
padding:10px !important;
}
</style>

<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]')"><span 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;color:#333333;padding:0 5px 0 5px;">Rot</span></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]')"><span 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;color:#333333;padding:0 5px 0 5px;">Blau</span></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]')"><span 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;color:#333333;padding:0 5px 0 5px;">Grün</span></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 70px yellow]','[/style]')"><span 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 70px yellow;color:#333333;padding:0 5px 0 5px;">Gelb</span></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 70px #d49f00]','[/style]')"><span 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 70px #d49f00;color:#555555;padding:0 5px 0 5px;">Gold</span></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]')"><span 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;padding:0 5px 0 5px;">Weiss</span></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]')"><span 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;padding:0 5px 0 5px;">Schwarz</span></div>

</div>

 
<div class="xob_icon_cont">
<table id="cpicker" data-dismiss="modal">
<tr>
<td class="cpbase"></td><td class="previewColor"></td>
</tr><tr>
<td class="chosenColor" colspan="2"> 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 .chosenColor');
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);

//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 .previewColor').css('background-color', artabus);
});
row.append(column);
}
colortable.append(row);
}
$('#cpicker .cpbase').empty().append(colortable);

$('#cpicker .chosenColor').on('click',function(){
if ($(this).html()) {
//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>
 











Viel Erfolg beim Einbau

Wolfgang

#4 RE: Große Farbauswahl / Super Color-Picker für alle Xobor-Templates von Hans58 04.03.2017 18:27

avatar

Ist ja wieder eine geniale Idee von dir

#5 Große Farbauswahl: Beschreibung und Hilfetexte einbauen von Wolfgang 05.03.2017 19:47

avatar

Große Farbauswahl: Beschreibung und Hilfetexte einbauen!
Aktualisiert 26.0822







Weitere Variation:
Große Farbauswahl mit Glow-Farben, mit Anleitung und Tooltipps!




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 4) und unter "Name" eintragen
  • Speichern!
  • "HTML" Farbpalette in die Gruppe "Farben" ans Ende schieben!
  • Farbauswahl "Farben" in der Iconbar platzieren


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
 
<style>
#cpicker {width:100%;
border: 1px solid #999999;
background-color: #f6f6f6;
}
#cpicker .cpbase table {
cursor: crosshair;
}
#cpicker .previewColor {
border: 1px solid #999999;
width:40px;
cursor:default;
background:#ECEEFB;
}
#cpicker .chosenColor {
color: #000000;
border: 1px solid #999999;
text-align:left;
padding:4px 10px;
background:#ECEEFB;
font-weight:bold;
font-size:14px;
}
#colormin_light {
display:flex;
margin: -5px 0 10px 0;
clear:both;
cursor:pointer;
}
.xob_subiconlist {
padding:10px !important;
}
</style>

<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]')"><span 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;color:#333333;padding:0 5px 0 5px;">Rot</span></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]')"><span 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;color:#333333;padding:0 5px 0 5px;">Blau</span></div>

<div 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]')"><span 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;color:#333333;padding:0 5px 0 5px;">Gr&#252;n</span></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 70px yellow]','[/style]')"><span 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 70px yellow;color:#333333;padding:0 5px 0 5px;">Gelb</span></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 70px #d49f00]','[/style]')"><span 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 70px #d49f00;color:#555555;padding:0 5px 0 5px;">Gold</span></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]')"><span 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;padding:0 5px 0 5px;">Weiss</span></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]')"><span 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;padding:0 5px 0 5px;">Schwarz</span></div>
 
</div>
 
<table style="clear:both; font-size:14px;color:#555555;line-height:2px;margin:10px 0; line-height:20px; font-weight:bold;text-align:left;"><tr><td>
&nbsp;&nbsp;&bull; Text markieren, Farbe ausw&#228;hlen!
</td></tr><tr><td>
&nbsp;&nbsp;&bull; Letzte Farbe wird im unteren Fenster gespeichert!
</td></tr></table>
 

<div class="xob_icon_cont">
<table id="cpicker" data-dismiss="modal">
<tr>
<td class="cpbase" title="Farbe w&#228;hlen!"></td><td class="previewColor" title="Vorschau"></td>
</tr><tr>
<td class="chosenColor" colspan="2">Erst Farbe ausw&#228;hlen, dann klicken!</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 .chosenColor');
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);

//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 .previewColor').css('background-color', artabus);
});
row.append(column);
}
colortable.append(row);
}
$('#cpicker .cpbase').empty().append(colortable);

$('#cpicker .chosenColor').on('click',function(){
if ($(this).html()) {
//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>
 








Wolfgang



|addpics|6v-3m-bd54.png-invaddpicsinvv,6v-3n-ca49.png-invaddpicsinvv|/addpics|

Foren Spende
Hallo !

Wir hoffen, dass dir unser Forum gefällt und du dich hier genauso wohlfühlst wie wir.

Wenn du uns bei der Erhaltung des Forums unterstützen möchtest, kannst du mit Hilfe einer kleinen Spende dazu beitragen, den weiteren Betrieb zu finanzieren.

Deine Spende hilft!

Spendenziel: 84€
125%
 


Xobor Forum Software von Xobor