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)
 */