Category column colors CSS - Sunbird
From MozillaZine Knowledge Base
Jump to navigationJump to search
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) */