Grid Title Centering CSS - Sunbird

From MozillaZine Knowledge Base
Jump to navigationJump to search

Previews:

Month View:


Day View: 

/* CalendarGridTitleCentering.css
 * 
 * In Sunbird 0.9 the grid title is left justified with the nav buttons:
 *   < O > January 2009                           Calendar Week 1-5
 * To center and enlarge the calendar grid title (month name in month view),
 *   < O >              January 2009              Calendar Week 1-5
 * 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/CalendarGridTitleCentering.css
 * 2. Add the following to profile file chrome/userChrome.css (create if none):
 *   @import url("CalendarGridTitleCentering.css");
 *
 * Tested on Sunbird 0.9.
 *
 * Limitations:
 * - The navigation buttons are no longer closest to the grid title, so their
 *   purpose is not as clear.  (They are close to the first day label, so
 *   they look like they might change the view by one day rather than by
 *   the grid interval.)
 * - The grid title is centered in the space between the navigation buttons
 *   and the calendar week number.  Since the buttons and calendar week number
 *   are not the same length (which varies with language and week number),
 *   the grid title is not strictly centered over grid.
 */

label.view-header[anonid="intervalDescription"] {
  /* Enlarge and center the grid title between the nav-buttons and week number.
     (The title label and week number label both have flex="1", so they
     evenly divide any remaining horizontal space [3].  Therefore,
     right-aligning title text equalizes horizontal space on either side.
     In most languages, the navigation buttons are narrower than the week
     number text, so the title may not be centered over the grid.) */
  text-align: right; 
  font-size: large ! important;
}
calendar-navigation-buttons {
  /* Align buttons, large title, and small week number by vertical center [6]*/
  -moz-box-align: center;  
}
calendar-decorated-day-view box[anonid="labelbox"] {
  /* Hide redundant (and differently centered) date label box in Day View */
  display: none;
}

/* 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] XUL Reference: flex
 *     (https://developer.mozilla.org/En/XUL/Attribute/Flex)
 * [4] CSS 2.1: Text: The 'text-align' property
 *     (http://www.w3.org/TR/CSS21/text.html#alignment-prop)
 * [5] CSS 2.1: Fonts: The 'font-size' property
 *     (http://www.w3.org/TR/CSS21/fonts.html#font-size-props)
 * [6] CSS Reference: Mozilla Extensions: -moz-box-align
 *     (https://developer.mozilla.org/en/CSS/-moz-box-align)
 * [7] CSS 2.1: Visual Formatting Model: The 'display' property
 *     (http://www.w3.org/TR/CSS21/visuren.html#display-prop)
 * This file is at http://kb.mozillazine.org/Grid_title_centering_CSS_-_Sunbird
 */
Retrieved from "http://kb.mozillazine.org/index.php?title=Grid_Title_Centering_CSS_-_Sunbird&oldid=38401"