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 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 & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - 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. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights 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: 18.12.2024 13:10)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

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: 18.12.2024 13:11)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

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: 18.12.2024 13:13)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

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: 18.12.2024 13:15)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

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

#6 | Super Color-Picker nach oben öffnen! datum

15.08.2018 00:19 (zuletzt bearbeitet: 18.12.2024 13:16)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

Super Color-Picker nach oben öffnen!
Aktualisiert 26.08.22

Will man nur das Menü mit der Farbpalette nach oben öffnen, geht das sogar über !

Installation nur für die Template (v1-4)

Einbau-Anleitung:

  • Rechte Maustaste auf Menü-Icon!
  • ID unter "Element untersuchen" oder "Untersuchen" finden!
  • id="xob_sub_..." (hier 70) suchen und wie folgt in die CSS schreiben!
  • Der negative Wert von "margin-top" muss so angepasst werden, dass der untere Rand des geöffneten Menüs gerade noch das Menü-Icon berührt!
  • Das Template wird nicht verändert!

1
2
 
/*Color-Picker */
#xob_sub_70 {margin-top:-330px !important}
 

Wolfgang

Antworten

#7 | RE: Aktualisiert: Super Color-Picker! datum

17.02.2019 13:53 (zuletzt bearbeitet: 24.03.2019 00:58)

Lieber Wolfgang,

Du hast Dich selbst übertroffen, es funktioniert nun alles wunderbar!
Es sind keine Änderungen an den Templates mehr nötig und die Farben werden sowohl bei einem neuen Beitrag sowie bei einer Beitragsänderung angezeigt.

Hier der Beweis:

Mein Farbpicker ist auf die Bedürfnisse meiner Mitglieder zugeschnitten.
Die Anzeige erfolgt über dem Icon und der Hintergrund ist auch angepaßt.

Standard Template (V1)

Bussinchen findet das Top!

Antworten

#8 | RE: Aktualisiert: Super Color-Picker! datum

18.02.2019 05:44

Hallo allerseits!

Ich habe mir nun den fürs Standard-Template aktualisierten Colorpicker-Code in die Iconbar eingefügt, und tatsächlich: Es funktioniert jetzt einwandfrei!
Super! Vielen herzlichen Dank, lieber Wolfgang! Sehr erfreulich, dass das nun so schön funktioniert!

Ich verwende in allen meinen Foren das Standard-Template.

Antworten

#9 | Hilfe-Datei für den Super Color-Picker! datum

29.03.2019 18:01 (zuletzt bearbeitet: 18.12.2024 13:17)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

Hilfe-Datei für den Super Color-Picker!
Aktualisiert 28.08.22

[img=auto]//files.homepagemodules.de/b2001010/a_248.png[/img]

Es kann auch sinnvoll sein, in Form von Hilfe-Dateien den Color-Picker aufzurüsten und mehr Informationen anbieten, besonders dann, wenn er mit vielen Funktionen ausgerüstet ist!
Die folgende Hilfe lässt sich über ein "Fragezeichen-Icon" öffnen und schließen. Zusätzlich ist ein Schließen über das bekannte "X" möglich!

Installation für alle Template & Mobil

Einbau-Anleitung:

Iconbar öffnen unter "Amin > Layout > Iconbar"
Reiter "HTML" anklicken und das neue Script unter "HTML" eintragen!
Namen vergeben (z.B.: Hilfe) und unter "Name" eintragen!
Speichern nicht vergessen!
"Hilfe-Datei" in die Gruppe "Farben" unter die Standard-Farben schieben!

In Zeile 10 kann das Hilfe-Icon ausgetauscht werden!
In Zeile 3 wird das Info-Fenster formatiert und kann beliebig angepasst werden!
In Zeile 4 wird die Schriftgröße eingestellt!
In Zeile 15-36 kann der Hilfe-Text gestaltet werden. Hier, einschließlich "Glow"!

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
 
<style>
#icon_help_div {cursor:pointer; }
#icon_help {display: none; position: absolute; background-color: #ffffff;color:#383838;max-width: 6000px; max-height:400px; padding:10px;border: 5px double #222222; border-radius:5px; left: 0;  right:0; margin:auto; z-index: 999999; line-height:20px !important;text-align:left; overflow: auto;}
#icon_help ul {font-size:12px;margin-left:10px;cursor:default;}
#icon_help li {float:none;}
#icon_help h5 {color:#901000; margin:0px;}
#icon_help_close {display: none;font-size: 12px;margin-right: 7px;color:#901000;}
</style>
 
 
<div id="icon_help_div" class="xob_icon_cont"><img class="xob_icon xob_icon_on"  src="//files.homepagemodules.de/b2001010/a_248.png">
<div id="icon_help">
<div style="float: right;"><span><b>x</b></span></div>
 
<h5>Wie funktioniert die Farbauswahl?</h5>
<ul>
<li>Texte können mit den unterschiedlichsten Farben dargestellt werde!<br></li>
<li><b>Zuerst</b> wird der Text markiert, der eingefärbt werden soll!</li>
<li>Die Textfarbe kann durch Anklicken der oberen Standardfarben verändert werden!</li>
<li>Soll der Text mit einer besonderen Farbe versehen werden,  wird das mit einem Klick in die große Farbauswahl durchgeführt!</li>
<li>Im rechten Farbfeld kann die aktuelle Farbe eingesehen werden!</li>
<li>Die zuletzt genutzte Farbe wird im unteren Farbfeld gespeichert und kann durch ein Mausklick erneut verwendet werden!</li>
<li>Zusätzlich wird im unteren Feld zur Farbe der Farbcode angezeigt!</li>
</ul>
 
<br>
 
<h5>Wie funktioniert die Auswahl mit den Leuchtfarben "Glow"?</h5>
<ul>
<li>Texte können mit leuchtenden Farben dargestellt werde!</li>
<li><b>Zuerst</b> wird auch hier der Text markiert, der eingefärbt werden soll!</li>
<li>Die Glow-Textfarbe kann durch Anklicken der Glow-Farben verändert werden!</li>
<li>Zur Zeit stehen sieben unterschiedliche Leucht-Farben zur Verfügung!</li>
</ul>
 
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
$('#icon_help_div img').on('click',function(){
$(this).next().toggle();
});
 
$('#icon_help span').on('click',function(){
$('#icon_help').css('display','none');
});
 
});
</script>
 

Schließen

Bis dann, viel Erfolg beim Einbau und besten Dank an nobody für die inspirierende Idee!

Wolfgang

Antworten

#10 | Sehr große Hilfe-Datei für den Super Color-Picker! datum

30.03.2019 08:25 (zuletzt bearbeitet: 18.12.2024 13:18)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	4052
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1828

Sehr große Hilfe-Datei für den Super Color-Picker!
Aktualisiert 28.08.22

Fällt die Hilfe sehr groß aus und soll das Hilfe-Fenster klein bleiben, sind noch zusätzliche Themen-Spoiler nötig, die jeweils ein Hilfe-Thema öffnen!
Die folgende Hilfe lässt sich auch hier über ein "Fragezeichen-Icon" öffnen und schließen. Auch über das "X" ist ein Schließen möglich!
Mit Scroll-Funktion, mit zusätzliche Überschrift und automatischer Anpassung der Fensterbreite!

Installation für alle Template & Mobil

Einbau-Anleitung:

Iconbar öffnen unter "Amin > Layout > Iconbar"
Reiter "HTML" anklicken und das neue Script unter "HTML" eintragen!
Namen vergeben (z.B.: Hilfe) und unter "Name" eintragen!
Speichern nicht vergessen!
"Hilfe-Datei" in die Gruppe "Farben" unter die Standard-Farben schieben!

In Zeile 11+12 kann das Hilfe-Icon ausgetauscht werden!
In Zeile 2 wird das Info-Fenster formatiert und kann beliebig angepasst werden!
In Zeile 4 wird die Schriftgröße eingestellt!
In Zeile 18-36 kann der Hilfe-Text gestaltet werden. Hier, einschließlich "Glow"!

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
 
<style>
#icon_help {display: none; position:absolute; max-width: 500px; left:0; margin:55px; font-size:16px; background-color: #ffffff; color:#000000; padding:10px 35px 10px 10px; border:5px double #000000; border-radius:5px; z-index:99999; text-align:left;font-weight:bold;line-height:20px;}
#icon_help_scroll {max-height:220px; overflow: auto;text-align:left;}
#icon_help ul {line-height:20px;font-size:13px;display: none;margin-left:20px;}
#icon_help li {float:none;}
#icon_help h5:hover {color:#001090;cursor:pointer;}
#icon_help h5 {margin-right:10px;font-size:13px;white-space: nowrap;color:#901000;}
#icon_help_close_div {float:right;margin:-5px -25px 10px 0;font-weight:bold;cursor:pointer;}
</style>
 
<div id="icon_help_div" class="xob_icon_cont"><img class="xob_icon xob_icon_on" src="//files.homepagemodules.de/b2001010/a_248.png">
<div id="icon_help"><img src="//files.homepagemodules.de/b2001010/a_248.png"> <u>Hilfe Colorpicker</u>
<div id="icon_help_close_div">X</div>
<div style="clear:both;"></div>
 
<div id="icon_help_scroll">
 
<h5>Wie funktioniert die Farbauswahl?</h5>
<ul>
<li>Texte k&#246;nnen mit den unterschiedlichsten Farben dargestellt werde!</li>
<li><b>Zuerst</b> 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>
</ul>
 
<div style="clear:both;"></div>
 
<h5>Wie funktionieren die Leuchtfarben "Glow"?</h5>
<ul><li>Texte k&#246;nnen mit leuchtenden Farben dargestellt werde!</li>
<li><b>Zuerst</b> 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>
</ul>
 
</div>
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
$('#icon_help_div img, #icon_help h5').on('click',function(){
$(this).next().toggle();
});
 
$('#icon_help_close_div').on('click',function(){
$('#icon_help').hide();
});
 
});
</script>
 

Schließen

Interessante Links:

  • Sonderzeichen fürs Forum bereitstellen!
  • Meine komplette Forum-Iconbar zum herunterladen!
  • Iconbar fixieren - gut für lange Beiträge!
  • Multi-Dialog-Assistent für die Iconbar

Bis dann, viel Spaß beim Einbau!

Wolfgang

Antworten

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

Seite 1 von 3 « Seite 1 2 3 Seite »

Ähnliche Themen

Antworten

Letzter Beitrag

„Formatierte Gänsefüßchen“-Befehl in Iconbar - Color Picker, Farbe identifizieren!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Dankeschön

25.05.2025 19:29
von

Dankeschön • Zugriffe: 482

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

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

Iconbar & Navileiste fixieren - Teil 1(2)
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 19 23.06.2025 17:28
Dankeschön • Zugriffe: 4217

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

21.04.2025 18:20
von

Kipper-Spedition • Zugriffe: 3131

Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

29.05.2024 10:24
von

Wolfgang • Zugriffe: 3465

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

Skripte 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

25.10.2009 17:41
von

Wolfgang • Zugriffe: 15511

Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so übrig bleibt. von Wolfgang 0 10.04.2007 17:57
Wolfgang • Zugriffe: 20561

Forum Übersicht → XOBOR-Foren und Homepages →

Das neue Template Xobor (v6). → Große Farbauswahl / Super Color-Picker / Auch minimiert! - Teil 1-6

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: 45 €

56%