Skip to Content

Wiki source code of Color Themes Extensions

Last modified by Vincent Massol on 2024/11/19 16:12
Hide last authors
Ecaterina Moraru (Valica) 135.2 1 {{velocity}}
2 $xwiki.ssx.use("Standards.WebHome")
3 {{/velocity}}
evalica 88.1 4
Ecaterina Moraru (Valica) 135.2 5 {{velocity}}
6 $xwiki.ssx.use("Standards.Icons")
7 {{/velocity}}
evalica 6.1 8
evalica 75.1 9 = Color Themes Extensions =
evalica 88.1 10
evalica 75.1 11 {{toc/}}
12
evalica 133.5 13 == Remarks ==
Ecaterina Moraru (Valica) 135.2 14
evalica 3.1 15 * Difficulties in determine where textPrimaryColor and textSecondaryColor goes;
evalica 95.1 16
evalica 96.1 17 == Needed Colors ==
evalica 132.1 18
evalica 133.15 19 === -- -Add Menu Entry Color- -- ===
Ecaterina Moraru (Valica) 135.2 20
evalica 133.8 21 * **Fixed** [[XE-796: Customizable "Add" menu entry from the Color Theme Wizard>>http://jira.xwiki.org/jira/browse/XE-796]]
evalica 133.7 22 * Problem [[XSCOLIBRI-221>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-221]]
evalica 133.3 23 * background-color for .actionmenu .tmCreate (currently #4D9244)
24
evalica 132.1 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
evalica 97.1 33 === Light Background Color ===
Ecaterina Moraru (Valica) 135.2 34
evalica 100.1 35 User profile bg, Watchlist, Import UI, etc.
evalica 101.1 36
evalica 93.1 37 {{html}}
38 <ul class="showColors">
evalica 104.1 39 <li style="background-color: #F7F7F7;" class="color dark">
evalica 94.1 40 #F7F7F7
evalica 93.1 41 </li>
42 </ul>
43 <div class="clearfloats"></div>
44 {{/html}}
evalica 4.1 45
evalica 133.15 46 === -- -Actions/Notification Colors- -- ===
evalica 7.1 47
evalica 133.9 48 * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
evalica 66.1 49
evalica 133.9 50 {{html}}
51 <ul class="showColors">
evalica 133.11 52 <li style="background-color: #EFEFEF; color: #336699;" class="color">
evalica 133.14 53 #336699 Info
evalica 133.11 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">
evalica 133.9 70 <li style="background-color: #336699;" class="color light">
evalica 133.14 71 #336699 Info
evalica 133.9 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
evalica 133.15 86 ==== -- -A. History Compare Versions- -- ====
evalica 133.8 87
evalica 133.18 88 * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
evalica 133.8 89 * Obs. Could use an opacity property for the red color
90
evalica 62.1 91 skin/skins/colibri/colibri.css
evalica 63.1 92 .diffremoveword ; .diffaddword
evalica 37.1 93 [[image:history.png||width="600px"]]
evalica 17.1 94
evalica 4.1 95 {{html}}
96 <ul class="showColors">
evalica 24.1 97 <li style="background-color: #CA9A9B;" class="color light">
98 #CA9A9B
evalica 4.1 99 </li>
evalica 24.1 100 <li style="background-color: #287F00;" class="color light">
101 #287F00
evalica 4.1 102 </li>
103 </ul>
evalica 33.1 104 <div class="clearfloats"></div>
evalica 4.1 105 {{/html}}
evalica 26.1 106
evalica 133.15 107 ==== -- -B. Add Actions (Original Version)- -- ====
evalica 66.1 108
evalica 83.1 109 xwiki/resources/js/xwiki/viewers/attachments.css
evalica 64.1 110 .add-file-input
evalica 32.1 111 [[image:attachments.png]]
evalica 26.1 112
113 {{html}}
114 <ul class="showColors">
115 <li style="background-color: #287F00;" class="color light">
116 #287F00
117 </li>
118 </ul>
evalica 33.1 119 <div class="clearfloats"></div>
evalica 26.1 120 {{/html}}
evalica 34.1 121
evalica 133.15 122 ==== -- -C. Boxes- -- ====
evalica 66.1 123
evalica 133.18 124 * **Fixed** [[XE-797: Add notification colors: info, success, warning, error to ColorTheme variables>>http://jira.xwiki.org/jira/browse/XE-797]]
125
evalica 62.1 126 skin/skins/colibri/colibri.css
evalica 63.1 127 .xwikirenderingerror
evalica 65.1 128 .errormessage, .warningmessage, .infomessage, .plainmessage
evalica 37.1 129 [[image:infoBox.png||width="600px"]]
evalica 34.1 130
131 {{html}}
132 <ul class="showColors">
evalica 40.1 133 <li style="background-color: #E14726;" class="color light">
evalica 46.1 134 <span class="iconExclamation">Error: #E14726</span>
evalica 34.1 135 </li>
evalica 41.1 136 <li style="background-color: #D5A13D;" class="color light">
evalica 46.1 137 <span class="iconError">Warning: #D5A13D</span>
evalica 39.1 138 </li>
139 <li style="background-color: #336699;" class="color light">
evalica 46.1 140 <span class="iconInfo">Info: #336699</span>
evalica 39.1 141 </li>
evalica 34.1 142 </ul>
143 <div class="clearfloats"></div>
144 {{/html}}
evalica 48.1 145
evalica 133.20 146 ==== -- -D. Notification- -- ====
evalica 71.1 147
evalica 133.20 148 * **Fixed** [[XWIKI-5838: Make notification.css use the notification Color Theme variables>>http://jira.xwiki.org/jira/browse/XWIKI-5838]]
149
evalica 83.1 150 xwiki/resources/uicomponents/widgets/notification.css
evalica 71.1 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
evalica 133.19 174 ==== -- -E. Groups- -- ====
evalica 88.1 175
evalica 133.21 176 * **Fixed** [[XWIKI-5837: Make usersandgroups.css use the current Color Theme variables>>http://jira.xwiki.org/jira/browse/XWIKI-5837]]
evalica 133.17 177
evalica 88.1 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
Ecaterina Moraru (Valica) 135.2 191 === Other ===
evalica 88.1 192
Ecaterina Moraru (Valica) 135.2 193
194
evalica 133.16 195 ==== F. Code Macro ====
evalica 88.1 196
evalica 79.1 197 skin/skins/colibri/colibri.css
evalica 77.1 198 Syntax 1.0 .java-keyword, .java-object, .xml-tag, .sql-keyword, .java-quote
evalica 76.1 199 http://code.xwiki.org/xwiki/bin/view/Macros/CodeMacro20
200
Ecaterina Moraru (Valica) 135.2 201 {{code language="c"}}
202 //valid
evalica 68.1 203 var x: Int = 1;
204 var s: String = "abcdefg";
evalica 66.1 205
evalica 68.1 206 //also valid
207 var x: = 1;
208 var s: = "abcdefg";
209
210 //also valid
211 var x: = 1
Ecaterina Moraru (Valica) 135.2 212 ...
213 {{/code}}
evalica 68.1 214
Ecaterina Moraru (Valica) 135.2 215 {{code language="sql" width="css"}}
216 body {
evalica 70.1 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}}
evalica 67.1 224
Ecaterina Moraru (Valica) 135.2 225 {{code width="xml"}}
226 <?xml version="1.0"?>
evalica 69.1 227 <doc>
228 <tag argument="value">Content</tag>
229 {{/code}}
230
Ecaterina Moraru (Valica) 135.2 231 {{code language="javascript"}}
232 // Everything else, we just grab the value
evalica 70.1 233 return (elem.value || "").replace(/\r/g, "");
evalica 69.1 234
evalica 70.1 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
Ecaterina Moraru (Valica) 135.2 248 {{code language="java"}}
249 body {
evalica 70.1 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}}
evalica 78.1 257
evalica 133.16 258 ==== G. Panel Wizard Maquette ====
evalica 88.1 259
evalica 79.1 260 skin/skins/colibri/colibri.css
evalica 78.1 261
evalica 82.1 262 [[image:panelMachette.png]]
evalica 83.1 263
evalica 133.16 264 ==== H. WYSIWYG Selection ====
evalica 85.1 265
evalica 89.1 266 xwiki/resources/js/xwiki/wysiwyg/xwe/stylesheets/Wysiwyg.css
267
evalica 90.1 268 [[image:selectMacro.png]]
Marta 105.1 269
evalica 133.10 270
271
Ecaterina Moraru (Valica) 135.2 272 = Colors to add to the ColorThemeClass (DRAFT) =
Marta 105.1 273
evalica 109.1 274 (% class="leftMargin column50" %)
evalica 106.1 275 (((
evalica 133.4 276 Add Menu Entry Color ([[JIRA: XSCOLIBRI-221>>http://jira.xwiki.org/jira/browse/XSCOLIBRI-221]])
277
Marta 105.1 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.
evalica 106.1 299 )))
evalica 107.1 300
evalica 111.1 301 (% class="left column50" %)
evalica 107.1 302 (((
evalica 110.1 303 panelLinkColor - agree
evalica 107.1 304
evalica 112.1 305 - we have primary/secondary naming. We have backgroundSecondaryColor, but miss backgroundPrimaryColor, though this naming is not very explicit either.
evalica 110.1 306
evalica 113.1 307 actionAddColor , actionDeleteColor
evalica 110.1 308
evalica 115.1 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
evalica 127.1 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
evalica 128.1 316 progressTextColor | progressBackgroundColor
evalica 127.1 317 warningTextColor | warningBackgroundColor
318 errorTextColor | errorBackgroundColor
319
evalica 129.1 320 Var 2:
321 infoColor, successfulColor, progressColor, warningColor, errorColor
322 neutralColor
evalica 107.1 323 )))
evalica 115.1 324
Ecaterina Moraru (Valica) 135.2 325 {{html}}
326 <div class="clearfloats"></div>
327 {{/html}}
evalica 116.1 328
329
330 {{html}}
331 <ul class="showColors">
evalica 121.1 332 <li style="background-color: #c2d1f0; color: #3366cc" class="color">
evalica 117.1 333 Info
evalica 116.1 334 </li>
evalica 121.1 335 <li style="background-color: #d1e6b3; color: #66aa00" class="color">
evalica 127.1 336 Successful
evalica 116.1 337 </li>
evalica 122.1 338 <li style="background-color: #e6e6e6; color: #99a0a6" class="color">
evalica 119.1 339 Progress
340 </li>
evalica 122.1 341 <li style="background-color: #f3e7b3; color: #d6ae00" class="color">
evalica 117.1 342 Warning
evalica 116.1 343 </li>
evalica 120.1 344 <li style="background-color: #f0c2c2; color: #cc3333" class="color">
evalica 119.1 345 Error
evalica 116.1 346 </li>
347 </ul>
348 <div class="clearfloats"></div>
349 {{/html}}
evalica 123.1 350
351 {{html}}
352 <ul class="showColors">
evalica 124.1 353 <li style="background-color: #3366cc; color: #fff" class="color">
evalica 123.1 354 Info
355 </li>
evalica 124.1 356 <li style="background-color: #66aa00; color: #fff" class="color">
evalica 127.1 357 Successful
evalica 123.1 358 </li>
evalica 124.1 359 <li style="background-color: #99a0a6; color: #fff" class="color">
evalica 123.1 360 Progress
361 </li>
evalica 124.1 362 <li style="background-color: #d6ae00; color: #fff" class="color">
evalica 123.1 363 Warning
364 </li>
evalica 124.1 365 <li style="background-color: #cc3333; color: #fff" class="color">
evalica 123.1 366 Error
367 </li>
368 </ul>
369 <div class="clearfloats"></div>
370 {{/html}}
371
372 {{html}}
373 <ul class="showColors">
evalica 126.1 374 <li style="background-color: #3366cc; color: #000" class="color">
evalica 123.1 375 Info
376 </li>
evalica 126.1 377 <li style="background-color: #66aa00; color: #000" class="color">
evalica 127.1 378 Successful
evalica 123.1 379 </li>
evalica 126.1 380 <li style="background-color: #99a0a6; color: #000" class="color">
evalica 123.1 381 Progress
382 </li>
evalica 126.1 383 <li style="background-color: #d6ae00; color: #000" class="color">
evalica 123.1 384 Warning
385 </li>
evalica 126.1 386 <li style="background-color: #cc3333; color: #000" class="color">
evalica 123.1 387 Error
388 </li>
389 </ul>
390 <div class="clearfloats"></div>
391 {{/html}}
evalica 133.12 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
evalica 133.13 397 * $theme.notificationInfoColor
398 * $theme.notificationSuccessColor
399 * $theme.notificationWarningColor
400 * $theme.notificationErrorColor
401
evalica 133.12 402 {{html}}
403 <ul class="showColors">
404 <li style="background-color: #EFEFEF; color: #336699;" class="color">
evalica 133.14 405 #336699 Info
evalica 133.12 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">
evalica 133.14 423 #336699 Info
evalica 133.12 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