From MozillaZine Knowledge Base

Preview: task dialog

Preview: task list

/* CalendarCategoryColumnColors.css
 *
 * To show calendar and category colors in their task pane columns and
 * in their event dialog and task dialog menulists (in icon column),
 * save this CSS in your profile [1] chrome directory,
 * and import this CSS in your userChrome.css [2] (references at end),
 * and follow instructions below.
 * 
 * For Sunbird, the userChrome.css path may be something like the following
 *  w2k: %APPDATA%\Mozilla\Sunbird\Profiles\NNNNN.default\chrome\userChrome.css
 *  gnu/linux: ~/.mozilla/sunbird/NNNNNN.default/chrome/userChrome.css
 *
 * 1. Save this file in your profile as chrome/CalendarCategoryIcons.css
 * 2. Save the desired image files to the chrome/category-icons/ subdirectory.
 * 3. Add the following to profile file chrome/userChrome.css (create if none):
 *   @import url("CalendarCategoryColumnColors.css");
 *
 * 4. For each calendar, such as "Work", for which you have set its color, 
 *    add the following to userChrome.css.  The CSS name "calendar-work"
 *    comes from prepending "calendar-" to the converted name "Work"
 *    (lowercase, use '_' for space; see "Note on CSS names" below).
 *    The color keyword 'orange' from [3] names the color (or use the
 *    less legible hexadecimal color code; see end of same note).
 *
 *   .calendar-task-tree > 
 *   treechildren::-moz-tree-cell(calendar-task-tree-col-calendarname calendar-work),
 *   menulist#item-calendar menuitem[value="Work"] .menu-iconic-left,
 *   menulist#item-calendar[value="Work"] .menulist-icon {
 *     background-color: orange ! important;
 *   }
 *
 * 5. For each category, such as "Calls", for which you have gone to 
 *    Tools / Options / Categories and set a color, add the following to
 *    userChrome.css.  The CSS name "calls" comes from converting the
 *    category name "Calls" to a CSS name (lowercase, use '_' for space;
 *    see "Note on CSS names" below). The color keyword 'yellow' from
 *    [3] names the color (or use the less legible hexadecimal color
 *    code; see end of same note):
 *
 *   .calendar-task-tree > 
 *   treechildren::-moz-tree-cell(calendar-task-tree-col-categories calls),
 *   menulist#item-categories menuitem[value="Calls"] .menu-iconic-left,
 *   menulist#item-categories[value="Calls"] .menulist-icon {
 *     background-color: yellow;
 *   }
 *
 * 6. Restart Sunbird
 *
 * 7. In the left column task pane, click on the rightmost headerbox,
 *    and make sure the 'Calendar name' and 'Category' columns are visible
 *    (checkmark on).  
 *
 *    If there are tasks, each calendar name background should be the
 *    calendar color specified in step 4, and each category name
 *    should should be the category color specified in step 5.
 *
 * 8. Optional: Calendar and category are now identifiable by color, 
 *    so narrow those columns so only the color is visible (in the column
 *    header, drag the sides between columns).
 *
 * Tested on Sunbird 0.9.
 *
 * Rationale: the background is only set in the respective columns so that
 *   it does not interfere with the color coding of the title based on its
 *   datetimes (red for overdue, blue for due today, green for in progress,
 *   etc.), and so both the calendar and category colors may be shown.
 *
 * Limitation: While this does display calendar and category colors in
 *   the task list, it does not display them in the event list, because the
 *   event list code (uTV_getColumnProperties) does not set a column 
 *   property to identify a cell in the column as the task list does
 *   (mTV_getColumnProperties adds 'calendar-task-tree-col-categories'
 *    or 'calendar-task-tree-col-calendarname').
 */

/* default calendar color */
.calendar-task-tree > 
treechildren::-moz-tree-cell(calendar-task-tree-col-calendarname),
menulist#item-calendar menuitem .menu-iconic-left,
menulist#item-calendar .menulist-icon {
  background-color: lightsteelblue;
}

/* in event/task dialog, show color in menulist iconic box */
menulist#item-categories .menu-iconic-left,
menulist#item-calendar .menu-iconic-left {
  display: list-item ! important;
}
menulist#item-categories menuitem .menu-iconic-left,
menulist#item-categories .menulist-icon,
menulist#item-calendar menuitem .menu-iconic-left,
menulist#item-calendar .menulist-icon {
  min-width: 1em;
  min-height: 1em;
}

/* Note on CSS names: Sunbird encodes names of calendars and categories
 * into CSS names using lowercase and converting space to underscore '_'.
 *
 * Each non-alphanumeric or nonascii character is represented using
 *   "-ux" + [the Unicode character code in hexadecimal] + "-"
 * such as "-ux2f-" for "/".
 * Examples:
 *   "ABC" encoded as "abc"
 "   "A B" encoded as "a_b"
 *   "A-B" encoded as "a-ux2d-b"
 *   "A.B" encoded as "a-ux2e-b"
 *   "A/B" encoded as "a-ux2f-b"
 *   "A, B" encoded as "a-ux2c-_b"
 *   "A: B" encoded as "a-ux3a-_b"
 *   "A & B" encoded as "a_-ux26-_b"
 *   "A+B" encoded as "a-ux2b-b"
 *   "C++" encoded as "c-ux2b--ux2b-"
 *
 * If you have set a color on the category, you can check the name
 * against the name found in Tools / Options / Advanced / Config Editor,
 * find "calendar.category.color".  For example, if "A+B" was given
 * color red, since it is encoded as "a-ux2b-b", you would find
 * "calendar.category.color.a-ux2b-b" has value "#FF0000"
 * 
 * References:
 *
 * [1] Where is my profile folder?
 *     (http://kb.mozillazine.org/Profile_folder#Where_is_my_profile_folder.3F)
 * [2] Customizing Mozilla: User CSS
 *     (http://www.mozilla.org/unix/customizing.html)
 * [3] SVG color keywords (http://www.w3.org/TR/css3-color/#svg-color)
 * [4] CSS 2: Colors and Backgrounds: The Background
 *     (http://www.w3.org/TR/REC-CSS2/colors.html#q2)
 * [5] CSS 2: Selectors: Attribute Selectors
 *     (http://www.w3.org/TR/CSS2/selector.html#attribute-selectors)
 * [6] XUL Tutorial: Styling a Tree
 *     (https://developer.mozilla.org/En/XUL_Tutorial/Styling_a_Tree)
 * This file is at (http://kb.mozillazine.org/Category_column_colors_CSS_-_Sunbird)
 */