Wordpress Plugin The Events Calendar – Changing Colors / CSS

WordPress Plugin The Events Calendar – Changing Colors / CSS

In Dashboard, click on “Plugins” and the sub-menu “Editor” In the upper-right corner, use the drop-down menu to choose “The Events Calendar” Then, on the right, in the list of files, look for: the-events-calendar/resources/events.css

Or, you can consider putting any of these classes below into Atahualpa’s HTML/CSS Inserts here: Appearance/Atahualpa Theme Options/Various Content Items – Add HTML/CSS Inserts

THE EVENTS CALENDAR PLUGIN – CALENDAR VIEW

Future Date Number Color
.tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#transparent; color:#fff; font-size:11px; font-weight:bold; }
 Date Number Background .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a {  background-color:#F5F5F5; color:#333; font-size:11px; font-weight:bold; }
Future Dates Number Color .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#F5F4B8;  color:#333; font-size:11px; font-weight:bold; }
Days Background Color .tribe-events-calendar th { width: 250px; height: 10px; background-color:#ddd; color: #333; padding:4px 0; text-align:center; text-transform:uppercase; letter-spacing:1px; }
 Current Day Background .tribe-events-calendar .daynum, .tribe-events-calendar .daynum a { background-color:#F5F4B8; color:#666; font-size:11px; font-weight:bold; }

THE EVENTS CALENDAR PLUGIN – EVENT LIST VIEW

Event Button OFF / Calendar Button OFF .tribe-events-calendar-buttons a.tribe-events-button-off {     background:#ddd;     color:#444; }
Event Button ON / Calendar Button ON   .tribe-events-calendar-buttons a.tribe-events-button-on {    background:#666; }
Event Title Link and Event Details Titles (Start, End, etc. on right) .events-archive .entry-title a, .tribe-events-event-meta-desc, .tribe-events-event-day { color:#333; }
Event Details .tribe-events-event-list-meta td { vertical-align:top; padding: 0 0 4px 0 !important; text-align:left; border: 0 !important;  background-color: white; }