MozillaZine

Guide: Customising Lightnings Colours

For discussing the Mozilla Calendar, Sunbird and Lightning projects.
Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted June 9th, 2007, 6:36 pm

Hi,
This is a short guide on how to customise Lightnings colours, as well as the code I have used to create a new theme that I feel better matches Thunderbird, and looks a bit nicer:

Finding the CSS Selectors

In your profile folder--which if you're on windows will be in C:\Documents and Settings\[Username]\Application Data\Thunderbird\Profiles\[Id].default\--there should be a folder called extensions. In that folder there is a folder for each extension, named after the extensions unique id, Lightnings unique id is {e2fda1a4-762b-4020-b5ad-a41df1933103}. In there is a folder called chrome, and in that is a bunch of .jar files.

The .jar files are a lot like ZIP files; they're just a compressed folder really. You can open them up with 7-Zip and then browse through the folders and files just as you would regular folders. The relevant CSS files are in these two locations:
  • calendar.jar\skin\classic\calendar\
  • lightning.jar\skin\classic\lightning\

Editing the CSS

To edit these files directly you would have to extract them, edit, and then re-compress, which is just a pain; and your changes would be lost if you update the extension. Therefore its better to find the CSS selectors you want to edit, and then just override them in your userChrome.css file, which is located in the chrome folder within your profile folder.

All you need to do is edit/create this file, save and then reload Thunderbird, and you should see the new style.

My Custom Theme

This is the code you will need to change the theme to my new customised theme, here is a preview image:

Image

Month View
I've only done the Month view, as that's the only view I really use:

Code: Select all
/* Month View */
calendar-month-view {
  padding: 0 !important;
}

calendar-month-day-box {
  border-color: #c1c0c4 !important;
}

.calendar-month-day-box-other-month {
  background-color: transparent !important;
  opacity: 0.25;
}

.calendar-month-day-box-day-off {
  background-color: #f3f5f7 !important;
}

.calendar-month-day-box-current-month[today="true"],
.calendar-month-day-box-day-off[today="true"],
.calendar-month-day-box-other-month[today="true"] {
  border: 2px solid #8b8a8f !important;
}

.calendar-month-day-box-current-month[selected="true"],
.calendar-month-day-box-day-off[selected="true"],
.calendar-month-day-box-other-month[selected="true"] {
  background-color: #e1e9f2 !important;
}

.calendar-month-day-box-date-label {
  color: #2e4e73 !important;
}

calendar-month-day-box-item {
   font-size: 1.1em !important;
}

calendar-month-day-box-item[selected="true"] {
  color: #ffffff !important;
  background-color: #5e81bc !important;
}

calendar-month-view-column-header {
   font-size: 1.1em !important;
   color: #2e4e73 !important;
   border-color: #ebe9ed !important;
   background-color: transparent !important;
}

.title2 {
  background: none !important;
  font-size: 1.5em !important;
  opacity: 0.5 !important;
}

.title1 {
    background: none !important;
    font-size: 1.7em !important;
    opacity: 0.7 !important;
    margin: 0px !important;
    padding: 0px !important;
}

.title0 {
    background: none !important;
}


Week/Day View
bed has kindly provided a custom week/day view based on the same colour scheme as my month view, the css for applying this theme can be found here.

I hope this helps you out, if you have any questions feel free to ask.
Last edited by Jak-S on July 16th, 2007, 2:47 am, edited 3 times in total.

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted June 10th, 2007, 5:45 am

Edited: Please see my full guide above.
Last edited by Jak-S on July 16th, 2007, 2:44 am, edited 1 time in total.

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted June 10th, 2007, 6:44 am

Edited: Please see my full guide above.
Last edited by Jak-S on July 16th, 2007, 2:45 am, edited 1 time in total.

Tedster

User avatar
 
Posts: 19
Joined: April 24th, 2005, 6:18 pm

Post Posted July 5th, 2007, 8:50 am

That works for the "Month View" calendar entries, but how can I edit the appearance of the banner (the buttons for my months are truncated and look really sloppy)? Where are the CSS entries that Lightning uses originally? They are NOT located in my UserChrome.css file, so where can I find them to edit and play with? Thanks.
Tedster

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted July 5th, 2007, 8:56 am

Edited: Please see my full guide above.
Last edited by Jak-S on July 16th, 2007, 2:45 am, edited 1 time in total.

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted July 5th, 2007, 9:30 am

Edited: Please see my full guide above.
Last edited by Jak-S on July 16th, 2007, 2:46 am, edited 1 time in total.

Tedster

User avatar
 
Posts: 19
Joined: April 24th, 2005, 6:18 pm

Post Posted July 5th, 2007, 9:33 am

Thanks, but that doesn't cure my problem with the truncation of the buttons (background images) for the months in the title. Where did you find these entries (title0,title1, etc.) originally. I would like to be able to edit for myself. Thanks again.
Tedster

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted July 5th, 2007, 9:42 am

Edited: Please see my full guide above.
Last edited by Jak-S on July 16th, 2007, 2:46 am, edited 1 time in total.

Tedster

User avatar
 
Posts: 19
Joined: April 24th, 2005, 6:18 pm

Post Posted July 5th, 2007, 9:47 am

OK you lost me at the ..........extensions\{e2fda1a4-762b-4020-b5ad-a41df1933103}\chrome\calendar.jar point. I haven't dealt with jar files so am I over my head? I figured there was a plain old css file that I could edit and bang... problem solved! Not that easy huh?
Tedster

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted July 5th, 2007, 10:04 am

Edited: Please see my full guide above.
Last edited by Jak-S on July 16th, 2007, 2:47 am, edited 1 time in total.

Tedster

User avatar
 
Posts: 19
Joined: April 24th, 2005, 6:18 pm

Post Posted July 5th, 2007, 10:08 am

Thanks. I vaguely remembered that so I googled and found out how to extract the css files. I can now go to work! Thanks a million for the help!
Tedster

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted July 5th, 2007, 10:11 am

You're welcome.

bed
 
Posts: 4
Joined: July 15th, 2007, 7:54 pm

Post Posted July 15th, 2007, 8:54 pm

Jak-S, thanks so much for posting that - the default colours are horrible.

I've mimiked what you did with the month view for the day/week views. Incase anyone wants it:

Code: Select all
/* Week View */
calendar-multiday-view {
  padding: 0 !important;
}

calendar-event-column {
  border-color: #c1c0c4 !important;
  background-color: transparent !important;
}

.calendar-label-day-box {
  color: transparent !important;
  background-color: transparent !important;
  font-size: 1.1em !important;
}

calendar-day-label {
  color: #3F7D91;
  background: transparent !important;
  border-top: 1px solid #3F7D91;
  border-left: 1px solid #3F7D91;
}


calendar-label-day-box[selected="true"] {
  color: #ffffff !important;
  background-color: #5e81bc !important;
}

.calendar-time-bar-box-odd,
.calendar-time-bar-box-even {
  font-size: 1.1em !important;
  color: #2e4e73 !important;
  border-color: #ebe9ed !important;
  background-color: transparent !important;
  text-align: right;
  overflow: hidden;
}



calendar-header-container[weekend="true"],
.calendar-event-column-linebox[weekend="true"],
.calendar-event-column-linebox[off-time="true"] {
   background-color: transparent !important;
}

calendar-header-container[today="true"],
.calendar-event-column-linebox[today="true"] {
  background-color: transparent !important;
}

calendar-header-container[selected="true"],
.calendar-event-column-linebox[selected="true"] {
  color: #ffffff !important;
  background-color: #e1e9f2 !important;
}

calendar-header-container[weekend="true"][today="true"],
.calendar-event-column-linebox[weekend="true"][today="true"],
.calendar-event-column-linebox[off-time="true"][today="true"] {
  border: 2px solid #8b8a8f !important;
  background-color: transparent !important;
}

calendar-header-container[weekend="true"][selected="true"],
.calendar-event-column-linebox[weekend="true"][selected="true"],
.calendar-event-column-linebox[off-time="true"][selected="true"] {
  color: #ffffff !important;
  background-color: #e1e9f2 !important;
}

Jak-S
 
Posts: 31
Joined: April 22nd, 2007, 4:18 am

Post Posted July 16th, 2007, 2:49 am

@bed: Thanks! That's great, I've updated my first post so that people don't miss yours.

Lost User 144014
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted July 20th, 2007, 2:49 pm

Hello Jak-S

I used your code and modified to my taste, thank you very much... I don't like the standard green! Is there code so that the current date (day of the month) doesn't show in "other months"? I've tried a lot of things, none worked.

Bill

Return to Calendar


Who is online

Users browsing this forum: No registered users and 0 guests