MozillaZine

[SOLVED] Change green weekend color?

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

Post Posted November 19th, 2018, 10:25 am

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: 3187
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 19th, 2018, 10:52 am

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/source/calendar/base/themes/common/calendar-views.css

Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted November 19th, 2018, 11:50 am

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: 3187
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 19th, 2018, 12:07 pm

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: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted November 19th, 2018, 1:14 pm

Thanks again, morat. I really appreciate your help!

Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted November 29th, 2018, 4:23 pm

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: 3187
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 1st, 2018, 9:57 am

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: viewtopic.php?f=23&t=3034448
Last edited by morat on December 1st, 2018, 5:23 pm, edited 1 time in total.

Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted December 1st, 2018, 11:13 am

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: 3187
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 1st, 2018, 11:40 am

Here is a pic with the button circled.

http://i68.tinypic.com/23h96hj.png

Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted December 1st, 2018, 11:43 am

Found the button, but still can't get it right! See Edit to above post.

Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted December 1st, 2018, 1:17 pm

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;
}

Return to Calendar


Who is online

Users browsing this forum: No registered users and 1 guest