Category icons CSS - SunbirdFrom MozillaZine Knowledge BasePreview:
More previews: Event Dialog with category icons, Options Dialog with category icons Sample Category Icons:
/* 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)
*/
|
|
