Image Background CSS - Sunbird

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