Image Background CSS - Sunbird
From MozillaZine Knowledge Base
Jump to navigationJump to search
Preview: Sunbird 0.5 Day View with image background, no events, Sunbird 0.5 Day View with image background, with events
Sample Background: Calendar-Logo.png
/* 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. (Suggestion: with standard theme, large artwork on light background works better than dark photos.) 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 (or see http://kb.mozillazine.org/Profile_folder) 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. This CSS was tested on Sunbird-0.5. (It did not work on Lightning-0.5, maybe because Lightning is an extension.) 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]. For month-view and multiweek-view: grid[anonid="monthgrid"] For day-view and week-view, one of the following: scrollbox[anonid="childbox"] attaches to scrollbox, stays in view. box[anonid="daybox"] attaches to scrolling grid, scrolls with grid. */ grid[anonid="monthgrid"], scrollbox[anonid="childbox"] { background-repeat: no-repeat; background-position: center; background-attachment: scroll; /* failed: background-image: url(Calendar-Logo.svg); */ background-image: url(Calendar-Logo.png); /*background-image: url(sunbirdtours.com_bird05_3D.gif);*/ /*background-image: url(naturekenya.org_Golden-wingedSunbird.gif);*/ } /* Override opacity [4] of grid cells [5,6] 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. */ calendar-month-day-box, calendar-event-column { opacity: 0.75; } calendar-event-column { background : white; } /* 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] 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/base/content/calendar-month-view.xml http://lxr.mozilla.org/mozilla/source/calendar/base/content/calendar-multiday-view.xml [6] Skin CSS Sources for views (used to build calendar.jar) http://lxr.mozilla.org/mozilla/source/calendar/base/themes/winstripe/calendar-views.css http://lxr.mozilla.org/mozilla/source/calendar/base/themes/pinstripe/calendar-views.css This file is at http://kb.mozillazine.org/Image_Background_CSS_-_Sunbird */