Skip to Content

Changes for page Color Themes Extensions

Last modified by Ecaterina Moraru on 2013/11/13 12:48
From version 133.23
edited by Ecaterina Valica
on 2013/08/09 18:02
Change comment: Added comment
To version 134.1
edited by Ecaterina Moraru
on 2013/11/13 12:48
Change comment: Moved page to http://design.xwiki.org/xwiki/bin/view/Improvements/ColorThemesExtensions

Summary

Details

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