Main Content

Style Mozilla Lightning

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
Old Lightning View

After
New Lightning View

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.
Up-Down

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.

4 Responses

  1. Jochen says:

    I like this style. But is it normal that only “Day View” and “Week View” are themed?

  2. Thomas says:

    Yes. I haven’t go around to getting everything themed. Since I only use day or week view, that’s as far as I got.

  3. Duane says:

    Out of curiousity, where did you get access to all of the properties (e.g. how did you know .calendar-event-box-container was a valid tag?

    I actually want to change the default background of calendar from white to a light gray, and am searching for the right property.

    Thanks.

    • Thomas says:

      I downloaded the extension to my desktop, changed .xpi to .zip and opened it up. Then looked through the CSS files inside. 🙂

Leave a Reply