{"id":1965832,"date":"2025-07-10T07:59:04","date_gmt":"2025-07-10T11:59:04","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1965832"},"modified":"2025-07-10T07:59:05","modified_gmt":"2025-07-10T11:59:05","slug":"styling-the-events-calendar-in-avada","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/styling-the-events-calendar-in-avada\/","title":{"rendered":"Styling The Events Calendar in Avada"},"content":{"rendered":"\n<p>Avada includes built-in support for <strong>The Events Calendar<\/strong>, offering a powerful and unified experience. The integration allows you to display calendars and event listings with Avada-specific styling and builder elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setup-steps\">Setup Steps<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install and activate Avada theme and Avada Builder.<\/li>\n\n\n\n<li>Install and activate The Events Calendar.<\/li>\n\n\n\n<li>In any Avada layout (e.g., using Fusion Builder), add the <strong>Events Element<\/strong>. Review <a href=\"https:\/\/avada.com\/documentation\/how-to-create-a-single-event-layout-section-in-avada\/\">Avada documentation<\/a> for all available elements.<br><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-limitations-amp-workarounds\">Limitations &amp; Workarounds<\/h2>\n\n\n\n<p>Avada may force The Events Calendar into its column\/sidebars which aren&#8217;t always flexible. Some users recommend custom CSS or overriding layouts to match your vision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-custom-styling-beyond-builder-defaults\">Custom Styling Beyond Builder Defaults<\/h2>\n\n\n\n<p>Whether you&#8217;re using builder modules or default TEC pages, fine-tune appearance with CSS. For example:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.avada .tribe-events-calendar td.tribe-events-today {\n  background-color: #f0f8ff;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-recommendations\">Recommendations<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Maintain Plugins<\/strong>: Ensure compatibility between The Events Calendar and Avada versions.<\/li>\n\n\n\n<li><strong>Test Responsively<\/strong>: Check mobile layouts\u2014builders often have unique mobile settings.<\/li>\n\n\n\n<li><strong>Cache &amp; Performance<\/strong>: Additional modules and styles can increase load time\u2014minimize assets where possible.<\/li>\n\n\n\n<li><strong>CSS &amp; JS Compilers:<\/strong> <a href=\"https:\/\/avada.com\/documentation\/css-compiler\/\" rel=\"nofollow\">The CSS and JS compiler<\/a> under<strong> Avada> Options > Performance tab<\/strong> are tools for optimizing the CSS and JS that are dynamically generated from the various option settings on your site.\u00a0In some cases, the selected method can conflict with The Events Calendar styling.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avada includes built-in support for The Events Calendar, offering a powerful and unified experience. The integration allows you to display calendars and event listings with Avada-specific styling and builder elements. Setup Steps Limitations &amp; Workarounds Avada may force The Events Calendar into its column\/sidebars which aren&#8217;t always flexible. Some users recommend custom CSS or overriding&#8230;<\/p>\n","protected":false},"author":60,"featured_media":1955565,"comment_status":"open","ping_status":"open","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":[46,84],"tags":[47,239],"stellar-product-taxonomy":[161],"class_list":["post-1965832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","category-theming-overview","tag-integrations","tag-theme","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"},{"value":84,"label":"Templating &amp; Layout"}],"post_tag":[{"value":47,"label":"Integrations"},{"value":239,"label":"Theme"}],"stellar-product-taxonomy":[{"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":"Atousa","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/atousa\/"},"comment_info":0,"category_info":[{"term_id":46,"name":"Integrations","slug":"integrations","term_group":0,"term_taxonomy_id":46,"taxonomy":"category","description":"","parent":0,"count":115,"filter":"raw","term_order":"0","cat_ID":46,"category_count":115,"category_description":"","cat_name":"Integrations","category_nicename":"integrations","category_parent":0},{"term_id":84,"name":"Templating &amp; Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating &amp; Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":47,"name":"Integrations","slug":"integrations","term_group":0,"term_taxonomy_id":47,"taxonomy":"post_tag","description":"","parent":0,"count":23,"filter":"raw","term_order":"0"},{"term_id":239,"name":"Theme","slug":"theme","term_group":0,"term_taxonomy_id":239,"taxonomy":"post_tag","description":"","parent":0,"count":11,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1965832"}],"version-history":[{"count":4,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965832\/revisions"}],"predecessor-version":[{"id":1965988,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965832\/revisions\/1965988"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1965832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1965832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1965832"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1965832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}