User:Ssitter/UserChrome

From MozillaWiki
< User:Ssitter
Revision as of 12:48, 29 March 2011 by OldManRiver (talk | contribs) (userChrome.css)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Ambox outdated.png THIS PAGE MAY BE OUTDATED
This article is in parts, or in its entirety, outdated. Hence, the information presented on this page may be incorrect, and should be treated with due caution until this flag has been lifted. Help by editing the article, or discuss its contents on the talk page.

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:

oldstylemonth0lk.th.png Month View

oldstyleweek3an.th.png 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;
}

OldManRiver here!

Hey do not have the "chrome" folder in the profile, only in the System folders under "C:\Program Files\Mozilla Thunderbird\chrome". Is this where the .css is supposed to be or do I need to create the folder under the user profile for this to work.

Also! The .css example does not show an element for the "current day" and on my computer (laptop) the shading is so faint, I can not make it out, so need a darker color that I can see. What is needed for that? Do you have an element name?

Thanks!

OMR