User:Ssitter/UserChrome

New 'old' look for Sunbird 0.3a1+ and Lightning 0.1

Note: Most of the style rules below are now contained in Sunbird 0.3a2 default theme.

I have played around a little bit with my userChrome.css file to see what is possible. The result brings back the 'old' Sunbird look to Sunbird 0.3a1+ and Lightning 0.1. It is not finished yet and I'm not happy with every detail. But maybe someone has a good idea?

Preview:

Month View

Week View

userChrome.css

How to use it? Go to the "chrome" folder in your Sunbird or Thunderbird profile folder and find the "userChrome.css" file. Put the following code into that file:

/*
 * Do not remove the @namespace line -- 
 * it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*
==================================================
 MAIN view deck - contains nav buttons and views
==================================================
*/
#view-deck {
  background: #FFFFFF;
  padding: 0px;
}

/*
==================================================
 NAVIGATION buttons
==================================================
*/

calendar-navigation-buttons { 
  background: #FFFFFF;
  padding: 0px 0px 2px 0px;
}
.title-label-box button {
  background-color: transparent !important;
  font-size: 2em !important;
  font-weight:bold !important;
}

.title-label-box .title0 { /* current day/week/month button */
}
.title-label-box .title1 { /* +1/-1 day/week/month button  */
  display: none !important;
}
.title-label-box .title2 { /* +2/-2 day/week/month button  */
  display: none !important;
}

.nav-buttons[direction="next"] {/* next day/week/month arrow */
  /* display: none !important; */
}
.nav-buttons[direction="prev"] {/* prev day/week/month arrow */
  /* display: none !important; */
}

/*
==================================================
 MULTIWEEK and MONTH view 
==================================================
*/

calendar-month-view {
  background: #FFFFFF;
  padding: 2px 2px 2px 2px;
}

calendar-month-view-column-header {
  color: #3F7D91;
  background: #E7EEEC;
  font-size: 1.2em !important;
  font-weight:bold !important;
  border-left: 1px solid #3F7D91;
  border-right: 1px solid #3F7D91;
  border-top: 1px solid #3F7D91;
}

calendar-month-day-box {
  border: 1px solid #3F7D91 !important;
}
.calendar-month-day-box-even {
  background: #FFFFFF !important;
}
.calendar-month-day-box-weekend {
  background: #FFF9E7 !important;
}
.calendar-month-day-box-odd {
  background: #E7EEEC !important;
}
.calendar-month-day-box-even[selected="true"],
.calendar-month-day-box-weekend[selected="true"],
.calendar-month-day-box-odd[selected="true"] {
  background: #D5E3F2 !important;
  border: 1px solid #1D7AB5 !important;
}
.calendar-month-day-box-even[today="true"],
.calendar-month-day-box-weekend[today="true"],
.calendar-month-day-box-odd[today="true"] {
  font-weight: bold;
  border: 3px solid #1D7AB5 !important;
}

calendar-month-day-box-item {
  font-size: 1.2em !important;
  padding: 1px !important;
  border: 1px solid #000000 !important;
}
.calendar-month-day-box-date-label { 
  color: #3F7D91 !important;
}

/*
==================================================
 DAY and WEEK view 
==================================================
*/

calendar-multiday-view {
  background: #FFFFFF;
  padding: 2px 2px 2px 2px;
}

/* ========== Day columns ========== */
calendar-event-column,
calendar-header-container { 
  background: #FFFFFF !important;
  border-left: 1px solid #3F7D91 !important;
  border-top: 1px solid #3F7D91 !important;
}
calendar-event-column[selected="true"],
calendar-header-container[selected="true"] { 
  background: #D5E3F2 !important;
}

/* ========== Header row (top) ========== */
.calendar-day-label-box { 
  color: #3F7D91;
  background: #E7EEEC !important;
  border-top: 1px solid #3F7D91 !important;
  border-left: 1px solid #3F7D91 !important;
}
.calendar-day-label-date {
  font-size: 1em !important;
}
.calendar-day-label-name {
  font-size: 1.4em !important;
}

/* ========== Time column (left) ========== */
.calendar-time-bar-box-odd,
.calendar-time-bar-box-even {
  color: #3F7D91;
  background: #E7EEEC !important;
  text-align: right;
  border-top: 1px solid #3F7D91 !important;
  border-left: 1px solid #3F7D91 !important;
}