Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Widgets / Styling The Events Calendar plugin
Duplicate Snippet

Embed Snippet on Your Site

Styling The Events Calendar plugin

Use this to restyle The Events Calendar plugin. There's lots going on here, but all of the selectors are present and accounted for. Dig in!

John Foliot
<10
Code Preview
Comments
css
/* --- Calendar Styles --- */
/* --- Global / Base Styles for Tribe Events Plugin --- */
/* Overall Event List Widget Container */
div.tribe-events-widget-events-list {
  margin-top: -2rem; /* Negative top margin to pull the widget upwards */
  color: white; /* Default text color for the widget content */
}
/* Text Colors for Common Headings */
.tribe-common .tribe-common-h6 { /* h6 headings within tribe-common class */
  color: white !important; /* Force white color */
  font-size: 22px !important; /* Force font size */
  font-family: "industry-test" !important; /* Force custom font */
}
.tribe-common-h7 { /* General h7 headings */
  font-size: 160% !important; /* Force larger font size */
}
.tribe-common .tribe-common-h4--min-medium { /* h4 headings within tribe-common class */
  color: white; /* Set text color to white */
}
.tribe-common .tribe-common-h--alt { /* Alternative heading style */
  font-size: 105%; /* Slightly larger font size */
  margin-top: 0.1rem; /* Small top margin */
}
/* Specific Date & Time Elements in Widget */
.tribe-events-widget-events-list__event-date-tag-month {
  color: white !important; /* Force white color for the month tag */
}
.tribe-events-widget-events-list__event-datetime,
.tribe-events-widget-events-list__event-datetime-wrapper {
  color: #6a6a6a !important; /* Ensure datetime text and its wrapper are gray */
}
/* --- Event Header & Title Links in Widget --- */
/* Event Header Container in Widget */
.tribe-events-widget-events-list__event-header {
  color: white !important; /* Make all text within the event header white */
}
/* Event Title Link Styling in Widget (Default, Focus, Hover) */
/* Applies to the link itself and the day number on all screen sizes */
h3.tribe-events-widget-events-list__event-title a.tribe-events-widget-events-list__event-title-link,
.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-daynum {
  color: white !important; /* Default color for title link and day number */
}
.tribe-events-widget-events-list__event-title-link {
  text-decoration: underline; /* Underline the event title link */
}
.tribe-events-widget-events-list__event-title-link:focus,
.tribe-events-widget-events-list__event-title-link:hover {
  color: #6a6a6a !important; /* Change link color to gray on focus/hover */
}
/* Ensure the parent title text is also white in Widget */
.tribe-events-widget-events-list__event-title {
  color: white !important;
}
/* --- "View More" / "View Calendar" Link Styles in Widget --- */
/* "View More" container and link */
.tribe-events-widget-events-list__view-more,
.tribe-events-widget-events-list__view-more-link {
  color: #6a6a6a !important; /* Text color for "View Calendar" section */
  margin-left: 4.5rem !important; /* Left margin for alignment */
  font-size: 80%; /* Smaller font size */
  margin-top: -0.1rem !important; /* Negative top margin for positioning */
}
/* "View More" link on focus/hover */
.tribe-events-widget-events-list__view-more-link:focus,
.tribe-events-widget-events-list__view-more-link:hover {
  color: #800000 !important; /* Change link color to maroon on focus/hover */
  text-decoration: none !important; /* Remove underline on focus/hover */
  margin-left: 4.5rem;
  font-size: 80%;
  margin-top: -0.1rem;
}
/* --- Calendar Grid Specific Styles --- */
/* Border and background for the last event in a month view */
.tribe-events .tribe-events-calendar-month__calendar-event:last-child {
  border: 2px solid #800000; /* Maroon border */
  background-color: white; /* White background */
}
/* Active day/month background in calendar picker */
td.active.day,
span.month.focused.active {
  background: #800000 !important; /* Force maroon background for active/focused dates */
}
/* --- Buttons with Maroon Theme --- */
.tribe-events .tribe-events-c-search__button,
.tribe-events button.tribe-events-c-search__button,
.tribe-common button {
  background-color: #800000; /* Maroon background */
  color: white; /* White text on maroon background */
  border: 1px solid white; /* White border */
  padding: 0.3rem; /* Padding for buttons (from Misc cleanup) */
}
/* Bordered Buttons/Links with Maroon Theme */
.tribe-common .tribe-common-c-btn-border,
.tribe-common a.tribe-common-c-btn-border {
  border: 2px solid #800000; /* Maroon border */
  color: #800000; /* Maroon text (original) */
  background-color: #800000; /* Maroon background (from previous cleanup) */
  color: #fff; /* White text (from previous cleanup) */
  border-radius: 5px; /* Rounded corners */
  padding: 0.3rem; /* Padding for bordered buttons/links (from Misc cleanup) */
}
/* Navigation Buttons (Next/Prev) */
button.tribe-events.tribe-events-c-nav__next,
button.tribe-events.tribe-events-c-nav__prev,
a.tribe-events-c-nav__next.tribe-common-b2,
a.tribe-events-c-nav__prev.tribe-common-b2,
button.tribe-events-c-nav__next.tribe-common-b2,
button.tribe-events-c-nav__prev.tribe-common-b2,
button.tribe-events-c-nav__next.tribe-common-b2.tribe-common-b1--min-medium,
a.tribe-events-c-nav__next.tribe-common-b2.tribe-common-b1--min-medium {
  color: #fff; /* White text on navigation buttons */
  background: #800000; /* Maroon background */
  padding: 0.3rem; /* Padding for navigation buttons */
  border-radius: 3px; /* Rounded corners for navigation buttons */
  border: none; /* Remove default button border */
}
/* --- Links with Maroon Theme --- */
a.tribe-events-gmap {
  color: #800000; /* Maroon text color for gmap link */
  background: #f1f1f1; /* Light gray background (from Misc cleanup) */
  font-size: 130%; /* Larger font size (from Misc cleanup) */
  font-weight: bold; /* Bold text (from Misc cleanup) */
  border: 0; /* No border (from Misc cleanup) */
}
.gm-style .place-card div,
.gm-style .place-card a,
.gm-style .default-card div,
.gm-style .default-card a {
  color: #800000 !important; /* Maroon text color for Google Maps info cards */
  background: #f1f1f1 !important; /* Light gray background (from Misc cleanup) */
  font-size: 130% !important; /* Larger font size (from Misc cleanup) */
  font-weight: bold !important; /* Bold text (from Misc cleanup) */
  border: 0 !important; /* No border (from Misc cleanup) */
}
button.tribe-common-c-btn__clear.tribe-common-h3.tribe-common-h--alt.tribe-events-c-top-bar__datepicker-button {
  color: #800000 !important; /* Maroon text color for datepicker button */
  background: #f1f1f1; /* Light gray background */
  border: none; /* No border */
  font-size: 150%; /* Larger font size */
  font-weight: bold; /* Bold text */
}
/* --- Top Bar Navigation (Hiding Elements) --- */
.tribe-events .tribe-events-c-top-bar__nav-list-item > *,
a.tribe-common-c-btn-icon.tribe-common-c-btn-icon--caret-right.tribe-events-c-top-bar__nav-link.tribe-events-c-top-bar__nav-link--next {
  display: none; /* Hide specific navigation elements */
}
/* --- Other Specific Styles --- */
/* Date/Time tag in list view */
time.tribe-events-calendar-list__event-date-tag-datetime {
  background-color: #800000; /* Maroon background */
  color: #fff; /* White text */
  border-radius: 3px; /* Rounded corners */
  margin-right: 0.5rem; /* Right margin */
}
/* View selector background */
div#tribe-events-view-selector-content {
  background: #f1f1f1 !important; /* Force light gray background for the view selector */
}
/* Search button margin on medium screens */
.tribe-common--breakpoint-medium.tribe-events .tribe-common-c-btn.tribe-events-c-search__button {
  margin-left: 1rem; /* Left margin for search button */
  border-radius: 5px; /* Rounded corners for search button */
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet