The Events Calendar plugin – Tribe Events Styles and Full Styles combined

I recently installed the The Events Calendar plugin for WordPress and was thrilled to find three different Display options for the calendar (nav bar Events->Settings->Display) — Tribe Events Styles, Full Styles and Skeleton Styles.

Using the Spacious theme template, I found that I liked the Full Styles best for the Events page, but preferred the Tribe Events Styles for the individual events. So how to get both?

Fortunately, the Spacious theme comes with a custom CSS option making it very easy to drop in the needed code from the Tribe Events Styles to make the changes I wanted on the Full Styles display. Here’s my mod:

#tribe-events-header .tribe-events-sub-nav { display: none }
#tribe-events .tribe-events-button {
background-color: #21759b;
color: #fff;
background-image: none;
font-size: 11px;
font-weight: bold;
padding: 6px 9px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 0;
line-height: normal;
cursor: pointer;
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: none;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
}
.tribe-events-button.tribe-active {
background-color: #21759b;
color: #fff;
}
.tribe-events-button.tribe-inactive,
.tribe-events-button:hover,
#tribe-events .tribe-events-button:hover,
.tribe-events-button.tribe-active:hover {
background-color: #21759b;
color: #fff;
text-decoration: none;
}
.tribe-events-list .tribe-events-venue-details {
line-height: 1.2;
margin: 0;
display: block;
font-weight: normal;
}

Leave a Reply

Your email address will not be published. Required fields are marked *