Is there a straightforward way to adjust the colors of the calendar displayed in the calendar plugin? We have some complaints about accessibility of the light-gray-on-white color scheme.

[תמונה] Marty Downs: We have some complaints about accessibility of the light-gray-on-white color scheme. There aren’t any settings that can be used to adjust the calendar’s colors, but the colors can be overridden with a bit of CSS. I’m far from a CSS expert, but is something like this close to what you’re looking for? [image] The only change I’ve made is to darken the outer border and the lines that are used to divide the calendar days. If that’s the kind of change you are looking for, I can find the correct CSS selectors for you. (The adjustment I made in that screenshot was just done through my browser’s CSS tools.)

Thanks! That would be a big improvement. I’d live some help finding the right selectors.

Great! You’ll need to either edit your site’s theme CSS file, or add the changes to a theme component and then include that theme component on all your site’s themes. I’ve used the theme component approach on my test site. Here’s an attempt to show that process with screenshots: [image] [image] [image] Make sure to add your site’s theme (or themes) to the “Include component on these themes” input. Once you’ve done that, click the "Edit CSS/HTML button and add the following to the theme editor’s Common CSS tab: .discourse-calendar-wrap { border: 5px solid var(--primary); } .calendar.fc.fc-unthemed .fc-content, .calendar.fc.fc-unthemed .fc-divider, .calendar.fc.fc-unthemed .fc-list-heading td, .calendar.fc.fc-unthemed .fc-list-view, .calendar.fc.fc-unthemed .fc-popover, .calendar.fc.fc-unthemed .fc-row, .calendar.fc.fc-unthemed tbody, .calendar.fc.fc-unthemed td, .calendar.fc.fc-unthemed th, .calendar.fc.fc-unthemed thead { border-color: var(--primary); } What that change does is set the calendar’s border colors to your site’s “primary” color - the same color as is used for the site’s text. By using the --primary variable, the change works with both light and dark color schemes: [image] [image] Instead of using var(--primary) to set the color, you can hard code a hex color. For example #000000 for black: .discourse-calendar-wrap { border: 5px solid #000000; } Let me know if you see any undesirable side effects from this change. It’s possible that the second rule is selecting some elements that you’d rather leave at the old lighter color.

עיצוב לוח שנה?

תמיכה

Marty_Downs (Marty Downs) 16 בספטמבר,‏ 2023,‏ 4:30am 5

Sweet! Thanks so much. I’ll give it a try tomorrow.

נושא		תגובות	צפיות
Changing the background of the calendar to be other than transparent Development events	1	197	24 באפריל,‏ 2024
Calendar Events no longer have borders or color in calendar view since update Product Support events	5	402	15 בספטמבר,‏ 2025
Calendar events unreadable in dark mode if the category has a dark color UX events	1	138	22 באוגוסט,‏ 2025
Css class calendar picking advanced search - foundation theme Product Support	6	180	16 בספטמבר,‏ 2025
Switching the discourse color scheme: Changing Red Hues in CSS Product Support	3	1259	1 בספטמבר,‏ 2023

עיצוב לוח שנה?

נושאים קשורים