I was excited to hear about Mozilla’s latest extension called Lightning. It is a calendar extension that is nicely integrated into Thunderbird.

Granted this is version 0.1, and there are a lot of bugs, but it is quite nice. A great start to a much needed Thunderbird addon.

One thing that bugged me though was the look. Just seemed like it could be cleaner. So I took a few minutes, dug though the extension and found some CSS that allowed me to give the calendars a nicer, more enjoyable, look and feel.

Judge for yourself:

Before

After

To get this style to work for you, you must first know how to access Thunderbirds userChrome.css file. If you don’t already know how to do that, head over to Mozilla to find out.

If you don’t have a userChrome.css file you can just download mine and add it in Thunderbirds chrome folder.

If you already have a userChrome.css file, you’ll need to add some code to it.

The code.
Now this works great for me on a Mac and I offer no guarantees. If you add it and don’t like it, just remove the code from the userChrome.css file and it’ll go away.

.calendar-time-bar-box-odd { border-top: 1px solid #ffffff !important; border-left: 1px solid #ffffff !important; background: #e5e5e5 !important; }

.calendar-time-bar-box-even { border-top: 1px solid #ffffff !important; border-left: 1px solid #ffffff !important; background: #f5f5f5 !important; }

.calendar-event-column-linebox[orient="vertical"] { border-bottom: 1px solid #e5e5e5 !important; }

calendar-event-column { border-left: 1px solid #e5e5e5 !important; border-top: 1px solid e5e5e5 !important; background-color: #ffffff !important; }

calendar-header-container { border-left: 1px solid #e5e5e5 !important; border-top: 1px solid #e5e5e5 !important; background-color: #FFFFFF !important; }

.calendar-day-label-box { background: #e5e5e5 !important; }

.calendar-day-label-date { font-weight: bold !important; text-align: center !important; font-size: 12px !important; }

.calendar-day-label-name { font-weight: bold !important; font-size: 14px !important; text-align: center !important; }

calendar-event-box[selected="true"]

.calendar-event-box-container { color: #000000 !important; background: #c1d4ff !important; }

.calendar-event-box-container[parentorient="vertical"] { border: none !important; }

.calendar-event-box-container[parentorient="horizontal"] { border: none !important; }

calendar-event-column[selected="true"] { background: #dce2ff !important; }

calendar-header-container[selected="true"] { background: #c1d4ff !important; }

calendar-event-gripbar { -moz-binding: url(chrome://calendar/content/calendar-multiday-view.xml#calendar-event-gripbar); min-height: 3px; min-width: 3px; background: #ffffff no-repeat center top url(up.gif) !important; }

Ohh and you'll also need this image (enlarged for easy viewability). Just save it in the same folder as your userChrome.css.


That’s it. Save your file and restart Thunderbird. Your calendar should now be themed!

Now I’m sure there is much more you can do but I haven’t gotten into it all yet. If you create your own style, post your link in the comments below to share it.

Tags: calendar, lightning, mozilla