1 # <a name="Color scheme settings for TWiki."></a> Color scheme settings for [[PatternSkin]]
3 **Appearance: text colors, background colors, border colors.**
5 Use this topic to change the color settings of [[PatternSkin]]. When this topic is saved, the attachment `theme-colors.css` will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.
7 ## <a name="Usage"></a><a name=" Usage"></a> Usage
9 ### <a name="Step 1"></a><a name=" Step 1"></a> Step 1
11 Let [[PatternSkin]] point to the custom-made colors style sheet. In [[Main.TWikiPreferences|Main/TWikiPreferences]] put:
13 * Set USERCOLORSURL = %PUBURLPATH%/%MAINWEB%/TWikiPreferences/theme-colors.css
15 ### <a name="Step 2"></a><a name=" Step 2"></a> Step 2
17 Edit this topic, and change the color variables as you like.
19 ## <a name="Color variables"></a><a name=" Color variables"></a> Color variables
23 <li><a href="#Logical groupings"> Logical groupings</a><ul>
24 <li><a href="#Text on background"> Text on background</a><ul>
25 <li><a href="#MAIN_TEXT_COLOR Main text color"> MAIN_TEXT_COLOR Main text color</a></li>
26 <li><a href="#MAIN_BACKGROUND_COLOR Main backg"> MAIN_BACKGROUND_COLOR Main background color</a></li>
27 <li><a href="#LIGHT_ON_DARK_TEXT_COLOR Light o"> LIGHT_ON_DARK_TEXT_COLOR Light on dark text color</a></li>
30 <li><a href="#Links"> Links</a><ul>
31 <li><a href="#LINK_TEXT_NORMAL Link normal tex"> LINK_TEXT_NORMAL Link normal text</a></li>
32 <li><a href="#LINK_BACKGROUND_NORMAL Link norm"> LINK_BACKGROUND_NORMAL Link normal background</a></li>
33 <li><a href="#LINK_TEXT_ACTION_BUTTON Link tex"> LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)</a></li>
34 <li><a href="#LINK_TEXT_HOVER Link hover text"> LINK_TEXT_HOVER Link hover text</a></li>
35 <li><a href="#LINK_BACKGROUND_HOVER Link backg"> LINK_BACKGROUND_HOVER Link background hover</a></li>
36 <li><a href="#SIDE_BAR_LINK_TEXT Side bar link"> SIDE_BAR_LINK_TEXT Side bar link text</a></li>
37 <li><a href="#LINK_TEXT_NORMAL_TABLE_HEADER Ta"> LINK_TEXT_NORMAL_TABLE_HEADER Table header link text</a></li>
38 <li><a href="#LINK_TEXT_NORMAL_BORDER_TABLE_HE"> LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border</a></li>
39 <li><a href="#LINK_TEXT_SORTED_TABLE_HEADER So"> LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text</a></li>
40 <li><a href="#LINK_TEXT_HOVER_TABLE_HEADER Tab"> LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text</a></li>
41 <li><a href="#LINK_BORDER_TABLE_SELECTED_COLUM"> LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header</a></li>
44 <li><a href="#Disabled"> Disabled</a><ul>
45 <li><a href="#DISABLED_BORDER Disabled border"> DISABLED_BORDER Disabled border</a></li>
46 <li><a href="#DISABLED_TEXT Disabled text"> DISABLED_TEXT Disabled text</a></li>
47 <li><a href="#DISABLED_BACKGROUND Disabled bac"> DISABLED_BACKGROUND Disabled background</a></li>
50 <li><a href="#'New'"> 'New'</a><ul>
51 <li><a href="#NEW_TEXT New text (green)"> NEW_TEXT New text (green) </a></li>
52 <li><a href="#NEW_BACKGROUND New background (l"> NEW_BACKGROUND New background (light green) </a></li>
55 <li><a href="#Alert"> Alert</a><ul>
56 <li><a href="#ALERT_TEXT Alert text (red)"> ALERT_TEXT Alert text (red)</a></li>
57 <li><a href="#ALERT_TEXT_MUTED Muted alert tex"> ALERT_TEXT_MUTED Muted alert text (dark red)</a></li>
58 <li><a href="#ALERT_BORDER Alert border"> ALERT_BORDER Alert border</a></li>
61 <li><a href="#Buttons"> Buttons</a><ul>
62 <li><a href="#BUTTON_TEXT Button text color (d"> BUTTON_TEXT Button text color (dark gray)</a></li>
63 <li><a href="#BUTTON_BORDERS Button borders"> BUTTON_BORDERS Button borders</a></li>
64 <li><a href="#BUTTON_BORDERS_ACTIVE Button bor"> BUTTON_BORDERS_ACTIVE Button borders (active)</a></li>
65 <li><a href="#SUBMIT_BUTTON_BACKGROUND Submit"> SUBMIT_BUTTON_BACKGROUND Submit button background (dark yellow)</a></li>
66 <li><a href="#SUBMIT_BUTTON_BORDER Submit butt"> SUBMIT_BUTTON_BORDER Submit button border (blue) </a></li>
69 <li><a href="#Forms"> Forms</a><ul>
70 <li><a href="#INPUT_FIELD_BORDERS Input field"> INPUT_FIELD_BORDERS Input field borders</a></li>
71 <li><a href="#FORM_INPUT_BORDER Textarea, inpu"> FORM_INPUT_BORDER Textarea, input and select (darker gray)</a></li>
72 <li><a href="#FORM_BORDER Form (same as twikiT"> FORM_BORDER Form (same as twikiTable border)</a></li>
73 <li><a href="#ACTIVE_FORM_BACKGROUND Edit form"> ACTIVE_FORM_BACKGROUND Edit form, form steps</a></li>
74 <li><a href="#FORMFIELD_ACTIVE Active form fie"> FORMFIELD_ACTIVE Active form field (not implemented yet)</a></li>
79 <li><a href="#Color groupings"> Color groupings</a><ul>
80 <li><a href="#Text colors"> Text colors</a><ul>
81 <li><a href="#GENERAL_TEXT General text (if no"> GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)</a></li>
82 <li><a href="#HEADER_TEXT Header text"> HEADER_TEXT Header text</a></li>
83 <li><a href="#CODE_TEXT Code text, left bar te"> CODE_TEXT Code text, left bar text and links</a></li>
84 <li><a href="#MUTED_TEXT Muted text (dark gray"> MUTED_TEXT Muted text (dark gray)</a></li>
85 <li><a href="#GRAYED_OUT_TEXT Grayed out text"> GRAYED_OUT_TEXT Grayed out text</a></li>
86 <li><a href="#STRONG_TEXT Dark text, header (d"> STRONG_TEXT Dark text, header (dark gray)</a></li>
87 <li><a href="#SEPARATOR Seperator in topic act"> SEPARATOR Seperator in topic action bar</a></li>
90 <li><a href="#Background colors"> Background colors</a><ul>
91 <li><a href="#GENERAL_BACKGROUND General backg"> GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)</a></li>
92 <li><a href="#SIDE_BAR_BACKGROUND Side bar bac"> SIDE_BAR_BACKGROUND Side bar background</a></li>
93 <li><a href="#SIDE_BAR_PERSONAL_BACKGROUND Sid"> SIDE_BAR_PERSONAL_BACKGROUND Side bar personal background</a></li>
94 <li><a href="#INFO_BACKGROUND Info (very light"> INFO_BACKGROUND Info (very light blue) (placeholder for background image)</a></li>
95 <li><a href="#TOPIC_ACTION_BACKGROUND Topic ac"> TOPIC_ACTION_BACKGROUND Topic action row (light yellow)</a></li>
96 <li><a href="#HEADER_BACKGROUND H1, H2, etc he"> HEADER_BACKGROUND H1, H2, etc header (light yellow) </a></li>
97 <li><a href="#ATTACHMENT_AND_FORM_BACKGROUND A"> ATTACHMENT_AND_FORM_BACKGROUND Attachment, form (light yellow)</a></li>
98 <li><a href="#DIFF_HEADER_BACKGROUND Diff head"> DIFF_HEADER_BACKGROUND Diff header (dark gray) (same as GRAYED_OUT_TEXT)</a></li>
99 <li><a href="#Table colors"> Table colors</a><ul>
100 <li><a href="#TABLE_DATA_BACKGROUND Table data"> TABLE_DATA_BACKGROUND Table data background</a></li>
101 <li><a href="#TABLE_HEADER_BACKGROUND Table he"> TABLE_HEADER_BACKGROUND Table header background</a></li>
102 <li><a href="#TABLE_SELECTED_COLUMN_HEADER_BAC"> TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background </a></li>
103 <li><a href="#TABLE_DATA_ODD_BACKGROUND Table"> TABLE_DATA_ODD_BACKGROUND Table data background (odd row)</a></li>
104 <li><a href="#TABLE_DATA_EVEN_BACKGROUND Table"> TABLE_DATA_EVEN_BACKGROUND Table data background (even row)</a></li>
105 <li><a href="#TABLE_DATA_ODD_SELECTED_BACKGROU"> TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)</a></li>
106 <li><a href="#TABLE_DATA_EVEN_SELECTED_BACKGRO"> TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)</a></li>
107 <li><a href="#TABLE_DATA_MIX_BACKGROUND Table"> TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)</a></li>
112 <li><a href="#Border colors"> Border colors</a><ul>
113 <li><a href="#INFO_BORDER Info (light blue)"> INFO_BORDER Info (light blue)</a></li>
114 <li><a href="#SEPARATOR_BORDER HR line, bottom"> SEPARATOR_BORDER HR line, bottom of h2, attachment table, form (brown)</a></li>
115 <li><a href="#MINOR_SEPARATOR_BORDER Header H3"> MINOR_SEPARATOR_BORDER Header H3..H6 bottom (75% of SEPARATOR_BORDER)</a></li>
116 <li><a href="#LAYOUT_ELEMENT_BORDER Main layou"> LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone) </a></li>
117 <li><a href="#TABLE_BORDER Table border, sup ("> TABLE_BORDER Table border, sup (light neutral tone)</a></li>
118 <li><a href="#TABLE_BORDER_LIGHT Table border"> TABLE_BORDER_LIGHT Table border light</a></li>
126 ## <a name="Logical groupings"></a> Logical groupings
128 ### <a name="Text on background"></a> Text on background
130 #### <a name="MAIN_TEXT_COLOR Main text color"></a> MAIN\_TEXT\_COLOR Main text color
132 - Set MAIN\_TEXT\_COLOR = #000
134 #### <a name="MAIN_BACKGROUND_COLOR Main backg"></a> MAIN\_BACKGROUND\_COLOR Main background color
136 - Set MAIN\_BACKGROUND\_COLOR = #fff
138 #### <a name="LIGHT_ON_DARK_TEXT_COLOR Light o"></a> LIGHT\_ON\_DARK\_TEXT\_COLOR Light on dark text color
140 - Set LIGHT\_ON\_DARK\_TEXT\_COLOR = #fff
142 ### <a name="Links"></a> Links
144 #### <a name="LINK_TEXT_NORMAL Link normal tex"></a> LINK\_TEXT\_NORMAL Link normal text
146 - Set LINK\_TEXT\_NORMAL = #06c
148 #### <a name="LINK_BACKGROUND_NORMAL Link norm"></a> LINK\_BACKGROUND\_NORMAL Link normal background
150 - Set LINK\_BACKGROUND\_NORMAL =
152 #### <a name="LINK_TEXT_ACTION_BUTTON Link tex"></a> LINK\_TEXT\_ACTION\_BUTTON Link text red (same as LINK\_BACKGROUND\_HOVER)
154 - Set LINK\_TEXT\_ACTION\_BUTTON = #D6000F
156 #### <a name="LINK_TEXT_HOVER Link hover text"></a> LINK\_TEXT\_HOVER Link hover text
158 - Set LINK\_TEXT\_HOVER = #FBF7E8
160 #### <a name="LINK_BACKGROUND_HOVER Link backg"></a> LINK\_BACKGROUND\_HOVER Link background hover
162 - Set LINK\_BACKGROUND\_HOVER = #D6000F
164 #### <a name="SIDE_BAR_LINK_TEXT Side bar link"></a> SIDE\_BAR\_LINK\_TEXT Side bar link text
166 - Set SIDE\_BAR\_LINK\_TEXT = #666
168 #### <a name="LINK_TEXT_NORMAL_TABLE_HEADER Ta"></a> LINK\_TEXT\_NORMAL\_TABLE\_HEADER Table header link text
170 - Set LINK\_TEXT\_NORMAL\_TABLE\_HEADER = #fff
172 #### <a name="LINK_TEXT_NORMAL_BORDER_TABLE_HE"></a> LINK\_TEXT\_NORMAL\_BORDER\_TABLE\_HEADER Table header link border
174 - Set LINK\_TEXT\_NORMAL\_BORDER\_TABLE\_HEADER = #bbb
176 #### <a name="LINK_TEXT_SORTED_TABLE_HEADER So"></a> LINK\_TEXT\_SORTED\_TABLE\_HEADER Sorted table header link text
178 - Set LINK\_TEXT\_SORTED\_TABLE\_HEADER = #fff
180 #### <a name="LINK_TEXT_HOVER_TABLE_HEADER Tab"></a> LINK\_TEXT\_HOVER\_TABLE\_HEADER Table header link hover text
182 - Set LINK\_TEXT\_HOVER\_TABLE\_HEADER = #fff
184 #### <a name="LINK_BORDER_TABLE_SELECTED_COLUM"></a> LINK\_BORDER\_TABLE\_SELECTED\_COLUMN\_HEADER Link border in selected column header
186 - Set LINK\_BORDER\_TABLE\_SELECTED\_COLUMN\_HEADER = #999
188 ### <a name="Disabled"></a> Disabled
190 #### <a name="DISABLED_BORDER Disabled border"></a> DISABLED\_BORDER Disabled border
192 - Set DISABLED\_BORDER = #e0e0e0
194 #### <a name="DISABLED_TEXT Disabled text"></a> DISABLED\_TEXT Disabled text
196 - Set DISABLED\_TEXT = #ccc
198 #### <a name="DISABLED_BACKGROUND Disabled bac"></a> DISABLED\_BACKGROUND Disabled background
200 - Set DISABLED\_BACKGROUND = #f5f5f5
202 ### <a name="'New'"></a> 'New'
204 #### <a name="NEW_TEXT New text (green)"></a> NEW\_TEXT New text (green)
206 - Set NEW\_TEXT = #049804
208 #### <a name="NEW_BACKGROUND New background (l"></a> NEW\_BACKGROUND New background (light green)
210 - Set NEW\_BACKGROUND = #ECFADC
212 ### <a name="Alert"></a> Alert
214 #### <a name="ALERT_TEXT Alert text (red)"></a> ALERT\_TEXT Alert text (red)
216 - Set ALERT\_TEXT = #f00
218 #### <a name="ALERT_TEXT_MUTED Muted alert tex"></a> ALERT\_TEXT\_MUTED Muted alert text (dark red)
220 - Set ALERT\_TEXT\_MUTED = #900
222 #### <a name="ALERT_BORDER Alert border"></a> ALERT\_BORDER Alert border
224 - Set ALERT\_BORDER = #f00
226 ### <a name="Buttons"></a> Buttons
228 #### <a name="BUTTON_TEXT Button text color (d"></a> BUTTON\_TEXT Button text color (dark gray)
230 - Set BUTTON\_TEXT = #333
232 #### <a name="BUTTON_BORDERS Button borders"></a> BUTTON\_BORDERS Button borders
234 - Set BUTTON\_BORDERS = #ddd #aaa #aaa #ddd
236 #### <a name="BUTTON_BORDERS_ACTIVE Button bor"></a> BUTTON\_BORDERS\_ACTIVE Button borders (active)
238 - Set BUTTON\_BORDERS\_ACTIVE = #999 #ccc #ccc #999
240 #### <a name="SUBMIT_BUTTON_BACKGROUND Submit"></a><a name="SUBMIT_BUTTON_BACKGROUND Submit "></a> SUBMIT\_BUTTON\_BACKGROUND Submit button background (dark yellow)
242 - Set SUBMIT\_BUTTON\_BACKGROUND = #FED764
244 #### <a name="SUBMIT_BUTTON_BORDER Submit butt"></a> SUBMIT\_BUTTON\_BORDER Submit button border (blue)
246 - Set SUBMIT\_BUTTON\_BORDER = #88B6CF
248 ### <a name="Forms"></a> Forms
250 #### <a name="INPUT_FIELD_BORDERS Input field"></a><a name="INPUT_FIELD_BORDERS Input field "></a> INPUT\_FIELD\_BORDERS Input field borders
252 - Set INPUT\_FIELD\_BORDERS = #aaa #ddd #ddd #aaa
254 #### <a name="FORM_INPUT_BORDER Textarea, inpu"></a> FORM\_INPUT\_BORDER Textarea, input and select (darker gray)
256 - Set FORM\_INPUT\_BORDER = #aaa
258 #### <a name="FORM_BORDER Form (same as twikiT"></a> FORM\_BORDER Form (same as twikiTable border)
260 - Set FORM\_BORDER = #ccc
262 #### <a name="ACTIVE_FORM_BACKGROUND Edit form"></a> ACTIVE\_FORM\_BACKGROUND Edit form, form steps
264 - Set ACTIVE\_FORM\_BACKGROUND = #f8fbfc
266 #### <a name="FORMFIELD_ACTIVE Active form fie"></a> FORMFIELD\_ACTIVE Active form field (not implemented yet)
268 - Set FORMFIELD\_ACTIVE = #ffc
270 ## <a name="Color groupings"></a> Color groupings
272 ### <a name="Text colors"></a> Text colors
274 #### <a name="GENERAL_TEXT General text (if no"></a> GENERAL\_TEXT General text (if not set in MAIN\_BACKGROUND\_COLOR) (black)
276 - Set GENERAL\_TEXT = #000
278 #### <a name="HEADER_TEXT Header text"></a> HEADER\_TEXT Header text
280 - Set HEADER\_TEXT = #a00
282 #### <a name="CODE_TEXT Code text, left bar te"></a> CODE\_TEXT Code text, left bar text and links
284 - Set CODE\_TEXT = #7A4707
286 #### <a name="MUTED_TEXT Muted text (dark gray"></a> MUTED\_TEXT Muted text (dark gray)
288 - Set MUTED\_TEXT = #666
290 #### <a name="GRAYED_OUT_TEXT Grayed out text"></a> GRAYED\_OUT\_TEXT Grayed out text
292 - Set GRAYED\_OUT\_TEXT = #8E9195
294 #### <a name="STRONG_TEXT Dark text, header (d"></a> STRONG\_TEXT Dark text, header (dark gray)
296 - Set STRONG\_TEXT = #333
298 #### <a name="SEPARATOR Seperator in topic act"></a> SEPARATOR Seperator in topic action bar
300 - Set SEPARATOR = #aaa
302 ### <a name="Background colors"></a> Background colors
304 #### <a name="GENERAL_BACKGROUND General backg"></a> GENERAL\_BACKGROUND General background color (if not set in MAIN\_BACKGROUND\_COLOR) (white)
306 - Set GENERAL\_BACKGROUND = #fff
308 #### <a name="SIDE_BAR_BACKGROUND Side bar bac"></a> SIDE\_BAR\_BACKGROUND Side bar background
310 - Set SIDE\_BAR\_BACKGROUND = #f7fafc
312 #### <a name="SIDE_BAR_PERSONAL_BACKGROUND Sid"></a> SIDE\_BAR\_PERSONAL\_BACKGROUND Side bar personal background
314 - Set SIDE\_BAR\_PERSONAL\_BACKGROUND = #e6eff5;
316 #### <a name="INFO_BACKGROUND Info (very light"></a> INFO\_BACKGROUND Info (very light blue) (placeholder for background image)
318 - Set INFO\_BACKGROUND = #f8fbfc
320 #### <a name="TOPIC_ACTION_BACKGROUND Topic ac"></a> TOPIC\_ACTION\_BACKGROUND Topic action row (light yellow)
322 - Set TOPIC\_ACTION\_BACKGROUND = #FCF8EC
324 #### <a name="HEADER_BACKGROUND H1, H2, etc he"></a> HEADER\_BACKGROUND H1, H2, etc header (light yellow)
326 - Set HEADER\_BACKGROUND = #FDFAF3
328 #### <a name="ATTACHMENT_AND_FORM_BACKGROUND A"></a> ATTACHMENT\_AND\_FORM\_BACKGROUND Attachment, form (light yellow)
330 - Set ATTACHMENT\_AND\_FORM\_BACKGROUND = #FEFCF6
332 #### <a name="DIFF_HEADER_BACKGROUND Diff head"></a> DIFF\_HEADER\_BACKGROUND Diff header (dark gray) (same as GRAYED\_OUT\_TEXT)
334 - Set DIFF\_HEADER\_BACKGROUND = #ccc
336 #### <a name="Table colors"></a> Table colors
338 ##### <a name="TABLE_DATA_BACKGROUND Table data"></a> TABLE\_DATA\_BACKGROUND Table data background
340 - Set TABLE\_DATA\_BACKGROUND = #f0f6f9
342 ##### <a name="TABLE_HEADER_BACKGROUND Table he"></a> TABLE\_HEADER\_BACKGROUND Table header background
344 - Set TABLE\_HEADER\_BACKGROUND = #6b7f93
346 ##### <a name="TABLE_SELECTED_COLUMN_HEADER_BAC"></a> TABLE\_SELECTED\_COLUMN\_HEADER\_BACKGROUND Sorted table column accent background
348 - Set TABLE\_SELECTED\_COLUMN\_HEADER\_BACKGROUND = #345
350 ##### <a name="TABLE_DATA_ODD_BACKGROUND Table"></a><a name="TABLE_DATA_ODD_BACKGROUND Table "></a> TABLE\_DATA\_ODD\_BACKGROUND Table data background (odd row)
352 - Set TABLE\_DATA\_ODD\_BACKGROUND = #edf4f9
354 ##### <a name="TABLE_DATA_EVEN_BACKGROUND Table"></a> TABLE\_DATA\_EVEN\_BACKGROUND Table data background (even row)
356 - Set TABLE\_DATA\_EVEN\_BACKGROUND = #ffffff
358 ##### <a name="TABLE_DATA_ODD_SELECTED_BACKGROU"></a> TABLE\_DATA\_ODD\_SELECTED\_BACKGROUND Table data background (odd row, selected column)
360 - Set TABLE\_DATA\_ODD\_SELECTED\_BACKGROUND = #dce7ee
362 ##### <a name="TABLE_DATA_EVEN_SELECTED_BACKGRO"></a> TABLE\_DATA\_EVEN\_SELECTED\_BACKGROUND Table data background (even row, selected column)
364 - Set TABLE\_DATA\_EVEN\_SELECTED\_BACKGROUND = #f5f5f5
366 ##### <a name="TABLE_DATA_MIX_BACKGROUND Table"></a><a name="TABLE_DATA_MIX_BACKGROUND Table "></a> TABLE\_DATA\_MIX\_BACKGROUND Table data background (mix between even and odd)
368 - Set TABLE\_DATA\_MIX\_BACKGROUND = #f7fafc
370 ### <a name="Border colors"></a> Border colors
372 #### <a name="INFO_BORDER Info (light blue)"></a> INFO\_BORDER Info (light blue)
374 - Set INFO\_BORDER = #D5E6F3
376 #### <a name="SEPARATOR_BORDER HR line, bottom"></a> SEPARATOR\_BORDER HR line, bottom of h2, attachment table, form (brown)
378 - Set SEPARATOR\_BORDER = #E2DCC8
380 #### <a name="MINOR_SEPARATOR_BORDER Header H3"></a> MINOR\_SEPARATOR\_BORDER Header H3..H6 bottom (75% of SEPARATOR\_BORDER)
382 - Set MINOR\_SEPARATOR\_BORDER = #E9E4D2
384 #### <a name="LAYOUT_ELEMENT_BORDER Main layou"></a> LAYOUT\_ELEMENT\_BORDER Main layout elements (neutral tone)
386 - Set LAYOUT\_ELEMENT\_BORDER = #ccc
388 #### <a name="TABLE_BORDER Table border, sup ("></a> TABLE\_BORDER Table border, sup (light neutral tone)
390 - Set TABLE\_BORDER = #ccc
392 #### <a name="TABLE_BORDER_LIGHT Table border"></a><a name="TABLE_BORDER_LIGHT Table border "></a> TABLE\_BORDER\_LIGHT Table border light
394 - Set TABLE\_BORDER\_LIGHT = #e2e7eb
396 Do not change the text below this line unless you know what you are doing!
400 %STARTATTACH{"theme-colors.css"}%
401 /* PatternSkin colors */
402 /* Generated by AttachContentPlugin from TWiki.PatternSkinColorSettings */
404 /* LAYOUT ELEMENTS */
407 background-color:%MAIN_BACKGROUND_COLOR%;
408 border-color:%LAYOUT_ELEMENT_BORDER%;
410 #patternMain { /* don't set a background here; use patternOuter */ }
412 background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
413 border-color:%LAYOUT_ELEMENT_BORDER%;
415 #patternLeftBar, #patternLeftBarContents { /* don't set a background here; use patternWrapper */ }
417 background-color:%SIDE_BAR_BACKGROUND%;
420 background-color:%MAIN_BACKGROUND_COLOR%;
421 border-color:%LAYOUT_ELEMENT_BORDER%;
423 #patternBottomBarContents,
424 #patternBottomBarContents a:link,
425 #patternBottomBarContents a:visited {
426 color:%GRAYED_OUT_TEXT%;
428 #patternBottomBarContents a:hover {
429 color:%LINK_TEXT_HOVER%;
432 /* GENERAL HTML ELEMENTS */
435 background-color:%MAIN_BACKGROUND_COLOR%;
436 color:%MAIN_TEXT_COLOR%;
438 /* be kind to netscape 4 that doesn't understand inheritance */
439 body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
440 background-color:transparent;
443 color:%LAYOUT_ELEMENT_BORDER%;
444 background-color:%LAYOUT_ELEMENT_BORDER%;
450 border-color:%INFO_BORDER%;
451 background-color:%ACTIVE_FORM_BACKGROUND%;
453 h1, h2, h3, h4, h5, h6 {
461 color:%LINK_TEXT_HOVER%;
464 background-color:%HEADER_BACKGROUND%;
465 border-color:%SEPARATOR_BORDER%;
468 border-color:%MINOR_SEPARATOR_BORDER%;
470 /* to override old Render.pm coded font color style */
474 .twikiNewLink a:link sup,
475 .twikiNewLink a:visited sup {
477 border-color:%TABLE_BORDER%;
479 .twikiNewLink a:hover sup {
480 background-color:%LINK_BACKGROUND_HOVER%;
481 color:%LINK_TEXT_HOVER%;
482 border-color:%LINK_BACKGROUND_HOVER%;
485 border-color:%TABLE_BORDER%;
493 color:%LINK_TEXT_NORMAL%;
494 background-color:transparent;
498 color:%LINK_TEXT_HOVER%;
499 background-color:%LINK_BACKGROUND_HOVER%;
503 background-color:transparent;
505 /* fix for hover over transparent logo: */
506 #patternTopBar :link:hover img,
507 #patternTopBar :visited:hover img {
508 background:%MAIN_BACKGROUND_COLOR%;
510 .patternTopic a:visited {
513 .patternTopic a:hover {
514 color:%LINK_TEXT_HOVER%;
522 border-color:%FORM_INPUT_BORDER%;
523 color:%MAIN_TEXT_COLOR%;
524 background-color:%GENERAL_BACKGROUND%;
528 border-color:%BUTTON_BORDERS%;
530 background-color:%GENERAL_BACKGROUND%;
533 .twikiButton:active {
534 border-color:%BUTTON_BORDERS_ACTIVE%;
535 color:%GENERAL_TEXT%;
537 .twikiSubmitDisabled,
538 .twikiSubmitDisabled:active {
539 border-color:%DISABLED_BORDER%;
540 color:%DISABLED_TEXT%;
541 background-color:%DISABLED_BACKGROUND%;
545 border-color:%INPUT_FIELD_BORDERS%;
546 color:%MAIN_TEXT_COLOR%;
547 background-color:%MAIN_BACKGROUND_COLOR%;
549 .twikiInputFieldDisabled {
553 /* -----------------------------------------------------------
555 ----------------------------------------------------------- */
560 border-color:%TABLE_BORDER%;
563 border-color:%TABLE_BORDER% %MAIN_BACKGROUND_COLOR%;
565 .twikiTable th a:link,
566 .twikiTable th a:visited,
567 .twikiTable th a font {
568 color:%LINK_TEXT_NORMAL_TABLE_HEADER%;
573 color:%GRAYED_OUT_TEXT%;
575 a:hover.twistyTrigger {
576 color:%LINK_TEXT_HOVER%;
581 background-color:%INFO_BACKGROUND%;
583 .patternTopic .tipsOfTheDayHeader {
586 /* TipsContrib - in left bar */
587 #patternLeftBar .tipsOfTheDay a:link,
588 #patternLeftBar .tipsOfTheDay a:visited {
591 #patternLeftBar .tipsOfTheDay a:hover {
592 color:%LINK_TEXT_HOVER%;
595 /* RevCommentPlugin */
596 .revComment .patternTopicAction {
597 background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
600 /* -----------------------------------------------------------
602 ----------------------------------------------------------- */
605 color:%GRAYED_OUT_TEXT%;
607 .twikiGrayText a:link,
608 .twikiGrayText a:visited {
609 color:%GRAYED_OUT_TEXT%;
611 .twikiGrayText a:hover {
612 color:%LINK_TEXT_HOVER%;
615 table.twikiFormTable th.twikiFormTableHRow,
616 table.twikiFormTable td.twikiFormTableRow {
620 color:%MAIN_TEXT_COLOR%;
622 .twikiEditForm .twikiFormTable,
623 .twikiEditForm .twikiFormTable th,
624 .twikiEditForm .twikiFormTable td {
625 border-color:%TABLE_BORDER_LIGHT%;
627 /* use a different table background color mix: no odd/even rows, no white background */
628 .twikiEditForm .twikiFormTable td {
629 background-color:%TABLE_DATA_MIX_BACKGROUND%;
631 .twikiEditForm .twikiFormTable th {
632 background-color:%TABLE_DATA_ODD_BACKGROUND%;
634 .patternContent .twikiAttachments,
635 .patternContent .twikiForm {
636 background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
637 border-color:%SEPARATOR_BORDER%;
639 .twikiAttachments table,
640 table.twikiFormTable {
641 border-color:%LAYOUT_ELEMENT_BORDER%;
642 background-color:%MAIN_BACKGROUND_COLOR%;
644 .twikiAttachments table {
645 background-color:%MAIN_BACKGROUND_COLOR%;
647 .twikiAttachments td,
648 .twikiAttachments th {
649 border-color:%LAYOUT_ELEMENT_BORDER%;
651 .twikiAttachments .twikiTable th font,
652 table.twikiFormTable th.twikiFormTableHRow font {
653 color:%LINK_TEXT_NORMAL%;
657 background-color:%ACTIVE_FORM_BACKGROUND%;
658 border-color:%SEPARATOR_BORDER%;
661 border-color:%SEPARATOR_BORDER%;
665 background-color:transparent;
667 .twikiToc .twikiTocTitle {
670 .twikiBroadcastMessage {
671 background-color:yellow;
673 .twikiBroadcastMessage b,
674 .twikiBroadcastMessage strong {
682 color:%LINK_TEXT_NORMAL%;
684 .twikiPageForm table {
685 border-color:%TABLE_BORDER%;
686 background:%MAIN_BACKGROUND_COLOR%;
689 border-color:%FORM_BORDER%;
690 background-color:%FORM_BORDER%;
694 background-color:%INFO_BACKGROUND%;
695 border-color:%INFO_BORDER%;
699 border-color:%GRAYED_OUT_TEXT%;
701 a:link .twikiAccessKey,
702 a:visited .twikiAccessKey,
703 a:hover .twikiAccessKey {
707 /* -----------------------------------------------------------
708 Pattern skin specific elements
709 ----------------------------------------------------------- */
711 background-color:%MAIN_BACKGROUND_COLOR%;
714 #patternLeftBarContents {
717 #patternLeftBarContents .patternWebIndicator {
718 color:%GENERAL_TEXT%;
720 #patternLeftBarContents .patternWebIndicator a:link,
721 #patternLeftBarContents .patternWebIndicator a:visited {
722 color:%GENERAL_TEXT%;
724 #patternLeftBarContents .patternWebIndicator a:hover {
725 color:%LINK_TEXT_HOVER%;
727 #patternLeftBarContents hr {
728 color:%SEPARATOR_BORDER%;
729 background-color:%SEPARATOR_BORDER%;
731 #patternLeftBarContents a:link,
732 #patternLeftBarContents a:visited {
733 color:%SIDE_BAR_LINK_TEXT%;
735 #patternLeftBarContents a:hover {
736 color:%LINK_TEXT_HOVER%;
738 #patternLeftBarContents b,
739 #patternLeftBarContents strong {
742 #patternLeftBarContents .patternChangeLanguage {
743 color:%GRAYED_OUT_TEXT%;
745 #patternLeftBarContents .patternLeftBarPersonal {
746 background-color:%SIDE_BAR_PERSONAL_BACKGROUND%
748 #patternLeftBarContents .patternLeftBarPersonal a:link,
749 #patternLeftBarContents .patternLeftBarPersonal a:visited,
750 #patternLeftBarContents .twikiHierarchicalNavigation a:link,
751 #patternLeftBarContents .twikiHierarchicalNavigation a:visited {
752 color:%LINK_TEXT_NORMAL%;
754 #patternLeftBarContents .patternLeftBarPersonal a:hover,
755 #patternLeftBarContents .twikiHierarchicalNavigation a:hover {
756 color:%LINK_TEXT_HOVER%;
757 background-color:%LINK_BACKGROUND_HOVER%;
759 #patternLeftBarContents .twikiHierarchicalNavigation {
760 background:%MAIN_BACKGROUND_COLOR%;
762 .patternTopicActions {
763 border-color:%SEPARATOR_BORDER%;
765 .patternTopicAction {
767 border-color:%SEPARATOR_BORDER%;
768 background-color:%TOPIC_ACTION_BACKGROUND%;
770 .patternTopicAction s,
771 .patternTopicAction strike {
772 color:%DISABLED_TEXT%;
774 .patternTopicAction .twikiSeparator {
775 color:%SEPARATOR_BORDER%;
777 .patternActionButtons a:link,
778 .patternActionButtons a:visited {
779 color:%LINK_TEXT_ACTION_BUTTON%;
781 .patternActionButtons a:hover {
782 color:%LINK_TEXT_HOVER%;
784 .patternTopicAction .twikiAccessKey {
785 color:%LINK_TEXT_ACTION_BUTTON%;
786 border-color:%LINK_TEXT_ACTION_BUTTON%;
788 .patternTopicAction label {
789 color:%GENERAL_TEXT%;
792 color:%GRAYED_OUT_TEXT%;
794 .patternFormFieldDefaultColor {
795 /* input fields default text color (no user input) */
796 color:%GRAYED_OUT_TEXT%;
799 .patternToolBar .patternButton s,
800 .patternToolBar .patternButton strike,
801 .patternToolBar .patternButton a:link,
802 .patternToolBar .patternButton a:visited {
803 border-color:%SEPARATOR_BORDER%;
804 background-color:%GENERAL_BACKGROUND%;
806 .patternToolBar .patternButton a:link,
807 .patternToolBar .patternButton a:visited {
810 .patternToolBar .patternButton s,
811 .patternToolBar .patternButton strike {
812 color:%DISABLED_TEXT%;
813 border-color:%DISABLED_BORDER%;
815 .patternToolBar .patternButton a:hover {
816 background-color:%LINK_BACKGROUND_HOVER%;
817 color:%LINK_TEXT_HOVER%;
818 border-color:%LINK_TEXT_ACTION_BUTTON%;
820 .patternToolBar .patternButton img {
821 background-color:transparent;
823 .patternToolBarBottom {
824 border-color:%SEPARATOR_BORDER%;
826 .patternToolBar a:link .twikiAccessKey,
827 .patternToolBar a:visited .twikiAccessKey {
829 border-color:%MUTED_TEXT%;
831 .patternToolBar a:hover .twikiAccessKey {
832 background-color:transparent;
837 .patternRevInfo a:link,
838 .patternRevInfo a:visited {
839 color:%GRAYED_OUT_TEXT%;
841 .patternRevInfo a:hover {
842 color:%LINK_TEXT_HOVER%;
846 .patternMoved a:link,
847 .patternMoved a:visited {
848 color:%GRAYED_OUT_TEXT%;
850 .patternMoved a:hover {
851 color:%LINK_TEXT_HOVER%;
854 background-color:%MAIN_BACKGROUND_COLOR%;
857 /* WebSearch, WebSearchAdvanced */
858 table#twikiSearchTable th,
859 table#twikiSearchTable td {
860 background-color:%GENERAL_BACKGROUND%;
861 border-color:%TABLE_BORDER%;
863 table#twikiSearchTable th {
864 color:%MAIN_TEXT_COLOR%;
866 table#twikiSearchTable td.first {
867 background-color:%TOPIC_ACTION_BACKGROUND%;
870 /* -----------------------------------------------------------
872 styles and overridden styles used in search.pattern.tmpl
873 ----------------------------------------------------------- */
875 h3.patternSearchResultsHeader,
876 h4.patternSearchResultsHeader {
877 background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
878 border-color:%LAYOUT_ELEMENT_BORDER%;
880 h4.patternSearchResultsHeader {
881 color:%MAIN_TEXT_COLOR%;
883 .patternNoViewPage h4.patternSearchResultsHeader {
886 .patternSearchResult .twikiBottomRow {
887 border-color:%TABLE_BORDER%;
889 .patternSearchResult .twikiAlert {
892 .patternSearchResult .twikiSummary .twikiAlert {
893 color:%ALERT_TEXT_MUTED%;
895 .patternSearchResult .twikiNew {
896 background-color:%NEW_BACKGROUND%;
897 border-color:%NEW_TEXT%;
900 .patternViewPage .patternSearchResultsBegin {
901 border-color:%TABLE_BORDER%;
904 /* Search results in book view format */
906 .patternBookView .twikiTopRow {
907 background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
910 .patternBookView .twikiBottomRow {
911 border-color:%TABLE_BORDER%;
913 .patternBookView .patternSearchResultCount {
914 color:%GRAYED_OUT_TEXT%;
917 /* oopsmore.pattern.tmpl */
919 table.patternDiffOptions img {
920 border-color:%LAYOUT_ELEMENT_BORDER%;
923 /* edit.pattern.tmpl */
925 .twikiChangeFormButton .twikiButton,
926 .twikiChangeFormButtonHolder .twikiButton { /* looks like a link */
927 color:%LINK_TEXT_NORMAL%;
931 color:%GRAYED_OUT_TEXT%;
932 background-color:%MAIN_BACKGROUND_COLOR%;
935 /* preview.pattern.tmpl */
937 .patternPreviewArea {
938 border-color:%ALERT_BORDER%;
939 background-color:%MAIN_BACKGROUND_COLOR%;
942 /* rdiff.pattern.tmpl */
945 border-color:%TABLE_HEADER_BACKGROUND%;
947 .patternDiff h4.patternSearchResultsHeader {
948 background-color:%TABLE_HEADER_BACKGROUND%;
949 color:%LIGHT_ON_DARK_TEXT_COLOR%;
951 .patternDiff h4.patternSearchResultsHeader a:link,
952 .patternDiff h4.patternSearchResultsHeader a:visited {
953 color:%LIGHT_ON_DARK_TEXT_COLOR%;
955 tr.twikiDiffDebug td {
956 border-color:%TABLE_BORDER%;
958 .patternDiffPage .twikiDiffTable th {
959 background-color:%DIFF_HEADER_BACKGROUND%;
962 .twikiDiffChangedHeader,
963 tr.twikiDiffDebug .twikiDiffChangedText,
964 tr.twikiDiffDebug .twikiDiffChangedText {
965 background:#9f9; /* green - do not change */
968 .twikiDiffDeletedHeader,
969 tr.twikiDiffDebug .twikiDiffDeletedMarker,
970 tr.twikiDiffDebug .twikiDiffDeletedText {
971 background-color:#f99; /* red - do not change */
974 .twikiDiffAddedHeader,
975 tr.twikiDiffDebug .twikiDiffAddedMarker,
976 tr.twikiDiffDebug .twikiDiffAddedText {
977 background-color:#ccf; /* violet - do not change */
980 tr.twikiDiffDebug .twikiDiffUnchangedText {
981 color:%GRAYED_OUT_TEXT%;
983 .twikiDiffUnchangedTextContents { }
984 .twikiDiffLineNumberHeader {
985 background-color:%DIFF_HEADER_BACKGROUND%;
989 /* image positions are set here as well as these are dependent on the image */
992 background-image:url(background_input.gif);
993 background-repeat:repeat-x;
995 .twikiInputFieldDisabled {
996 background-image:none;
1000 background-image:url(background_button.gif);
1001 background-repeat:repeat-x;
1003 .patternToolBarButtons .patternButton a {
1005 background-image:url(background_button.gif);
1006 background-repeat:repeat-x;
1010 background-image:url(background_submit.gif);
1011 background-repeat:repeat-x;
1013 .twikiSubmitDisabled {
1014 background-image:none;
1017 background-image:url(bullet-child-black.gif);
1018 background-repeat:no-repeat;
1019 background-position:0 .35em;
1021 /*#patternLeftBarContents .patternLeftBarPersonal,*/
1023 #patternLeftBarContents .tipsOfTheDayContents {
1024 background-image:url(gradient_blue.gif);
1025 background-repeat:repeat-x;
1028 /* gradient yellow of left bar and main */
1029 background-image:url(gradient_yellow.gif);
1030 background-repeat:repeat-x;
1032 .patternPrintPage #patternOuter {
1033 background:#fff; /* white - do not change */
1035 .twikiPageForm table {
1036 background-image:url(form_gradient.gif);
1037 background-repeat:repeat-x;
1040 /* commong settings */
1041 .patternLeftBarPersonal li,
1042 .twikiHierarchicalNavigation .twikiChildTopics li,
1043 .twikiHierarchicalNavigation .twikiParentTopic li,
1047 background-position:0 .25em;
1048 background-repeat:no-repeat;
1050 .patternLeftBarPersonal li,
1051 .twikiHierarchicalNavigation .twikiChildTopics li {
1052 background-image:url(bullet-blue.gif);
1054 .twikiHierarchicalNavigation .twikiParentTopic li {
1055 background-image:url(bullet-parent.gif);
1057 .patternLeftBarPersonal li.patternLogOut {
1058 background-image:url(bullet-lock.gif);
1060 .patternLeftBarPersonal li.patternLogIn {
1061 background-image:url(bullet-lock.gif);