Image Background CSS - Sunbird 0.2
From MozillaZine Knowledge Base
Jump to navigationJump to search
Advanced Tip: Calendar Grid Background Image
(For Sunbird 0.3, see Image Background CSS - Sunbird 0.3.)
/* CalendarGridBackgroundImage.css To add a personal background image to all calendar grid views, save this css in your profile [1] chrome directory, import this CSS in your userChrome.css [2], add your image, and modify the url. For Sunbird, the userChrome.css path may be something like the following w2k: c:\Documents and Settings\USER\Application Data\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/CalendarGridBackgroundImage.css 2. Add the following to profile file chrome/userChrome.css (create if none): @import url("CalendarGridBackgroundImage.css"); 3. Put the desired background image in the same directory. 4. Modify the url in CalendarGridBackgroundImage.css to the image filename. The CSS was tested on Sunbird 0.2rc1 - 0.3a1, and 20041217-cal on Mozilla 1.7.5. It is likely to require changes for future versions. Warning: using userChrome.css can lead to errors developers can't reproduce. Test with userChrome.css removed before reporting Sunbird/Calendar errors. */ /* Add background image [3] to all calendar grid views [5]. */ #day-hour-content-holder, #week-view-content-holder, #multiweek-grid, #month-grid { background-repeat: no-repeat; background-position: center; background-attachment: scroll; background-image: url(sunbirdtours.com_bird05_3D.gif); /*background-image: url(naturekenya.org_Golden-wingedSunbird.gif);*/ } /* Override opacity [4] of grid cells [5,6] and nested [4] event boxes to partly transparent so that image behind them is visible. Some opacity is required to show colored backgrounds, such as selected cells, as well as borders and text. (BUG: Breaks week view event selection, so comment out week-view below.) (BUG: Overlaid event boxes not transparent in dayview, weekview.) */ .day-view-hour-box-class, /*.week-view-hour-box-class,*/ .month-day-box-class { opacity : 0.75; } /* References: [1] Where is my profile folder? http://kb.mozillazine.org/index.phtml?title=Profile_Folder#Where_is_my_profile_folder? [2] Customizing Mozilla: User CSS http://www.mozilla.org/unix/customizing.html [3] CSS 2: Colors and Backgrounds: The Background http://www.w3.org/TR/REC-CSS2/colors.html#q2 [4] CSS 3: Opacity http://www.w3.org/TR/css3-color/#transparency [5] View XUL Sources (used to build calendar.jar) http://lxr.mozilla.org/mozilla/source/calendar/resources/content/dayView.xul http://lxr.mozilla.org/mozilla/source/calendar/resources/content/weekView.xul http://lxr.mozilla.org/mozilla/source/calendar/resources/content/multiweekView.xul http://lxr.mozilla.org/mozilla/source/calendar/resources/content/monthView.xul [6] Skin CSS Sources for views (used to build calendar.jar) Winstripe Skin (Sunbird on windows & Linux) http://lxr.mozilla.org/mozilla/source/calendar/sunbird/themes/winstripe/sunbird/calendar.css Pinstrip Skin (Sunbird on MacOSX) http://lxr.mozilla.org/mozilla/source/calendar/sunbird/themes/pinstripe/sunbird/calendar.css Classic Skin (Calendar Extension on firefox, thunderbird, mozilla suite classic theme) http://lxr.mozilla.org/mozilla/source/calendar/resources/skin/classic/calendar.css Modern skin (Calendar Extension on mozilla suite modern theme) http://lxr.mozilla.org/mozilla/source/calendar/resources/skin/modern/calendar.css */