Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
TEC > Styling the v2 mini calendar widget as v1.
.tribe-events-widget-events-month {
padding-left: 0 !important;
padding-right: 0 !important;
}
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-list {
justify-content: center !important;
}
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-link--prev {
margin-right: 20px;
}
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-link--next {
margin-left: 20px;
}
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-link--prev path,
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-link--next path {
fill: #fff;
}
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-link--prev svg,
.tribe-events-widget-events-month .tribe-events-header .tribe-events-c-top-bar__nav-link--next svg {
width: 60%;
}
/* Header with month name */
.tribe-events-widget-events-month .tribe-events-header {
padding-bottom: 0 !important;
}
.tribe-events-widget-events-month .tribe-events-header .tribe-events-widget-header__top-bar {
background-color: #666;
color: #fff;
}
/* Header row with day names*/
.tribe-events-widget-events-month .tribe-events-calendar-month__header {
background-color: #666;
}
.tribe-events-widget-events-month .tribe-events-calendar-month .tribe-events-calendar-month__header-column-title {
color: #fff;
font-weight: bold;
}
.tribe-events-widget-events-month .tribe-events-calendar-month__header-column {
padding-bottom: 0 !important;
}
/* Day cells */
.tribe-events-widget-events-month .tribe-events-calendar-month__day {
border-radius: 0;
}
.tribe-events-widget-events-month .tribe-events-calendar-month__day-cell--mobile {
background-color: #b2b2b2;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.tribe-events-widget-events-month .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-cell--mobile {
border-width: 0;
}
/* Day cell date */
.tribe-events-widget-events-month .tribe-events-calendar-month__day-cell--mobile .tribe-events-calendar-month__day-date {
color: #fff !important;
opacity: 1;
font-size: 1em;
}
/* Day cell dot */
.tribe-events-widget-events-month .tribe-events-calendar-month__day-cell--mobile .tribe-events-calendar-month__mobile-events-icon--event {
background-color: #fff;
opacity: 1;
}
/* Days with events */
.tribe-events-widget-events-month .tribe-events-calendar-month__day--has-events .tribe-events-calendar-month__day-cell--mobile {
background-color: #666;
}
/* Past day cells */
.tribe-events-widget-events-month .tribe-events-calendar-month__day--past {
opacity: 0.35;
}
/* Other month cells*/
.tribe-events-widget-events-month .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-cell--mobile {
background-color: #f7f7f7 !important;
}
.tribe-events-widget-events-month .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-cell--mobile,
.tribe-events-widget-events-month .tribe-events-calendar-month__day-cell--mobile:focus,
.tribe-events-widget-events-month .tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected {
background-color: #21759b !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment