[SOLVED] Change green weekend color?

For discussing the Mozilla Calendar, Sunbird and Lightning projects.
Post Reply
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

[SOLVED] Change green weekend color?

Post by Ed1 »

Is there a way to change the green background color and the darker green header color of each Saturday and Sunday in the monthly view weekend columns?

I already have the CalendarTweaks addon, but this change is not included.

Thanks.
Last edited by Ed1 on December 1st, 2018, 1:21 pm, edited 2 times in total.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Change green weekend color?

Post by morat »

Try this:

Code: Select all

/* Thunderbird userChrome.css */

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

window {
  --viewWeekendBackground: pink !important;
}
http://kb.mozillazine.org/UserChrome.css

Reference
http://dxr.mozilla.org/comm-esr60/sourc ... -views.css
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

Re: Change green weekend color?

Post by Ed1 »

Thanks, morat!

That code changes the background of the weekend day boxes. But is there code to change the darker shade of green on the header to the weekend day boxes on the Month view?

I looked through the listing of changes that you linked to, but didn't know which one would be needed.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Change green weekend color?

Post by morat »

Try this:

Code: Select all

window {
  --viewMonthDayOffLabelBackground: hotpink !important;
  --viewWeekendBackground: pink !important;
}
I'm using a color picker to find the css property.
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

Re: Change green weekend color?

Post by Ed1 »

Thanks again, morat. I really appreciate your help!
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

Re: Change green weekend color; font changes?

Post by Ed1 »

morat (or anyone),

Currently, in the Month or Multiweek view, one of the names Monday, Tuesday, Wednesday, etc. are in a heavy-bold text weight when the current date corresponds to that column. I would like to change the names of those days of the week displayed to be in a medium bold text when the current date does not correspond to the column and (as at present) to remain in heavy bold text when the current date is in that column.

Currently, the numerical days of the month (1, 2, 3. . . ) that are at the right side of the header of each day box are in non-bold text, except that the numerical date changes to medium-bold text when that day is selected or to heavy-bold text when a day is the current date. I would like to change the non-bold text dates to medium-bold normally, and to heavy-bold when selected (the current date would remain as heavy-bold as it is now).

Are any of these changes possible through .css code?
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Change green weekend color?

Post by morat »

Try this:

Code: Select all

.calendar-day-label-name {
  color: purple !important;
  font-weight: bold !important;
}

.calendar-day-label-name[relation="today"] {
  color: green !important;
  font-weight: bolder !important;
}
I can't tell the difference between bold and bolder.

Font weight
http://www.w3schools.com/cssref/pr_font_weight.asp

P.S.

Here is how to find a node with the calendar-day-label-name class in the Developer Toolbox.

* select Calendar tab
* open Developer Toolbox in Developer Tools menu in Tools menu
* click Pick an element from the page button in Developer Toolbox
* click current day name e.g. Saturday in Calendar tab

More info: http://forums.mozillazine.org/viewtopic ... &t=3034448
Last edited by morat on December 1st, 2018, 5:23 pm, edited 1 time in total.
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

Re: Change green weekend color?

Post by Ed1 »

Thank you very much for all of this information, morat. The code change works to make the days of the week in bold. I would like to do the same for the number digits of the dates of the month. What would the code be for that?

I am trying to follow your instructions, but when I open the Developer Toolbox it is blank at first. Then I click OK in the remote connection dialog, and the Toolbox fills in, but there is no "Pick an element from the page" button visible, even though it is checked in the Available Toolbox Buttons section of the Settings (gear icon).

EDIT: I found the button and am able to highlight the element with the numerical date. But, not being too familiar with how to write .css code, I can't seem to get the code right. I'm using:

.calendar-monthday-label-name {
color: black !important;
font-weight: bold !important;
}
Last edited by Ed1 on December 1st, 2018, 11:44 am, edited 2 times in total.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Change green weekend color?

Post by morat »

Here is a pic with the button circled.

http://i68.tinypic.com/23h96hj.png
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

Re: Change green weekend color?

Post by Ed1 »

Found the button, but still can't get it right! See Edit to above post.
Ed1
Posts: 1059
Joined: January 30th, 2005, 2:33 pm

Re: Change green weekend color?

Post by Ed1 »

Finally, got it to work. Took a long time and many tries. Thanks, morat.

.calendar-month-day-box-date-label {
color: black !important;
font-weight: bold !important;
}
Post Reply