{"id":1944841,"date":"2020-01-21T14:56:14","date_gmt":"2020-01-21T19:56:14","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1944841"},"modified":"2026-04-16T14:57:30","modified_gmt":"2026-04-16T18:57:30","slug":"customizing-css","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customizing-css\/","title":{"rendered":"Customizing CSS with The Events Calendar"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/wGMKYk69coc\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>The Events Calendar loads its own stylesheets to control the appearance of the calendar. This article covers every supported method for customizing those styles \u2014 from a quick rule in the WordPress Customizer to replacing the plugin&#8217;s stylesheets entirely \u2014 along with CSS custom properties, the container-based breakpoint system, and the CSS classes available for targeting specific views.<\/p>\n\n\n\n<p>There are three ways to add custom CSS to The Events Calendar. They differ in how persistent they are, how much flexibility they offer, and whether they survive theme updates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-the-wordpress-customizer\">Using the  WordPress Customizer<\/h2>\n\n\n\n<p>Go to <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong> in the WordPress dashboard and add your rules there. Rules are stored in the database and apply site-wide. This is the right choice for a quick one-off tweak. For larger or more complex sets of rules, the stylesheet file approach below is easier to maintain and won&#8217;t be lost if you switch themes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-add-a-custom-stylesheet-in-your-child-theme-recommended\">Add a Custom Stylesheet in Your Child Theme (Recommended)<\/h2>\n\n\n\n<p>The Events Calendar automatically loads a file named <code>tribe-events.css<\/code> from a <code>tribe-events\/<\/code> folder in your active theme, if one exists. This file loads <em>in addition to<\/em> \u2014 not instead of \u2014 the plugin&#8217;s stylesheets, so you only need to write rules for the things you want to change.<\/p>\n\n\n\n<p>\u26a0\ufe0f <strong>Always use a child theme.<\/strong> If you add this file to a parent theme it will be deleted the next time the theme updates. See <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/how-to-create-a-child-theme-and-why\/\">How to Create a Child Theme (and Why)<\/a> before proceeding.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-step-1-create-the-tribe-events-folder\">Step 1: Create the tribe-events Folder<\/h4>\n\n\n\n<p>In your child theme&#8217;s folder, create a folder called <code>tribe-events<\/code> if one doesn&#8217;t already exist:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nyour-child-theme\/\n\u2514\u2500\u2500 tribe-events\/\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/theeventscalendar.com\/knowledgebase\/wp-content\/uploads\/2019\/10\/css-override-tribe-folder.png\" alt=\"A theme folder with a tribe-events subfolder inside it\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-step-2-create-tribe-events-css\">Step 2: Create tribe-events.css<\/h4>\n\n\n\n<p>Inside that folder, create an empty file named <code>tribe-events.css<\/code>. Start blank and add only the rules you want to override.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nyour-child-theme\/\n\u2514\u2500\u2500 tribe-events\/\n    \u2514\u2500\u2500 tribe-events.css\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/theeventscalendar.com\/knowledgebase\/wp-content\/uploads\/2019\/10\/css-override-stylesheet-folder.png\" alt=\"The tribe-events folder containing a tribe-events.css file\"\/><\/figure>\n\n\n\n<p>TEC detects and loads this file automatically \u2014 no registration or enqueueing needed.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-example-changing-the-month-view-background-color\">Example: Changing the Month View Background Color<\/h4>\n\n\n\n<p>Open your browser&#8217;s developer tools (<kbd>F12<\/kbd>, or right-click and choose <strong>Inspect<\/strong>) and click on the calendar element you want to target to find its CSS class.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/theeventscalendar.com\/knowledgebase\/wp-content\/uploads\/2019\/10\/month-view-css-devtools.png\" alt=\"Chrome DevTools open alongside the calendar, showing the CSS class for the month view calendar body\"\/><\/figure>\n\n\n\n<p>Add a rule targeting that class to your <code>tribe-events.css<\/code> file:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__body {\n    background-color: #f5f6ff;\n}\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/theeventscalendar.com\/knowledgebase\/wp-content\/uploads\/2019\/10\/month-view-css-background-color.png\" alt=\"The Month View calendar with a custom light blue-grey background color applied\"\/><\/figure>\n\n\n\n<p>The same pattern applies to any element across any view.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-tips-for-finding-the-right-classes\">Tips for Finding the Right Classes<\/h4>\n\n\n\n<p>TEC&#8217;s CSS classes follow a modified <a href=\"http:\/\/getbem.com\/\">BEM<\/a> naming convention \u2014 descriptive names with a consistent structure you can often predict without opening DevTools:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__&#x5B;element]\n.tribe-events-calendar-month__&#x5B;element]--&#x5B;modifier]\n<\/pre><\/div>\n\n\n<p>The double underscore (<code>__<\/code>) separates a block from its element; the double hyphen (<code>--<\/code>) separates an element from its modifier. So <code>.tribe-events-calendar-month__calendar-event-title<\/code> targets event titles in Month View, and <code>.tribe-events-calendar-month__day--past<\/code> targets past-day cells.<\/p>\n\n\n\n<p>A few other things to know:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Specificity matters.<\/strong> If your rule isn&#8217;t taking effect, the plugin&#8217;s rule may be more specific. Try increasing your selector&#8217;s specificity, or use <code>!important<\/code> as a last resort.<\/li>\n\n\n\n<li><strong>Use DevTools to verify.<\/strong> The Styles panel shows which rules are applied and which are overridden (shown with a strikethrough).<\/li>\n\n\n\n<li><strong>The <code>.tribe-common--breakpoint-medium<\/code> prefix<\/strong> controls desktop vs. mobile styles. See the <a href=\"#h-breakpoints-and-responsive-styles\">Breakpoints<\/a> section below for a full explanation.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adding-css-directly-to-your-child-theme-s-stylesheet\">Adding CSS Directly to Your Child Theme&#8217;s Stylesheet<\/h2>\n\n\n\n<p>You can also add rules directly to your child theme&#8217;s <code>style.css<\/code> file. This is fine if you already have a child theme set up and prefer to keep all your styles in one place. As with the <code>tribe-events.css<\/code> approach, only add styles to a child theme \u2014 never to a parent theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-stylesheet-filenames-and-locations\">Stylesheet Filenames and Locations<\/h2>\n\n\n\n<p>The following table lists the correct filename and theme folder for each plugin&#8217;s stylesheet override. These files load <em>alongside<\/em> the plugin&#8217;s stylesheets, not instead of them.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Plugin<\/th><th>Stylesheet Name<\/th><th>Theme Location<\/th><\/tr><\/thead><tbody><tr><td>The Events Calendar<\/td><td><code>tribe-events.css<\/code><\/td><td><code>\/tribe-events<\/code><\/td><\/tr><tr><td>Events Calendar Pro<\/td><td><code>tribe-events-pro.css<\/code><\/td><td><code>\/tribe-events\/pro<\/code><\/td><\/tr><tr><td>Calendar Widget<\/td><td><code>widget-calendar.css<\/code><\/td><td><code>\/tribe-events\/pro<\/code><\/td><\/tr><tr><td>Event Tickets<\/td><td><code>tickets.css<\/code><\/td><td><code>\/tribe-events\/tickets<\/code><\/td><\/tr><tr><td>Community Events<\/td><td><code>tribe-events-community.css<\/code><\/td><td><code>\/tribe-events\/community<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>TEC also offers two built-in stylesheet levels to choose from under <strong>Events \u2192 Settings \u2192 Display<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Skeleton Styles<\/strong> \u2014 only the CSS needed for complex layouts like calendar and week view grids<\/li>\n\n\n\n<li><strong>Tribe Events Styles<\/strong> \u2014 more detailed layouts, relying more heavily on plugin styles<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-replacing-default-stylesheets-entirely\">Replacing Default Stylesheets Entirely<\/h2>\n\n\n\n<p>If you want to replace TEC&#8217;s stylesheets rather than add to them, use <code>wp_deregister_style()<\/code> rather than <code>wp_dequeue_style()<\/code>. TEC registers stylesheets before enqueueing them, so <code>wp_dequeue_style()<\/code> only works some of the time. The following snippet disables the main built-in styles for The Events Calendar and Events Calendar Pro:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction deregister_tribe_styles() {\n    wp_deregister_style( 'tribe-events-pro-views-v2-skeleton' );\n    wp_deregister_style( 'tribe-events-pro-views-v2-full' );\n    wp_deregister_style( 'tribe-events-views-v2-skeleton' );\n    wp_deregister_style( 'tribe-events-views-v2-full' );\n    wp_deregister_style( 'tribe-common-skeleton-style' );\n    wp_deregister_style( 'tribe-common-full-style' );\n}\nadd_action( 'wp_enqueue_scripts', 'deregister_tribe_styles', 1 );\n<\/pre><\/div>\n\n\n<p>After deregistering, use <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\"><code>wp_enqueue_style()<\/code><\/a> in a separate function to load your own styles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-css-custom-properties\">CSS Custom Properties<\/h2>\n\n\n\n<p>The Events Calendar styles elements with CSS, and those stylesheets are loaded in a particular order. Because CSS cares about ordering, styles later in the load order carry greater weight. TEC loads its stylesheets <em>after<\/em> theme stylesheets where possible to prevent conflicts \u2014 but in cases where that isn&#8217;t possible, CSS custom properties (also known as CSS variables) provide an additional tool for overriding styles cleanly.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/07\/css-stack.png\" alt=\"Diagram showing the CSS load order with multiple stylesheets stacked on top of each other\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-what-are-css-custom-properties\">What Are CSS Custom Properties?<\/h4>\n\n\n\n<p>A custom property defines a variable and assigns a value to it:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n--tec-color-accent-primary: #334aff;\n<\/pre><\/div>\n\n\n<p>That variable can then be referenced anywhere in the CSS:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-common .tribe-common-c-svgicon {\n    color: var(--tec-color-accent-primary);\n}\n<\/pre><\/div>\n\n\n<p>This is equivalent to:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-common .tribe-common-c-svgicon {\n    color: #334aff;\n}\n<\/pre><\/div>\n\n\n<p>The difference is that when the variable&#8217;s value changes, that change propagates everywhere the variable is used \u2014 no need to hunt down individual selectors.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-how-to-use-them\">How to Use Them<\/h4>\n\n\n\n<p>Instead of targeting a specific CSS class and overriding its color value, you can redefine the custom property on the document <code>:root<\/code> element. This changes the value everywhere it&#8217;s used across the entire calendar:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n:root {\n    --tec-color-accent-primary: #f00;\n}\n<\/pre><\/div>\n\n\n<p>Add this to your <code>tribe-events.css<\/code> file or the Customizer&#8217;s Additional CSS panel.<\/p>\n\n\n\n<p>\ud83d\udca1 Custom property styles only load on event pages. If you plan to reference a TEC custom property on a non-event page \u2014 for example, for a custom element in a sidebar \u2014 be aware the variable may not be defined there.<sup><a href=\"#fn-custom-props\">1<\/a><\/sup><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-why-tec-uses-custom-properties\">Why TEC Uses Custom Properties<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>As a site owner<\/strong> \u2014 add a small amount of CSS to change TEC styles across the entire site, or target a specific instance.<\/li>\n\n\n\n<li><strong>As a theme creator<\/strong> \u2014 bundle styles that affect TEC to match your theme, without hardcoding selectors.<\/li>\n\n\n\n<li><strong>As a plugin author<\/strong> \u2014 override the base styles or incorporate them into your plugin in either direction.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-example-change-the-primary-button-color\">Example: Change the Primary Button Color<\/h4>\n\n\n\n<p>To style a custom button to match TEC&#8217;s button color, reference the custom property rather than hardcoding the hex value:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.my-button {\n    background-color: var(--tec-color-button-primary);\n}\n<\/pre><\/div>\n\n\n<p>To change the color value itself for all TEC buttons at once:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n:root {\n    --tec-color-button-primary: #f8a100;\n}\n<\/pre><\/div>\n\n\n<p>Or use the <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\">WordPress Customizer settings<\/a> to change it without code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-example-override-a-custom-property-on-a-single-instance\">Example: Override a Custom Property on a Single Instance<\/h4>\n\n\n\n<p>Custom properties can be applied as inline styles on a specific HTML element, scoping the change to just that instance while leaving all other uses of the variable unchanged:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;button class=&quot;tribe-common-c-btn&quot; name=&quot;custom-button&quot; style=&quot;--tec-color-button-primary:red&quot;&gt;My Custom Button&amp;lt;\/button&gt;\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/calendar-footer-export-button-custom-edited.png\" alt=\"A custom button in the calendar footer with a red background, while the adjacent Export Events button remains blue\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-example-changing-a-custom-property-with-javascript\">Example: Changing a Custom Property with JavaScript<\/h4>\n\n\n\n<p>Custom properties can be updated by JavaScript at runtime. The following example listens for a click on a TEC button and swaps its color property on click:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ndocument.addEventListener(\n    &#039;click&#039;,\n    event =&gt; {\n        if ( ! event.target.matches( &#039;.tribe-common-c-btn&#039; ) ) { return; }\n        event.target.style.setProperty( &#039;--tec-color-button-primary&#039;, &#039;red&#039; );\n    },\n    false\n);\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-footnotes\">Footnotes<\/h4>\n\n\n\n<p id=\"fn-custom-props\"><sup>1<\/sup> TEC&#8217;s custom property styling doesn&#8217;t load on non-event pages. If you&#8217;re working with a custom element you plan to use outside event pages, avoid relying on a TEC custom property as it may not be defined in that context.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-breakpoints-and-responsive-styles\">Breakpoints and Responsive Styles<\/h2>\n\n\n\n<p>TEC uses <strong>container-based breakpoints<\/strong> rather than traditional viewport media queries. This means responsiveness is determined by the width of the container the calendar is rendered in, not the width of the browser window. This allows the calendar to display correctly whether it&#8217;s on a full-width page, in a narrow sidebar widget, or embedded via shortcode.<\/p>\n\n\n\n<p>Breakpoints are applied as CSS classes on the calendar container rather than via <code>@media<\/code> queries. The pattern looks like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-common--breakpoint-medium.tribe-events .myclass {\n    display: none;\n}\n<\/pre><\/div>\n\n\n<p>That rule applies when the calendar container is at the medium breakpoint (768px) or wider. Rules <em>without<\/em> a breakpoint prefix apply at all sizes including mobile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-default-breakpoints\">Default Breakpoints<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Breakpoint name<\/th><th>Width (px)<\/th><th>CSS class prefix<\/th><\/tr><\/thead><tbody><tr><td>Extra small<\/td><td>500<\/td><td><code>.tribe-common--breakpoint-xsmall<\/code><\/td><\/tr><tr><td>Medium<\/td><td>768<\/td><td><code>.tribe-common--breakpoint-medium<\/code><\/td><\/tr><tr><td>Large<\/td><td>960<\/td><td><code>.tribe-common--breakpoint-full<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-modifying-breakpoints\">Modifying Breakpoints<\/h3>\n\n\n\n<p>To change the pixel values of existing breakpoints, use the <code>tribe_events_views_v2_view_breakpoints<\/code> filter. You don&#8217;t need to include all breakpoints \u2014 only the ones you want to change. This affects all calendar views:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nadd_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_breakpoints', 10, 2 );\n\nfunction customize_tribe_events_breakpoints( $breakpoints, $view ) {\n    $breakpoints&#x5B;'xsmall'] = 500;\n    $breakpoints&#x5B;'medium'] = 768;\n    $breakpoints&#x5B;'full']   = 960;\n\n    return $breakpoints;\n}\n<\/pre><\/div>\n\n\n<p>To modify breakpoints on only one view, use the view-specific filter instead. For example, to target List View only:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nadd_filter( 'tribe_events_views_v2_view_list_breakpoints', 'customize_tribe_events_breakpoints', 10, 2 );\n<\/pre><\/div>\n\n\n<p>Replace <code>list<\/code> with the slug of the view you want to target (<code>month<\/code>, <code>day<\/code>, <code>week<\/code>, <code>photo<\/code>, <code>map<\/code>, <code>summary<\/code>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-new-breakpoints\">Adding New Breakpoints<\/h3>\n\n\n\n<p>You can define entirely new breakpoints using the same filter. The following adds an extra-large breakpoint at 1024px:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nadd_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_breakpoints', 10, 2 );\n\nfunction customize_tribe_events_breakpoints( $breakpoints, $view ) {\n    $breakpoints&#x5B;'extra_large'] = 1024;\n\n    return $breakpoints;\n}\n<\/pre><\/div>\n\n\n<p>The new breakpoint class is then available in your CSS:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-common--breakpoint-extra_large.tribe-events .myclass {\n    display: none;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-targeting-views-with-css-classes\">Targeting Views with CSS Classes<\/h2>\n\n\n\n<p>The calendar views handle the display of calendar content, and no body classes are added to the page by default. If you need to target styles outside the calendar container itself, the following classes are available.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-body-classes\">Body Classes<\/h3>\n\n\n\n<p>All calendar archive views add the same class to the <code>&lt;body&gt;<\/code> element:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.post-type-archive-tribe_events\n<\/pre><\/div>\n\n\n<p>Single event pages add:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.single-tribe_events\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-view-container-classes\">View Container Classes<\/h3>\n\n\n\n<p>Each calendar view wraps its content in a <code>&lt;div&gt;<\/code> that shares common classes across views but also carries one class unique to that view. This container class is the recommended way to scope CSS to a specific view.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/02\/Screen-Shot-2020-02-13-at-13.26.49.png\" alt=\"The calendar container div shown in browser developer tools, highlighting the view-specific CSS class\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>View<\/th><th>CSS Class<\/th><\/tr><\/thead><tbody><tr><td>Month View<\/td><td><code>.tribe-events-view--month<\/code><\/td><\/tr><tr><td>List View<\/td><td><code>.tribe-events-view--list<\/code><\/td><\/tr><tr><td>Day View<\/td><td><code>.tribe-events-view--day<\/code><\/td><\/tr><tr><td>Week View (Pro)<\/td><td><code>.tribe-events-view--week<\/code><\/td><\/tr><tr><td>Map View (Pro)<\/td><td><code>.tribe-events-view--map<\/code><\/td><\/tr><tr><td>Photo View (Pro)<\/td><td><code>.tribe-events-view--photo<\/code><\/td><\/tr><tr><td>Summary View (Pro)<\/td><td><code>.tribe-events-view--summary<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>These can be combined with other selectors to target elements within a specific view. For example, all views render individual events as <code>&lt;article&gt;<\/code> elements with the class <code>.type-tribe_events<\/code>. To change the background color of events only in Map View:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.tribe-events-view--map .type-tribe_events {\n    background-color: #ff2052;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>The Events Calendar loads its own stylesheets to control the appearance of the calendar. This article covers every supported method for customizing those styles \u2014 from a quick rule in the WordPress Customizer to replacing the plugin&#8217;s stylesheets entirely \u2014 along with CSS custom properties, the container-based breakpoint system, and the CSS classes available for&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[116],"tags":[],"stellar-product-taxonomy":[153,155,158,161],"class_list":["post-1944841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","stellar-product-taxonomy-community-tickets","stellar-product-taxonomy-event-tickets","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS &amp; Styling"}],"stellar-product-taxonomy":[{"value":153,"label":"Community Tickets"},{"value":155,"label":"Event Tickets"},{"value":158,"label":"Events Calendar Pro"},{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS &amp; Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":19,"filter":"raw","term_order":"0","cat_ID":116,"category_count":19,"category_description":"","cat_name":"CSS &amp; Styling","category_nicename":"css-styling","category_parent":24}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1944841"}],"version-history":[{"count":6,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944841\/revisions"}],"predecessor-version":[{"id":1969264,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944841\/revisions\/1969264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1944841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1944841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1944841"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1944841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}