Image Background CSS - Sunbird 0.2: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
m (Sunbird : Tips : Calendar Grid Background Image moved to Sunbird : Tips : Calendar Grid Background Image (Sunbird 0.2))
m (add forward pointer)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Advanced Tip: Calendar Grid Background Image==
==Advanced Tip: Calendar Grid Background Image==
(For Sunbird 0.3, see [[Image Background CSS - Sunbird 0.3]].)


  /* CalendarGridBackgroundImage.css
  /* CalendarGridBackgroundImage.css
 
     To add a personal background image to all calendar grid views,
     To add a personal background image to all calendar grid views,
     save this css in your profile [1] chrome directory,
     save this css in your profile [1] chrome directory,
     import this CSS in your userChrome.css [2],
     import this CSS in your userChrome.css [2],
     add your image, and modify the url.
     add your image, and modify the url.
 
     For Sunbird, the userChrome.css path may be something like the following
     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
     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
     gnu/linux: ~/.mozilla/sunbird/NNNNNN.default/chrome/userChrome.css
 
     1. Save this file in your profile as chrome/CalendarGridBackgroundImage.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):
     2. Add the following to profile file chrome/userChrome.css (create if none):
       @import url("CalendarGridBackgroundImage.css");
       @import url("CalendarGridBackgroundImage.css");
 
     3. Put the desired background image in the same directory.
     3. Put the desired background image in the same directory.
     4. Modify the url in CalendarGridBackgroundImage.css to the image filename.
     4. Modify the url in CalendarGridBackgroundImage.css to the image filename.
 
     The CSS was tested on Sunbird 0.2rc1 and 20041217-cal on Mozilla 1.7.5.
     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.  
     It is likely to require changes for future versions.  
 
     Warning: using userChrome.css can lead to errors developers can't reproduce.
     Warning: using userChrome.css can lead to errors developers can't reproduce.
     Test with userChrome.css removed before reporting Sunbird/Calendar errors.
     Test with userChrome.css removed before reporting Sunbird/Calendar errors.
  */
  */
 
  /* Add background image [3] to all calendar grid views [5]. */
  /* Add background image [3] to all calendar grid views [5]. */
  #day-hour-content-holder,  
  #day-hour-content-holder,  
Line 38: Line 40:
     /*background-image: url(naturekenya.org_Golden-wingedSunbird.gif);*/
     /*background-image: url(naturekenya.org_Golden-wingedSunbird.gif);*/
  }
  }
 
  /* Override opacity [4] of grid cells [5,6] and nested [4] event boxes
  /* Override opacity [4] of grid cells [5,6] and nested [4] event boxes
     to partly transparent so that image behind them is visible.   
     to partly transparent so that image behind them is visible.   
Line 53: Line 55:
   
   
  /* References:
  /* References:
 
     [1] Where is my profile folder?
     [1] Where is my profile folder?
     http://kb.mozillazine.org/index.phtml?title=Profile_Folder#Where_is_my_profile_folder?
     http://kb.mozillazine.org/index.phtml?title=Profile_Folder#Where_is_my_profile_folder?
 
     [2] Customizing Mozilla: User CSS
     [2] Customizing Mozilla: User CSS
     http://www.mozilla.org/unix/customizing.html
     http://www.mozilla.org/unix/customizing.html
 
     [3] CSS 2: Colors and Backgrounds: The Background
     [3] CSS 2: Colors and Backgrounds: The Background
     http://www.w3.org/TR/REC-CSS2/colors.html#q2
     http://www.w3.org/TR/REC-CSS2/colors.html#q2
 
     [4] CSS 3: Opacity
     [4] CSS 3: Opacity
     http://www.w3.org/TR/css3-color/#transparency
     http://www.w3.org/TR/css3-color/#transparency
 
     [5] View XUL Sources (used to build calendar.jar)
     [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/dayView.xul
Line 71: Line 73:
     http://lxr.mozilla.org/mozilla/source/calendar/resources/content/multiweekView.xul
     http://lxr.mozilla.org/mozilla/source/calendar/resources/content/multiweekView.xul
     http://lxr.mozilla.org/mozilla/source/calendar/resources/content/monthView.xul
     http://lxr.mozilla.org/mozilla/source/calendar/resources/content/monthView.xul
 
     [6] Skin CSS Sources for views (used to build calendar.jar)
     [6] Skin CSS Sources for views (used to build calendar.jar)
     Winstripe Skin (Sunbird on windows & Linux)
     Winstripe Skin (Sunbird on windows & Linux)
Line 83: Line 85:
  */
  */


[[Category:Sunbird]]
[[Category:Calendar 0.2]][[Category:Tips - Calendar 0.2]]

Latest revision as of 14:45, 2 November 2008

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