Category icons CSS - Sunbird
From MozillaZine Knowledge Base
Jump to navigationJump to search
Preview:
More previews: Event Dialog with category icons, Options Dialog with category icons
Sample Category Icons:
- Birthday:
- Gifts:
- Calls:
- Ideas:
- School:
- Exercise:
- Practice:
- Dine:
- Travel:
- Medical: , ,
- Payments:
- Restbreak:
/* CalendarCategoryIcons.css * * If you have many categories, or some rarely used categories, it may * be easier to recognize icons than shades of color. * * To show category icons on events and tasks in specified categories * save this CSS in your profile [1] chrome directory, * and import this CSS in your userChrome.css [2] (references at end). * * 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. Download all sample images to the chrome/category-icons/ subdirectory. * (popup menu, "Save Image As...") * 3. Add the following to profile file chrome/userChrome.css (create if none): * @import url("CalendarCategoryIcons.css"); * 4. Restart Sunbird. * 5. Some new categories mentioned below may need to be created if desired * (Tools / Options / Categories / Add) * 6. In the left column task pane, click on the rightmost headerbox, * and make sure the 'Category' column is visible (checkmark on). * 7. Create an event or task in a category mentioned below. * * Now the category icon will appear in the category column of the * task pane as well as in category stripe of events in the grid * views [and on tasks in the grid views if they have a start date, * and "View / Tasks in View" is enabled (checkmark on)]. It will * also appear in the options dialog categorieslist listbox (but is * not editable), and the event/task dialog item-categories menulist. * * Tested on Sunbird 0.9. * * Limitation: Although this displays category icons in the task list, it * does not display category icons in the event list, because the * Sunbird-0.9 event list (uTV_getColumnProperties) does not set a column * property to identify a cell in the column as the SB-0.9 task list does * (mTV_getColumnProperties adds 'calendar-task-tree-col-categories'). */ .category-color-box[categories~="birthday"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories birthday), listbox#categorieslist listcell[label="Birthday"] + listcell { background-image: url(category-icons/Birthday-cupcake-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="gifts"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories gifts), listbox#categorieslist listcell[label="Gifts"] + listcell { background-image: url(category-icons/Giftbox-red-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="calls"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories calls), listbox#categorieslist listcell[label="Calls"] + listcell { background-image: url(category-icons/Telephone-handset-black-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="ideas"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories ideas), listbox#categorieslist listcell[label="Ideas"] + listcell { background-image: url(category-icons/Lightbulb-lighted-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="school"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories school), listbox#categorieslist listcell[label="School"] + listcell { background-image: url(category-icons/Graduate-mortarboard-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="exercise"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories exercise), listbox#categorieslist listcell[label="Exercise"] + listcell { background-image: url(category-icons/Bicycle-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="practice"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories practice), listbox#categorieslist listcell[label="Practice"] + listcell { background-image: url(category-icons/Musical-eighthnote-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="dine"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories dine), listbox#categorieslist listcell[label="Dine"] + listcell { background-image: url(category-icons/Dine-fork-spoon-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="travel"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories travel), listbox#categorieslist listcell[label="Travel"] + listcell { background-image: url(category-icons/Travelbag-blue-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="medical"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories medical), listbox#categorieslist listcell[label="Medical"] + listcell { background-image: url(category-icons/Medical-caduceus-black-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="payments"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories payments), listbox#categorieslist listcell[label="Payments"] + listcell { background-image: url(category-icons/Billing-envelope-11x15.png); background-position: right center; background-repeat: no-repeat; } .category-color-box[categories~="restbreak"], .calendar-task-tree > treechildren::-moz-tree-cell(calendar-task-tree-col-categories restbreak), listbox#categorieslist listcell[label="Restbreak"] + listcell { background-image: url(category-icons/Restroom-black-11x15.png); background-position: right center; background-repeat: no-repeat; } menulist#item-categories .menu-iconic-left { display: list-item ! important; } menulist#item-categories menuitem[value="birthday"], menulist#item-categories[value="birthday"] { list-style-image: url(category-icons/Birthday-cupcake-11x15.png) ! important; } menulist#item-categories menuitem[value="gifts"], menulist#item-categories[value="gifts"] { list-style-image: url(category-icons/Giftbox-red-11x15.png) ! important; } menulist#item-categories menuitem[value="calls"], menulist#item-categories[value="calls"] { list-style-image: url(category-icons/Telephone-handset-black-11x15.png) ! important; } menulist#item-categories menuitem[value="ideas"], menulist#item-categories[value="ideas"] { list-style-image: url(category-icons/Lightbulb-lighted-11x15.png) ! important; } menulist#item-categories menuitem[value="school"], menulist#item-categories[value="school"] { list-style-image: url(category-icons/Graduate-mortarboard-11x15.png) ! important; } menulist#item-categories menuitem[value="exercise"], menulist#item-categories[value="exercise"] { list-style-image: url(category-icons/Bicycle-11x15.png) ! important; } menulist#item-categories menuitem[value="practice"], menulist#item-categories[value="practice"] { list-style-image: url(category-icons/Musical-eighthnote-11x15.png) ! important; } menulist#item-categories menuitem[value="dine"], menulist#item-categories[value="dine"] { list-style-image: url(category-icons/Dine-fork-spoon-11x15.png) ! important; } menulist#item-categories menuitem[value="travel"], menulist#item-categories[value="travel"] { list-style-image: url(category-icons/Travelbag-blue-11x15.png) ! important; } menulist#item-categories menuitem[value="medical"], menulist#item-categories[value="medical"] { list-style-image: url(category-icons/Medical-caduceus-black-11x15.png) ! important; } menulist#item-categories menuitem[value="payments"], menulist#item-categories[value="payments"] { list-style-image: url(category-icons/Billing-envelope-11x15.png) ! important; } menulist#item-categories menuitem[value="restbreak"], menulist#item-categories[value="restbreak"] { list-style-image: url(category-icons/Restroom-black-11x15.png) ! important; } /* To use your company/school/project favicon for working categories, * download it so it will be available offline. * For the EXAMPLE Company, * Download from http://www.EXAMPLE.com/favicon.ico * Save file into chrome/category-icons/EXAMPLE.ico * * Adapt the following code, in userChome.css (or @import a separate file). * If you have a category named "EXAMPLE meeting", in the CSS be sure to * convert its name to lowercase, and convert spaces to underscores, * for matching categories atom (but not label value). * * Using 'center center' vs 'right center' since 16x16 favicon is oversized. * * .category-color-box[categories~="example_meeting"]{ * background-image: url(category-icons/EXAMPLE.ico); * background-position: center center; * background-repeat: no-repeat; * } * * .calendar-task-tree > * treechildren::-moz-tree-cell(calendar-task-tree-col-categories example_meeting), * listbox#categorieslist listcell[label="EXAMPLE meeting"] + listcell { * background-image: url(category-icons/EXAMPLE.ico); * background-position: right center; * background-repeat: no-repeat; * } * * menulist#item-categories menuitem[value="EXAMPLE meeting"], * menulist#item-categories[value="EXAMPLE meeting"] { * list-style-image: url(category-icons/EXAMPLE.ico) ! important; * } * * In the CSS category names, a 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] CSS 2: Selectors: Adjacent sibling selectors * (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) * [7] CSS 2: Visual Formatting Model: The 'display' property * (http://www.w3.org/TR/CSS2/visuren.html#display-prop) * [8] CSS 2: Lists (http://www.w3.org/TR/CSS2/generate.html#lists) * [9] XUL Tutorial: Styling a Tree * (https://developer.mozilla.org/En/XUL_Tutorial/Styling_a_Tree) * This file is at (http://kb.mozillazine.org/Category_icons_CSS_-_Sunbird) */