Farbe einfügen erweitern - Besonders im V6!

Antworten
#1
20.03.2021 11:52 (zuletzt bearbeitet: 20.03.2021 11:55)
avatar  Wolfgang
#1 Farbe einfügen erweitern - Besonders im V6!
avatar
Wolfgang
Mitglied

Wenn man im neuen Template (v6) "Farbe einfügen" aufruft, wird die Auswahl "modal" angezeigt.
Echt Klasse, finde ich super gut!
Hier wäre auch viel Platz für eine Erweiterung und würde nicht stören!





Vorschlag:
1. Die Farbauswahl erweitern
2. Eine Umschaltung von Schriftfarbe auf Hintergrundfarbe


Habe hier ein Vorab-Skript, dass mit Creator so zustande gekommen ist...
Hier nochmal besten Dank!
Wird einfach in der Iconbar angelegt!

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
 
<style>
.colormin_on {padding:5px 5px 0 6px;}
.colormin_on div {display:inline-block !important;width:25px; height:25px;margin:2px;border:1px solid #000000;border-radius:2px;text-align:left !important; cursor:pointer;}
.colormin_on div:hover {border-radius:50%;transition: border-radius 0.5s;}
 
#colormin_light {padding-left:5px;}
#colormin_light div {width:20px;display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
 
.schrift input[type="radio"]:hover {cursor:pointer;} 
.schrift input[type="radio"]:checked {cursor:default;} 
</style>
 
<div style="border:none;margin-left:10px;" class="schrift">
<input name="changeColor" id="schrift" type="radio" checked="checked"><span style="vertical-align:middle !important;padding:0 10px 0 5px;">Schrift</span>
<input name="changeColor" id="background" type="radio"><span style="vertical-align:middle;padding:0 0 0 5px;">Hintergrund</span>
</div>
 
<div class="colormin_on" data-dismiss="modal">
<div onclick="xob_insert ('[style=color:#000000;]','[/style]')" style="background-color: #000000" title="Schwarz">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993300;]','[/style]')" style="background-color: #993300" title="Orange dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333300;]','[/style]')" style="background-color: #333300" title="Olivegrün dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003300;]','[/style]')" style="background-color: #003300" title="Grün dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#003366;]','[/style]')" style="background-color: #003366" title="Himmelblau dunkel">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#000080;]','[/style]')" style="background-color: #000080" title="Marineblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333399;]','[/style]')" style="background-color: #333399" title="Indigo">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#333333;]','[/style]')" style="background-color: #333333" title="Dunkelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#800000;]','[/style]')" style="background-color: #800000" title="Kastanie">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9000;]','[/style]')" style="background-color: #FF9000" title="Orange">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808000;]','[/style]')" style="background-color: #808000" title="Olivegrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008000;]','[/style]')" style="background-color: #008000" title="Grün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#008080;]','[/style]')" style="background-color: #008080" title="Blaugrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#0000FF;]','[/style]')" style="background-color: #0000FF" title="Blau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#666699;]','[/style]')" style="background-color: #666699" title="Graublau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#808080;]','[/style]')" style="background-color: #808080" title="Grau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#BA2F34;]','[/style]')" style="background-color: #BA2F34" title="Rot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FF9900;]','[/style]')" style="background-color: #FF9900" title="Bernstein">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CC00;]','[/style]')" style="background-color: #99CC00" title="Gelbgrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#339966;]','[/style]')" style="background-color: #339966" title="Meeresgrün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#33CCCC;]','[/style]')" style="background-color: #33CCCC" title="Türkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#3366FF;]','[/style]')" style="background-color: #3366FF" title="Königsblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#800080;]','[/style]')" style="background-color: #800080" title="Lila">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#999999;]','[/style]')" style="background-color: #999999" title="Mittelgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF00FF;]','[/style]')" style="background-color: #FF00FF" title="Magenta">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC00;]','[/style]')" style="background-color: #FFCC00" title="Gold">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF00;]','[/style]')" style="background-color: #FFFF00" title="Gelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FF00;]','[/style]')" style="background-color: #00FF00" title="Limone">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00FFFF;]','[/style]')" style="background-color: #00FFFF" title="Aqua">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#00CCFF;]','[/style]')" style="background-color: #00CCFF" title="Meeresblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#993366;]','[/style]')" style="background-color: #993366" title="Violettrot">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCCCCC;]','[/style]')" style="background-color: #CCCCCC" title="Hellgrau">&nbsp;</div>
<br>
<div onclick="xob_insert ('[style=color:#FF99CC;]','[/style]')" style="background-color: #FF99CC" title="Rosa">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFCC99;]','[/style]')" style="background-color: #FFCC99" title="Pfirsich">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#FFFF99;]','[/style]')" style="background-color: #FFFF99" title="Hellgelb">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFCC;]','[/style]')" style="background-color: #CCFFCC" title="Blasses Grün">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CCFFFF;]','[/style]')" style="background-color: #CCFFFF" title="Blasses Türkis">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#99CCFF;]','[/style]')" style="background-color: #99CCFF" title="Helles Himmelblau">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#CC99FF;]','[/style]')" style="background-color: #CC99FF" title="Blasses Violett">&nbsp;</div>
<div onclick="xob_insert ('[style=color:#ffffff;]','[/style]')" style="background-color: #FFFFFF" title="Weiß">&nbsp;</div>
</div>
<br>
 
<div id="colormin_light" data-dismiss="modal">
<div title="Rot" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#484848;">rt</div>
<div title="Blau" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#484848;">bl</div>
<div title="Grün" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#484848;">gn</div>
<div title="Gelb" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#484848;">ge</div>
<div title="Gold" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#484848;">go</div>
<div title="Weiss" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#484848;">ws</div>
<div title="Schwarz" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</span></div>
</div>
 
 
<script>
window.addEventListener('load', function() {
  // Ersetzen von "background-color" mit "color"
  function switchToColor() {
    $('.colormin_on div').each(function(index, link) {
      $(this).attr('onclick', $(this).attr('onclick').replace("style=background-color:#", "style=color:#"));
    });
  }
  // Ersetzen von "color" mit "background-color"
  function switchToBackgroundColor() {
    $('.colormin_on div').each(function(index, link) {
      $(this).attr('onclick', $(this).attr('onclick').replace("style=color:#", "style=background-color:#"));
    });
  }
  // Umschaltung auf "Hintergrundfarbe" 
  function switchColorPicker() {
    $('input[type="radio"]#background').click(function() {
      if ($(this).is(":checked")) {
        switchToBackgroundColor();
      };
    });
    // Umschaltung auf "Schriftfarbe"
    $('input[type="radio"]#schrift').click(function() {
      if ($(this).is(":checked")) {
        switchToColor();
      };
    });
  }
 
  /* Nur für Templates v1-4 */
  // Umschaltung auf "Hintergrundfarbe" 
  switchColorPicker();
 
  /* Nur für Template v6 */
  // Umschaltung auf "Hintergrundfarbe" 
  $(window).on('shown.bs.modal', function() {
    switchColorPicker();
  });
  // Ersetzen von "background-color" mit "color"
  $(window).on('hidden.bs.modal', function() {
    switchToColor();
  });
});
</script>
 




Mehr hier: Große Farbauswahl, mit Background-Color

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge




 Antworten

 Beitrag melden
#2
20.03.2021 13:54
avatar  River
#2 RE: Farbe einfügen erweitern - Besonders im V6!
avatar
River
Mitglied

Hallo Wolfgang,

Für die erweiterte Farbauswahl finde ich immer noch den Colourpicker einfach super.
Wir haben die Standardfarben drin (Iconbar Xobor) plus den Colourpicker.

Dies als Anregung, wie die Farbauswahl auf unendlich viele Farbtöne erweitert werden kann - mit nur einem Icon in der Farbpalette, die ja so bleiben kann, wie sie jetzt ist.

Viele Grüße
River

-------------------------------------------------------------

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
#3
21.03.2021 08:50 (zuletzt bearbeitet: 21.03.2021 08:59)
avatar  Wolfgang
#3 RE: Farbe einfügen erweitern - Besonders im V6!
avatar
Wolfgang
Mitglied

Hallo River,
danke für Deine schnelle Antwort.
Es ist wie immer Geschmacksache, wie das Forum aussehen soll, welche Funktionen es erfüllen soll und wen man ansprechen will!
Habe den großen Colorpicker jetzt mit dem Hintergrund-Button und Leuchtfarben ausgerüstet !
Läuft auch super im neuen V6!



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
<style type="text/css">
#cpicker_deluxe2 {padding:10px !important;margin:0 5px 5px 5px;border: 1px dotted #555555;background-color: #f6f6f6;}
#cpicker_deluxe2 .cpbase_deluxe2 {cursor:crosshair;padding:4px;}
#cpicker_deluxe2 .previewColor_deluxe2 {width: 40px;margin-left:5px; background:#ECEEFB;cursor: default;}
#cpicker_deluxe2 .chosenColor_deluxe2 {text-align:left;margin-left:1px;padding:8px; background:#ECEEFB; font-weight:bold; font-size:14px;color:#000000;cursor:pointer;}
 
.color_standard {margin:10px 0 0 15px !important;}
.singlecol .color_standard {margin:5px 0 0 0 !important;}
.color_standard img {margin:0 5px !important;width:20px; height:20px;text-align:left !important; cursor:pointer;border:1px solid #ffffff;}
.color_standard img:hover {transition: border 0.5s;border:1px solid #000000 !important;}
 
#colormin_light {margin:0 0 0 10px;}
#colormin_light div {width:20px;display:inline-block !important;padding:0 9px !important; border:none;cursor:pointer;}
#colormin_light div:hover {font-weight:bold;}
 
.schrift input[type="radio"] {box-shadow:none !important;}
.schrift input[type="radio"]:hover {cursor:pointer;} 
.schrift input[type="radio"]:checked {cursor:default;}
.schrift {border:none !important;margin:0 0 0 10px !important;color:#000000 !important;} 
</style>
 
 
<!-- Standardfarben -->
<div class="color_standard" data-dismiss="modal">
<div onclick="xob_insert('[rot]','[/rot]')" class="xob_icon_cont"><img title="[rot][/rot]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/rot_15.gif"></div>
<div onclick="xob_insert('[blau]','[/blau]')" class="xob_icon_cont"><img title="[blau][/blau]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/blau_15.gif"></div>
<div onclick="xob_insert('[gruen]','[/gruen]')" class="xob_icon_cont"><img title="[gruen][/gruen]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/gruen_15.gif"></div>
<div onclick="xob_insert('[orange]','[/orange]')" class="xob_icon_cont"><img title="[orange][/orange]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/orange_15.gif"></div>
<div onclick="xob_insert('[lila]','[/lila]')" class="xob_icon_cont"><img title="[lila][/lila]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/lila_15.gif"></div>
<div onclick="xob_insert('[weiss]','[/weiss]')" class="xob_icon_cont"><img title="[weiss][/weiss]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/weiss_15.gif"></div>
<div onclick="xob_insert('[schwarz]','[/schwarz]')" class="xob_icon_cont"><img title="[schwarz][/schwarz]" class="xob_icon" src="//img.homepagemodules.de/ds/static/colors/schwarz_15.gif"></div>
</div>
<div style="clear:both;"></div>
 
<!-- Glow -->
<div id="colormin_light" data-dismiss="modal">
<div class="xob_icon_cont" title="Rot" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 80px red, 0 0 100px red;color:#484848;">rt</div>
<div class="xob_icon_cont" title="Blau" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 80px blue, 0 0 100px blue;color:#484848;">bl</div>
<div class="xob_icon_cont" title="Grün" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 80px green, 0 0 100px green;color:#484848;">gn</div>
<div class="xob_icon_cont" title="Gelb" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 80px yellow]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 80px yellow, 0 0 100px yellow;color:#484848;">ge</div>
<div class="xob_icon_cont" title="Gold" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 80px #d49f00]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 80px #d49f00, 0 0 100px #d49f00;color:#484848;">go</div>
<div class="xob_icon_cont" title="Weiss" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 80px white, 0 0 100px white;color:#484848;">ws</div>
<div class="xob_icon_cont" title="Schwarz" onClick="xob_insert ('[style=letter-spacing: 1.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')" style="text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 80px black, 0 0 100px black;color:#eeeeee;">sw</span></div>
 
</div><div style="clear:both;"></div>
 
<!-- Umschaltung -->
<div class="schrift">
<input name="changeColor" type="radio" checked="checked"><span style="padding:0 10px 0 5px;">Schrift</span>
<input name="changeColor" id="background2" type="radio"><span style="padding:0 0 0 5px;">Hintergrund</span>
</div>
<div style="clear:both;"></div>
 
<!-- Farbtabelle -->
<div id="cpicker_deluxe2">
<table  border="1" width="auto" cellpadding="0" cellspacing="0" style="border:1px solid #888888 !important;">
<tr><td class="cpbase_deluxe2" title="Farbe auswählen!"></td>
<td class="previewColor_deluxe2" title="Farbvorschau!"></td></tr>
<tr><td data-dismiss="modal" class="chosenColor_deluxe2" colspan="2" title="Erst Farbe auswählen, dann einfügen!">Keine Farbe ausgewählt!</td></tr>
</table>
</div>
 
 
<script type="text/javascript">
window.addEventListener('load', function() {
 
<!-- https://www.interclasse.com/scripts/colorpicker.php -->
<!-- edited for compatibility with the xobor forum software -->
 
function switchColorPicker() {
 
var artabus = '';
var total = 1657;
var aR = new Array(total);
var aG = new Array(total);
var aB = new Array(total);
for (var i = 0; i < 256; i++) {
aR[i + 510] = aR[i + 765]  = aG[i + 1020] = aG[i + 5 * 255] = aB[i]       = aB[i + 255]  = 0;
aR[510 - i] = aR[i + 1020] = aG[i]        = aG[1020 - i]    = aB[i + 510] = aB[1530 - i] = i;
aR[i]       = aR[1530- i ] = aG[i + 255]  = aG[i + 510]     = aB[i + 765] = aB[i + 1020] = 255;
if (i < 255) {
aR[i / 2 + 1530] = 127;
aG[i / 2 + 1530] = 127;
aB[i / 2 + 1530] = 127;
}
}
 
var hexbase = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
var jl = new Array();
for (var x = 0; x < 16; x++) {
for (var y = 0; y < 16; y++) {
jl.push(hexbase[x] + hexbase[y]);
}
}
 
var colortable = $('<table></table>').attr({'border': 0,'cellspacing': 0,'cellpadding': 0}); 
colortable.click(function(){
var cColorDec	= hex2dec('FFFFFF') - hex2dec(artabus.substr(1));
var cColorHex	= dec2hex(cColorDec, 6);
$('#cpicker_deluxe2 .chosenColor_deluxe2').html(artabus).css({'background-color': artabus,'color': '#' + cColorHex});
});
 
var H = W = 63;
for (var Y = 0; Y <= H; Y++){
 
// 'height',..... Die Höhe eines Pixels bestimmt indirekt die Gesamthöhe des Farbauswahlfensters
var row = $('<tr></tr>').css('height', 3);
var j   = Math.round(Y * (510 / (H + 1)) - 255);
 
for (var X = 0; X <= W; X++){
var i = Math.round(X * (total / W));
var R = aR[i] - j;
 
if (R < 0)
R = 0;
if (R > 255 || isNaN(R))
R = 255;
var G = aG[i] - j;
if (G < 0)
G = 0;
if (G > 255 || isNaN(G))
G = 255;
var B = aB[i] - j;
if (B < 0)
B = 0;
if (B > 255 || isNaN(B))
B = 255;
 
// 'width',..... Die Breite eines Pixels bestimmt indirekt die Gesamtbreite des Farbauswahlfensters 
var column = $('<td></td>').css({'width': 5,'background': '#' + jl[R] + jl[G] + jl[B]}).attr('bgcolor', '#' + jl[R] + jl[G] + jl[B]);
 
column.mouseover(function(){
artabus = $(this).attr('bgcolor');
$('#cpicker_deluxe2 .previewColor_deluxe2').css('background-color', artabus);
});
row.append(column);
}
colortable.append(row);
}
$('#cpicker_deluxe2 .cpbase_deluxe2').empty().append(colortable);
 
 
// Umschaltung von "color" auf "background"
$('#cpicker_deluxe2 .chosenColor_deluxe2').click(function(){
if ($('input[type="radio"]#background2').is(":checked")) {
xob_insert('[style=background-color:' + $(this).html() + ']', '[/style]');
} else {
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();
}
 
};
 
switchColorPicker();
 
$(window).on('shown.bs.modal', function() {
switchColorPicker();
});
 
});
</script>
 



Wer Interesse hat, mehr hier: Große Farbauswahl Deluxe, mit Background-Color - Teil 3!



Bis dann
Wolfgang

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge




 Antworten

 Beitrag melden
#4
21.03.2021 09:14
avatar  River
#4 RE: Farbe einfügen erweitern - Besonders im V6!
avatar
River
Mitglied

Hallo Wolfgang,

Die Idee war weniger der Geschmack, sondern die Möglichkeit der benutzerdefinierten Konfiguration der Farbe.

Als Admin würde ich es so machen: Die Farben definieren (per Farbkachel), die ich selber am häufigsten brauche und würde beobachten, welche anderen Farben die User so am häufigsten verwenden. Das bekommt man dann mit der Zeit schon raus. Manche Forenthemen haben sogar eigene Farben (Fußball etc.).
Wenn es da eine gewisse Häufigkeit gibt, würde ich deren Farben ebenfalls über Farbkachel bereit stellen.

Den Colourpicker würde ich auch in eine Farbkachel packen - so dass sich der Colourpicker öffnet, wenn man auf diese Farbkachel klickt. Diese Farbkachel würde ich an die letzte Position stellen (eigentlich sehe ich es am häufigsten, dass der Standard zuerst und benutzerdefiniert am Ende kommt - z.B. bei Selektoren etc.).

Somit könnte man das Fenster mit den Farbkacheln so klein aber userfreundlich wie möglich halten (Schnellzugriff der gebräuchlichsten Farben plus Colourpicker).

Ich fand schon immer, dass man den Colourpicker zu den Farbkacheln packen sollte. Somit finde ich deine Lösung nun prima, zumal ja zusätzliche Farbkacheln per Code hinzugefügt werden können.

Super Sache. Und es freut mich sehr, dass du meine Anregung mit einbezogen hast.

Viele Grüße
River

-------------------------------------------------------------

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!