Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample tribe-events.css (examples of theming The Events Calendar views)
/**
* Sample CSS customizations for The Events Calendar and related plugins.
*
* Contents: 1. Tribe Bar Customizations
* 2. General Customizations for All Views
* 3. Month View Customizations
* 4. List View Customizations
* 5. Single Event Page Customizations
*
* Usage: This file can be used "as is" - simply save it as "tribe-events.css" within
* your theme's "tribe-events" directory, ie:
*
* wp-content/themes/YOUR_THEME/tribe-events/tribe-events.css
*
* However, it is not expected that you will leave it untouched. Instead, use
* this as a vehicle to learn about styling The Events Calendar: experiment, modify
* and improve to your heart's content!
*
*
* Last revised: 30 March 2015
* Target version: 3.9.1 (The Events Calendar)
*/
/**
* 1. TRIBE BAR CUSTOMIZATIONS
* ---------------------------
* These tweaks relate to the Tribe Bar, which is the default filter/search
* bar provided by The Events Calendar itself.
*/
/** Add a border to the Tribe Bar */
#tribe-events-bar {
border: 1px solid black;
}
/** Change the background colour of the Tribe Bar, view selector, etc */
#tribe-events-bar,
#tribe-bar-form,
.tribe-bar-views-inner,
#tribe-bar-views .tribe-bar-views-list .tribe-bar-views-option a,
#tribe-bar-form #tribe-bar-views .tribe-bar-views-list:hover .tribe-bar-views-option a {
background: yellow;
}
/** Style the "Find Events" button to give it rounded corners and a new colour scheme */
#tribe-bar-form .tribe-bar-submit input[type="submit"] {
background: lightyellow;
border: 2px solid black;
border-radius: 26px;
color: black;
}
/** Invert the "Find Events" button colours when a vistor hovers over it */
#tribe-bar-form .tribe-bar-submit input[type="submit"]:hover {
background: black;
color: white;
}
/** Restyle the form fields to look more like regular inputs */
#tribe-bar-form input[type="text"] {
background: lightyellow;
border: 1px solid black;
padding: 5px;
}
/**
* 2. GENERAL CUSTOMIZATIONS FOR ALL VIEWS
* ---------------------------------------
*/
/** Make the page main title appear in uppercase */
#tribe-events-content h2.tribe-events-page-title,
#tribe-events-content h2.tribe-events-single-event-title {
text-transform: uppercase;
}
/** Make pagination links visible at the top of event archive views (not just in the footer area) */
#tribe-events-header .tribe-events-sub-nav li,
#tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a {
display: inline-block;
}
/**
* 3. MONTH VIEW CUSTOMIZATIONS
* ----------------------------
*/
/** Highlight events in month/grid view belonging to a specific category
(in this case a hypothetical category with a slug of "test-category") */
#tribe-events-content .tribe-events-calendar .tribe-events-category-test-category h3 a {
color: red;
text-decoration: underline;
}
/** Hide any events included from the previous/next month */
#tribe-events-content .tribe-events-calendar td.tribe-events-othermonth > div {
display: none;
}
/** Highlight calendar cells for the first day of the week */
.tribe-events-calendar tr td:first-child {
background: orange;
}
/**
* 4. LIST VIEW CUSTOMIZATIONS
* ---------------------------
*/
/** Hide the month seperators/headers */
.tribe-events-list-separator-month {
display: none;
}
/**
* 5. SINGLE EVENT PAGE CUSTOMIZATIONS
* -----------------------------------
*/
/** Remove default grey-shading and border around single event meta areas */
.single-tribe_events .tribe-events-event-meta {
background: transparent;
border: none;
}
/** Remove the padding from the left side of meta blocks within the single event meta areas */
.tribe-events-event-meta .tribe-events-meta-group {
padding-left: 0;
}
/** Differentiate the Google Calendar export button */
.tribe-events-button, #tribe-events .tribe-events-button.tribe-events-gcal {
background: #803060;
}
/** Differentiate the iCal export button */
.tribe-events-button, #tribe-events .tribe-events-button.tribe-events-ical {
background: #907010;
}
@Petra28

This comment has been minimized.

Copy link

@Petra28 Petra28 commented Feb 8, 2016

Hi there, I am working with virtue premium - I tried to change the background color of the single event page by adding the code (.single-tribe_events .tribe-events-event-meta { background: transparent; Border: none;} ), but it didn't work. Can you help?

Thanks!

@Petra28

This comment has been minimized.

Copy link

@Petra28 Petra28 commented Feb 8, 2016

Hi again,
another question: how do I change the font colors & sizes and where does the css have to go?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment