Skip to Content

Wiki source code of Color Themes Extensions

Last modified by Vincent Massol on 2024/11/19 16:12
Show last authors
1 {{velocity}}
2 $xwiki.ssx.use("Standards.WebHome")
3 {{/velocity}}
4
5 {{velocity}}
6 $xwiki.ssx.use("Standards.Icons")
7 {{/velocity}}
8
9 = Color Themes Extensions =
10
11 {{toc/}}
12
13 == Remarks ==
14
15 * Difficulties in determine where textPrimaryColor and textSecondaryColor goes;
16
17 == Needed Colors ==
18
19 === -- -Add Menu Entry Color- -- ===
20
21 * **Fixed** [[XE-796: Customizable "Add" menu entry from the Color Theme Wizard>>http://jira.xwiki.org/jira/browse/XE-796]]
22 * Problem [[XSCOLIBRI-221>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-221]]
23 * background-color for .actionmenu .tmCreate (currently #4D9244)
24
25 === Selected-Highlight Color ===
26
27 Besided $theme.highlightColor we would need a $theme.selectedColor that can be the background of a selected value.
28 This would be useful in:
29 - [[Rights>>Improvements.Rights43Proposal]]: mark right that are changed this session and that will be applied after Save;
30 - [[Hightlight applied filters in livetable>>http://markmail.org/message/5maylva3vjgre66c]]: mark what filter is currently applied
31
32
33 === Light Background Color ===
34
35 User profile bg, Watchlist, Import UI, etc.
36
37 {{html}}
38 <ul class="showColors">
39 <li style="background-color: #F7F7F7;" class="color dark">
40 #F7F7F7
41 </li>
42 </ul>
43 <div class="clearfloats"></div>
44 {{/html}}
45
46 === -- -Actions/Notification Colors- -- ===
47
48 * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
49
50 {{html}}
51 <ul class="showColors">
52 <li style="background-color: #EFEFEF; color: #336699;" class="color">
53 #336699 Info
54 </li>
55 <li style="background-color: #EFEFEF; color: #008000;" class="color">
56 #008000 Success
57 </li>
58 <li style="background-color: #EFEFEF; color: #D6AE00;" class="color">
59 #D6AE00 Warning
60 </li>
61 <li style="background-color: #EFEFEF; color: #CC3333;" class="color">
62 #CC3333 Error
63 </li>
64 </ul>
65 <div class="clearfloats"></div>
66 {{/html}}
67
68 {{html}}
69 <ul class="showColors">
70 <li style="background-color: #336699;" class="color light">
71 #336699 Info
72 </li>
73 <li style="background-color: #008000;" class="color light">
74 #008000 Success
75 </li>
76 <li style="background-color: #D6AE00;" class="color light">
77 #D6AE00 Warning
78 </li>
79 <li style="background-color: #CC3333;" class="color light">
80 #CC3333 Error
81 </li>
82 </ul>
83 <div class="clearfloats"></div>
84 {{/html}}
85
86 ==== -- -A. History Compare Versions- -- ====
87
88 * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
89 * Obs. Could use an opacity property for the red color
90
91 skin/skins/colibri/colibri.css
92 .diffremoveword ; .diffaddword
93 [[image:history.png||width="600px"]]
94
95 {{html}}
96 <ul class="showColors">
97 <li style="background-color: #CA9A9B;" class="color light">
98 #CA9A9B
99 </li>
100 <li style="background-color: #287F00;" class="color light">
101 #287F00
102 </li>
103 </ul>
104 <div class="clearfloats"></div>
105 {{/html}}
106
107 ==== -- -B. Add Actions (Original Version)- -- ====
108
109 xwiki/resources/js/xwiki/viewers/attachments.css
110 .add-file-input
111 [[image:attachments.png]]
112
113 {{html}}
114 <ul class="showColors">
115 <li style="background-color: #287F00;" class="color light">
116 #287F00
117 </li>
118 </ul>
119 <div class="clearfloats"></div>
120 {{/html}}
121
122 ==== -- -C. Boxes- -- ====
123
124 * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
125
126 skin/skins/colibri/colibri.css
127 .xwikirenderingerror
128 .errormessage, .warningmessage, .infomessage, .plainmessage
129 [[image:infoBox.png||width="600px"]]
130
131 {{html}}
132 <ul class="showColors">
133 <li style="background-color: #E14726;" class="color light">
134 <span class="iconExclamation">Error: #E14726</span>
135 </li>
136 <li style="background-color: #D5A13D;" class="color light">
137 <span class="iconError">Warning: #D5A13D</span>
138 </li>
139 <li style="background-color: #336699;" class="color light">
140 <span class="iconInfo">Info: #336699</span>
141 </li>
142 </ul>
143 <div class="clearfloats"></div>
144 {{/html}}
145
146 ==== -- -D. Notification- -- ====
147
148 * **Fixed** [[XWIKI-5838: Make notification.css use the notification Color Theme variables>>http://jira.xwiki.org/jira/browse/XWIKI-5838]]
149
150 xwiki/resources/uicomponents/widgets/notification.css
151 [[image:notifications.png]]
152
153 {{html}}
154 <ul class="showColors">
155 <li style="background-color: #226688;" class="color light">
156 Info: #226688
157 </li>
158 <li style="background-color: #AA0000;" class="color light">
159 Error: #AA0000
160 </li>
161 <li style="background-color: #FFDD88; color: #333300" class="color">
162 Warning: #FFDD88
163 </li>
164 <li style="background-color: #333333;" class="color light">
165 <span class="iconSpinner">Progress: #333333</span>
166 </li>
167 <li style="background-color: #116600;" class="color light">
168 Done: #116600
169 </li>
170 </ul>
171 <div class="clearfloats"></div>
172 {{/html}}
173
174 ==== -- -E. Groups- -- ====
175
176 * **Fixed** [[XWIKI-5837: Make usersandgroups.css use the current Color Theme variables>>http://jira.xwiki.org/jira/browse/XWIKI-5837]]
177
178 xwiki\resources\js\xwiki\usersandgroups\usersandgroups.css
179 #errMsg
180 [[image:group.png]]
181
182 {{html}}
183 <ul class="showColors">
184 <li style="background-color: #D70;" class="color light">
185 #D70
186 </li>
187 </ul>
188 <div class="clearfloats"></div>
189 {{/html}}
190
191 === Other ===
192
193
194
195 ==== F. Code Macro ====
196
197 skin/skins/colibri/colibri.css
198 Syntax 1.0 .java-keyword, .java-object, .xml-tag, .sql-keyword, .java-quote
199 http://code.xwiki.org/xwiki/bin/view/Macros/CodeMacro20
200
201 {{code language="c"}}
202 //valid
203 var x: Int = 1;
204 var s: String = "abcdefg";
205
206 //also valid
207 var x: = 1;
208 var s: = "abcdefg";
209
210 //also valid
211 var x: = 1
212 ...
213 {{/code}}
214
215 {{code language="sql" width="css"}}
216 body {
217 font-size: 13px;
218 font-family: Arial, 'Times New Roman', sans-serif;
219 width: 900px;
220 margin: 0 auto;
221 color: #303030;
222 }
223 {{/code}}
224
225 {{code width="xml"}}
226 <?xml version="1.0"?>
227 <doc>
228 <tag argument="value">Content</tag>
229 {{/code}}
230
231 {{code language="javascript"}}
232 // Everything else, we just grab the value
233 return (elem.value || "").replace(/\r/g, "");
234
235 }
236
237 return undefined;
238 }
239
240 if ( typeof value === "number" )
241 value += '';
242
243 return this.each(function(){
244 if ( this.nodeType != 1 )
245 return;
246 {{/code}}
247
248 {{code language="java"}}
249 body {
250 font-size: 13px;
251 font-family: Arial, 'Times New Roman', sans-serif;
252 width: 900px;
253 margin: 0 auto;
254 color: #303030;
255 }
256 {{/code}}
257
258 ==== G. Panel Wizard Maquette ====
259
260 skin/skins/colibri/colibri.css
261
262 [[image:panelMachette.png]]
263
264 ==== H. WYSIWYG Selection ====
265
266 xwiki/resources/js/xwiki/wysiwyg/xwe/stylesheets/Wysiwyg.css
267
268 [[image:selectMacro.png]]
269
270
271
272 = Colors to add to the ColorThemeClass (DRAFT) =
273
274 (% class="leftMargin column50" %)
275 (((
276 Add Menu Entry Color ([[JIRA: XSCOLIBRI-221>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-221]])
277
278 panelLinkColor ([[JIRA:XSCOLIBRI-159>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-159]])
279
280 backgroundAlternativeColor TODO: find a better name (should this one be used for message boxes too?)
281
282 textColorAdd : "Add" links, added content in the version diff
283 textColorDelete : "Delete" links, deleted content in the version diff
284
285 notificationTextColor
286 notificationErrorBackgroundColor
287 notificationWarningBackgroundColor
288 notificationInfoBackgroundColor
289 notificationDoneBackgroundColor
290 notificationProgressBackgroundColor
291
292 messageErrorTextColor (for message boxes and other error messages in custom apps)
293 messageWarningTextColor
294 messageInfoTextColor
295 messageOKTextColor
296
297
298 Wysiwyg selection should use highlightColor.
299 )))
300
301 (% class="left column50" %)
302 (((
303 panelLinkColor - agree
304
305 - we have primary/secondary naming. We have backgroundSecondaryColor, but miss backgroundPrimaryColor, though this naming is not very explicit either.
306
307 actionAddColor , actionDeleteColor
308
309 if we have only a solo notification's text color, than the Warning Color must be darker, so the white is seen correctly.
310
311 I would like to have the same color on the add|delete actions as on the done|error notifications, and done|ok messages.
312
313 Var 1:
314 infoTextColor | infoBackgroundColor
315 successfulTextColor | successfulBackgroundColor
316 progressTextColor | progressBackgroundColor
317 warningTextColor | warningBackgroundColor
318 errorTextColor | errorBackgroundColor
319
320 Var 2:
321 infoColor, successfulColor, progressColor, warningColor, errorColor
322 neutralColor
323 )))
324
325 {{html}}
326 <div class="clearfloats"></div>
327 {{/html}}
328
329
330 {{html}}
331 <ul class="showColors">
332 <li style="background-color: #c2d1f0; color: #3366cc" class="color">
333 Info
334 </li>
335 <li style="background-color: #d1e6b3; color: #66aa00" class="color">
336 Successful
337 </li>
338 <li style="background-color: #e6e6e6; color: #99a0a6" class="color">
339 Progress
340 </li>
341 <li style="background-color: #f3e7b3; color: #d6ae00" class="color">
342 Warning
343 </li>
344 <li style="background-color: #f0c2c2; color: #cc3333" class="color">
345 Error
346 </li>
347 </ul>
348 <div class="clearfloats"></div>
349 {{/html}}
350
351 {{html}}
352 <ul class="showColors">
353 <li style="background-color: #3366cc; color: #fff" class="color">
354 Info
355 </li>
356 <li style="background-color: #66aa00; color: #fff" class="color">
357 Successful
358 </li>
359 <li style="background-color: #99a0a6; color: #fff" class="color">
360 Progress
361 </li>
362 <li style="background-color: #d6ae00; color: #fff" class="color">
363 Warning
364 </li>
365 <li style="background-color: #cc3333; color: #fff" class="color">
366 Error
367 </li>
368 </ul>
369 <div class="clearfloats"></div>
370 {{/html}}
371
372 {{html}}
373 <ul class="showColors">
374 <li style="background-color: #3366cc; color: #000" class="color">
375 Info
376 </li>
377 <li style="background-color: #66aa00; color: #000" class="color">
378 Successful
379 </li>
380 <li style="background-color: #99a0a6; color: #000" class="color">
381 Progress
382 </li>
383 <li style="background-color: #d6ae00; color: #000" class="color">
384 Warning
385 </li>
386 <li style="background-color: #cc3333; color: #000" class="color">
387 Error
388 </li>
389 </ul>
390 <div class="clearfloats"></div>
391 {{/html}}
392
393 = Conclusion =
394
395 * **Added in** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
396
397 * $theme.notificationInfoColor
398 * $theme.notificationSuccessColor
399 * $theme.notificationWarningColor
400 * $theme.notificationErrorColor
401
402 {{html}}
403 <ul class="showColors">
404 <li style="background-color: #EFEFEF; color: #336699;" class="color">
405 #336699 Info
406 </li>
407 <li style="background-color: #EFEFEF; color: #008000;" class="color">
408 #008000 Success
409 </li>
410 <li style="background-color: #EFEFEF; color: #D6AE00;" class="color">
411 #D6AE00 Warning
412 </li>
413 <li style="background-color: #EFEFEF; color: #CC3333;" class="color">
414 #CC3333 Error
415 </li>
416 </ul>
417 <div class="clearfloats"></div>
418 {{/html}}
419
420 {{html}}
421 <ul class="showColors">
422 <li style="background-color: #336699;" class="color light">
423 #336699 Info
424 </li>
425 <li style="background-color: #008000;" class="color light">
426 #008000 Success
427 </li>
428 <li style="background-color: #D6AE00;" class="color light">
429 #D6AE00 Warning
430 </li>
431 <li style="background-color: #CC3333;" class="color light">
432 #CC3333 Error
433 </li>
434 </ul>
435 <div class="clearfloats"></div>
436 {{/html}}

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected