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:
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.
