Here is how to change Event background color

For discussing the Mozilla Calendar, Sunbird and Lightning projects.
Post Reply
Patrick Vanderheyden
Posts: 3
Joined: March 29th, 2009, 8:17 am

Here is how to change Event background color

Post by Patrick Vanderheyden »

Hello,

After a while, i finally succeeded in changing the all backgroug color of events according to the category, instead of a coloured line at the right side.

Image

Maybe some of you would be interested.
How to : (excuse my poor english)


1- At first, define the categories via the appropriate menu in Thunderbird.
Attention, categories names should not contain any accent (see further).

2- Create a directory named "chrome" under your Thunderbird profile (something like "xxyy9zz.default").
Note :sometimes this directory already exist, following previous changes made to TB appearance.

3- Create (or complete) a file named "userChrome.css" with a text editor . Attention, with my configuration (Linux Ubuntu), this name is case sensitive ! "Userchrome.css" is not fonctionnal in my configuration.
Save this empty file in the chrome directory previously created.

4- Then copy/paste the following code in the empty file :

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

.calendar-event-box-container[categories] {margin: 0px !important;background-position: top left !important;background-repeat: no-repeat !important;
}

calendar-category-box[categories]{
display: none !important;
}

/* Adapting background color following category */
.calendar-event-box-container[categories="xxx"] { color: black !important; background-color: #F08080 !important;}
.calendar-event-box-container[categories="yyyyyy"] { color: black !important; background-color: #e6e6fa !important;}
.calendar-event-box-container[categories="zzz_nnn"] { color: black !important; background-color: #FFCC66 !important;}



5- Modify code following your own categories/colors :
To do it, replace "xxxx", "yyy" and "zzz_nnn" with the name of your categories, as defined at the first step.
Following the number of categories you want, delete or add as many lines (from ".calendar .... to ... tant;}") you need by copy/paste .

Attention : category names should follow some rules :
- no accent (quite common in french ...)
- upper case letters become lower case letter in the code lines : for exple "Private" becomes "private", "PrivateMarc" becomes "privatemarc"
- spaces becomes "_" : exple "Private Marc" becomes "private_marc"

Then, modify colors following your choices :
- text color : black can be changed in white, etc ....
- background color : modify the color code #xxyyzz following your choices (make a google search with "code+color+rgb" to discover the different codes available).

6- Then save the file, reload Thunderbird and enjoy it !

Hope this could be helpfull,
patrick
pagestep
Posts: 1
Joined: December 17th, 2004, 10:06 am
Location: Penticton, BC Canada
Contact:

Re: Here is how to change Event background color

Post by pagestep »

Thank you, Patrick. I've been using Lightning for some time, and it's always bothered me that the event background colors were restricted to the right-most little bit. Your "fix" worked a treat.

Cheers!
Dirk
tudtiger
Posts: 2
Joined: April 26th, 2011, 3:13 pm

Re: Here is how to change Event background color

Post by tudtiger »

THANKS A LOT!
User avatar
Le loir
Posts: 81
Joined: April 5th, 2011, 1:46 am

Re: Here is how to change Event background color

Post by Le loir »

Thanks / Merci Patrick !
johnsmithbisley
Posts: 29
Joined: December 9th, 2009, 11:57 am

Re: Here is how to change Event background color

Post by johnsmithbisley »

Patrick - many, many thanks. Could you tell me the line to add so that I can specify a different colour when the Event is selected? By default I had a blue colour when the Event was NOT selected and it changed to a gold colour when it was SELECTED.

This made it much easier to select one Event from several on the same day. Now that I am using your excellent method to choose my colours I cannot see which event is actually selected.

I did try to find an answer but apart from seeing that there some condition like Selected=True, I do not have your skill to apply it.
pete of ebor
Posts: 143
Joined: February 18th, 2012, 8:41 am

Re: Here is how to change Event background color

Post by pete of ebor »

Hi Patrick. I've just found this thread and it looks like a great fix but I've a couple of questions. I'm not a programmer so I'd like to clarify a few points before I do anything.
1) will this fix work in Windows XP ?
2) Where is the Thunderbird profile you mention ? In my program files, I have a folder called 'Mozilla Thunderbird' and under there is a folder called 'chrome' Do I put the 'userchrome.css' file in here or somewhere else...
3) Should I leave well alone as it's obvious that I don't know what I'm doing ? :D

Pete
User avatar
Le loir
Posts: 81
Joined: April 5th, 2011, 1:46 am

Re: Here is how to change Event background color

Post by Le loir »

@ Pete of ebor:
1> This works for me on XP,
2> To find TB profile path, click on top "?" and choose second option, the profile folder can be open from there.
pete of ebor
Posts: 143
Joined: February 18th, 2012, 8:41 am

Re: Here is how to change Event background color

Post by pete of ebor »

Le loir wrote:@ Pete of ebor:
1> This works for me on XP,
2> To find TB profile path, click on top "?" and choose second option, the profile folder can be open from there.


Thanks very much Le Loir. Managed to get it working and it makes the calendar much easier to read.
User avatar
Le loir
Posts: 81
Joined: April 5th, 2011, 1:46 am

Re: Here is how to change Event background color

Post by Le loir »

you're welcome Pete of ebor!
llorton
Posts: 7
Joined: July 6th, 2004, 12:05 pm
Location: MD

Re: Here is how to change Event background color

Post by llorton »

I generally don't use categories and the default color for any event on the calendar is white text on blue background, which I hate.

Image


Is there a way to assign another color background as the default
or
to assign a category as default so I can assign the chosen color to that category?

TIA,

Lew
Lew Lorton
User avatar
ssitter
Posts: 2495
Joined: October 19th, 2007, 12:24 am
Location: Germany

Re: Here is how to change Event background color

Post by ssitter »

Double click the calendar entry in the left pane or choose Properties... from context menu. Use the color picker to choose a different color for the calendar.
stjamespark
Posts: 17
Joined: August 31st, 2003, 12:09 pm

Re: Here is how to change Event background color

Post by stjamespark »

I added the suggested code (as I understood it) to some code I had used to change various other colors, but the EVENT BACKGROUND has not changed.
What have I done wrong.
I have categories medical, ships and important which still ahve the vertical stripe.
p.s. I am om Windows 10
@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");

/*----------------------------------------------------------------------------------------------*/
/* background color for folder pane */
/*----------------------------------------------------------------------------------------------*/

#folderTree treecol,
#folderTree {
background-color: #e4eee5 !important;
}

/*----------------------------------------------------------------------------------------------*/
/* background color for thread pane */
/*----------------------------------------------------------------------------------------------*/

#threadTree treecol,
#threadTree {
background-color: #e4eee5 !important;
}


/*----------------------------------------------------------------------------------------------*/
/* Change color of Today & SelectedDay panes*/
/*----------------------------------------------------------------------------------------------*/

.calendar-month-day-box-current-month[relation=today] {background-color: #cadbcb !important;}
.calendar-month-day-box-current-month {background-color: #e3ede4 !important;}
.calendar-month-today-pane-current-month {background-color: #e3ede4 !important;}

/*------------------*/
/* event colours */
/*------------------*/

.calendar-event-box-container[categories] {margin: 0px !important;background-position: top left !important;background-repeat: no-repeat !important;
}

calendar-category-box[categories]{
display: none !important;
}

/* Adapting background color following category */
.calendar-event-box-container[categories="medical"] { color: black !important; background-color: #F08080 !important;}
.calendar-event-box-container[categories="ships"] { color: black !important; background-color: #e6e6fa !important;}
.calendar-event-box-container[categories="important"] { color: black !important; background-color: #FFCC66 !important;}
morat
Posts: 6394
Joined: February 3rd, 2009, 6:29 pm

Re: Here is how to change Event background color

Post by morat »

@stjamespark

It isn't possible to style the category colors with just css anymore.

More info: http://forums.mozillazine.org/viewtopic ... #p14924045

And please don't dig up old threads, start a new topic instead.
stjamespark
Posts: 17
Joined: August 31st, 2003, 12:09 pm

Re: Here is how to change Event background color

Post by stjamespark »

Sorry.
I seldom visit here but could someone direct me to a thread that addresses the problem.
morat
Posts: 6394
Joined: February 3rd, 2009, 6:29 pm

Re: Here is how to change Event background color

Post by morat »

@stjamespark

There are many threads about the problem, but no solutions.

Similar threads
http://forums.mozillazine.org/viewtopic ... &t=3088445
http://forums.mozillazine.org/viewtopic ... &t=3078761
Post Reply