Table of Contents
Events Widget Disappearing #
On JSValley the events widget disappeared from the homepage, and when we added it back, the styles were gone (even when the CSS was still in style.css)
This was fixed by going to Dashboard > Events > Settings > Display and selecting:
• Default stylesheet used for events templates: Tribe Events Styles.
• Use updated calendar designs: checked.
And finally, adding the widget again (because it will disappear again when the settings are changed).
Customize Calendars v2 Colors #
Note that I added !important because in some scenarios, our CSS would not have enough importance and would be ignored.
Also, at the end of the CSS there is a color that is based on the main color, but it’s not the same. It’s much brighter, it is used for background.
(Version 3)
/** THE EVENT CALENDAR STARTS */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-events .tribe-events-c-ical__link:active,
.tribe-events .tribe-events-c-ical__link:focus,
.tribe-events .tribe-events-c-ical__link:hover,
.tribe-common .tribe-common-c-btn:focus,
.tribe-common .tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:focus,
.tribe-common a.tribe-common-c-btn:hover,
.tribe-events .tribe-events-calendar-list__event-row--featured .tribe-events-calendar-list__event-date-tag-datetime::after,
.tribe-common .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:disabled,
.tribe-common .tribe-tickets__buy.tribe-common-c-btn:disabled,
.tribe-events .datepicker .day.active,
.tribe-events .datepicker .day.active.focused,
.tribe-events .datepicker .day.active:focus,
.tribe-events .datepicker .day.active:hover,
.tribe-events .datepicker .month.active,
.tribe-events .datepicker .month.active.focused,
.tribe-events .datepicker .month.active:focus,
.tribe-events .datepicker .month.active:hover,
.tribe-events .datepicker .year.active,
.tribe-events .datepicker .year.active.focused,
.tribe-events .datepicker .year.active:focus,
.tribe-events .datepicker .year.active:hover{
background-color: #696969; /* change this value to match site */
}
.tribe-events-cal-links .tribe-events-gcal,
.tribe-events-cal-links .tribe-events-ical,
.tribe-events .tribe-events-c-ical__link,
.tribe-common .tribe-common-c-btn-border-small:active,
.tribe-common .tribe-common-c-btn-border-small:focus,
.tribe-common .tribe-common-c-btn-border-small:hover,
.tribe-common a.tribe-common-c-btn-border-small:active,
.tribe-common a.tribe-common-c-btn-border-small:focus,
.tribe-common a.tribe-common-c-btn-border-small:hover,
.tribe-common .tribe-common-anchor-thin-alt:active,
.tribe-common .tribe-common-anchor-thin-alt:focus,
.tribe-common .tribe-common-anchor-thin-alt:hover,
.tribe-common .tribe-common-cta--thin-alt,
.tribe-events-content a{
color: #696969 !important; /* change this value to match site */
border-color: #696969 !important; /* change this value to match site */
}
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-datetime-featured-text,
.tribe-common .tribe-common-c-svgicon,
.tribe-events-event-meta a,
.tribe-events-event-meta a:visited,
.tribe-events-single ul.tribe-related-events li .tribe-related-events-title a{
color: #696969 !important;
}
.tribe-events .tribe-events-c-ical__link:active,
.tribe-events .tribe-events-c-ical__link:focus,
.tribe-events .tribe-events-c-ical__link:hover{
color: #FFF !important;
}
.tribe-events-event-meta a:focus,
.tribe-events-event-meta a:hover,
.tribe-events-content a:active,
.tribe-events-content a:focus,
.tribe-events-content a:hover{
color: #696969 !important;
}
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner{
background: #dadada !important; /** This color is based on the main color of the site, but brighter. It's used for background of the event name in calendar view */
}
/** /THE EVENT CALENDAR ENDS */
