Forum - Große Farbauswahl / Super Color-Picker / Auch minimiert!

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 1 von 5 � Seite 1 2 3 4 5 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

#1 | Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6 datum

14.06.2014 01:03 (zuletzt bearbeitet: 29.03.2019 05:35)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3012
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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>
 

Schlie�en

Interessante Links:

• Überarbeitetes Script von Ingmar aus dem Xobor-Support
• Ursprüngliches Script von der Webseite "Admin Boster" - HTML Color Picker

Bis dann und viel Spaß

Wolfgang

J�rgen und Dave finden das Top!

Antworten

#2 | Große Farbauswahl / Super Color-Picker für alle Xobor-Templates datum

14.06.2014 15:44 (zuletzt bearbeitet: 27.04.2019 17:13)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3012
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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>
 

Schlie�en

Bis dann und gutes Gelingen

Wolfgang

Antworten

#3 | Große Farbauswahl / Super Color-Picker - Mit Glow-Effekt erweitert! datum

02.03.2017 18:38 (zuletzt bearbeitet: 28.04.2019 05:40)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3012
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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>
 

Schlie�en

Viel Erfolg beim Einbau

Wolfgang

Hans58 findet das Top!

Antworten

#4 | RE: Große Farbauswahl / Super Color-Picker für alle Xobor-Templates datum

04.03.2017 18:27

Ist ja wieder eine geniale Idee von dir

Antworten

#5 | Große Farbauswahl: Beschreibung und Hilfetexte einbauen datum

05.03.2017 19:47 (zuletzt bearbeitet: 29.04.2019 18:49)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3012
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Board Nr:
Likes	870

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>
 

Schlie�en

Wolfgang

Antworten

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

Seite 1 von 5 � Seite 1 2 3 4 5 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: 430
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: 290

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: 1570

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: 1950

Transparenz-Effekte
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 7 17.03.2023 16:03
Kipper-Spedition • Zugriffe: 1648
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: 5816

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: 2682

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: 12802

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: 18170

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 €

192%