{"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":"2024-08-02T17:18:33","modified_gmt":"2024-08-02T21:18:33","slug":"customizing-css","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/customizing-css\/","title":{"rendered":"Customizing CSS"},"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>There are three distinct ways to customize calendar styles:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adding-custom-styles-directly-in-your-stylesheets-child-theme\">Adding custom styles directly in your stylesheets (child theme)<\/h2>\n\n\n\n<p>This is only a good idea if you&#8217;re using a child theme. If you add custom CSS to any CSS files in your parent theme, then you will lose those changes the next time your theme updates. For more information about how to set up a child theme and why check out this <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/how-to-create-a-child-theme-and-why\/\" target=\"_blank\" rel=\"noreferrer noopener\">knowledgebase article<\/a>.<\/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>Use this by navigating to Appearance \u2192 Customize from the WordPress dashboard, then selecting the Additional CSS option.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about our other customizer settings<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/evnt.is\/1b9x\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/banner-ad-tec-demo-form.png\" alt=\"Demo Site banner ad\" class=\"wp-image-1953376\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-overwriting-css-files\">Overwriting CSS files<\/h2>\n\n\n\n<p>It&#8217;s possible to override the calendar&#8217;s stylesheets with your own custom versions the same way you would <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/customizing-template-files-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">override the calendar&#8217;s other template files<\/a>. In other words, you still make a copy of the file, add a <code>tribe<\/code>&nbsp;folder in your child theme directory, then drop the copied file in that folder to start customizing.<\/p>\n\n\n\n<p>The difference between overriding calendar templates and calendar stylesheets is that your custom stylesheet will load&nbsp;<em>in addition<\/em> to the plugin&#8217;s stylesheets. Put differently, it overrides the styles but doesn&#8217;t fully replace the original file. This means that you don&#8217;t need to copy all the CSS code from the original CSS file and paste it into the template override. You can simply create a blank CSS template and add your custom CSS. <\/p>\n\n\n\n<p>The Events Calendar offers 2 default stylesheet options to choose from:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Skeleton Styles <\/strong>&#8211; Includes only enough CSS to achieve complex layouts like calendar and week view<\/li><li><strong>Tribe Event Styles<\/strong> &#8211; More detailed layouts, relying heavily on the plugin styles.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-stylesheets-reference\">Stylesheets reference<\/h2>\n\n\n\n<p>The following is an outline of what to name and where to put your custom stylesheets for each plugin and add-on.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><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<h2 class=\"css-structure wp-block-heading\" id=\"h-class-naming-and-css-structure\">Class naming and CSS structure<\/h2>\n\n\n\n<p>One of the many good things about the CSS styles and structure we introduced in the upgraded views is that we\u2019re using <a href=\"http:\/\/getbem.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"BEM (opens in a new tab)\">BEM<\/a>. It stands for \u201cBlock Element Modifier\u201d, and is a naming styling that provides a better structure for the CSS code and scalable CSS. In the large list of pros, we can find that most of the HTML elements should contain a pretty unique CSS class. This will make it super easy when it comes to customizing styles!<\/p>\n\n\n\n<p>Another good thing to know is that the new views are contained by a wrapper that works flawlessly to target the styles within each view.<\/p>\n\n\n\n<p>The Events Calendar views are wrapped in a container that has the following class: <code>.tribe-events<\/code><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"The entire implementation is described in our developer docs. (opens in a new tab)\" href=\"https:\/\/github.com\/moderntribe\/the-events-calendar\/blob\/master\/src\/resources\/postcss\/README.md\" target=\"_blank\">The entire implementation is described in our developer docs<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-replacing-default-stylesheets\">Replacing Default Stylesheets<\/h2>\n\n\n\n<p>If you&#8217;d like to replace the default stylesheets offered by The Events Calendar, you can simply use WordPress&#8217; built-in functions for enqueuing and deregistering stylesheets: <code>wp_enqueue_style()<\/code> and <code>wp_deregister_style()<\/code>, respectively.<\/p>\n\n\n\n<p>You&#8217;ll want to use <code>wp_deregister_style()<\/code> as opposed to <code>wp_de<em>queue<\/em>_style()<\/code> here, because The Events Calendar and its add-ons register stylesheets and scripts first before later enqueueing them. This comes with many benefits, but it means that <code>wp_dequeue_style()<\/code> will only work some of the time.<\/p>\n\n\n\n<p><strong>An example of this approach in action<\/strong> is as follows\u2014put the following snippet in your theme&#8217;s functions.php file to disable most of The Events Calendar&#8217;s and Events Calendar Pro&#8217;s main built-in styles:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php\nfunction deregister_tribe_styles() {\n    wp_deregister_style( &#039;tribe-events-pro-views-v2-skeleton&#039; );\n    wp_deregister_style( &#039;tribe-events-pro-views-v2-full&#039; );\n    wp_deregister_style( &#039;tribe-events-views-v2-skeleton&#039; );\n    wp_deregister_style( &#039;tribe-events-views-v2-full&#039; );\n    wp_deregister_style( &#039;tribe-common-skeleton-style&#039; );\n    wp_deregister_style( &#039;tribe-common-full-style&#039; );\n}\nadd_action( &#039;wp_enqueue_scripts&#039;, &#039;deregister_tribe_styles&#039;, 1 );\n<\/pre><\/div>\n\n\n<p>You can then use <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>wp_enqueue_style()<\/code><\/a> in a separate function to load all of your own styles.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are three distinct ways to customize calendar styles: Adding custom styles directly in your stylesheets (child theme) This is only a good idea if you&#8217;re using a child theme. If you add custom CSS to any CSS files in your parent theme, then you will lose those changes the next time your theme updates&#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":[12],"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","tag-5-x-calendar-views","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"}],"post_tag":[{"value":12,"label":"5.x calendar views"}],"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:\/\/staging.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":33,"filter":"raw","term_order":"0","cat_ID":116,"category_count":33,"category_description":"","cat_name":"CSS &amp; Styling","category_nicename":"css-styling","category_parent":24}],"tag_info":[{"term_id":12,"name":"5.x calendar views","slug":"5-x-calendar-views","term_group":0,"term_taxonomy_id":12,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944841","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1944841"}],"version-history":[{"count":2,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944841\/revisions"}],"predecessor-version":[{"id":1962261,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1944841\/revisions\/1962261"}],"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=1944841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1944841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1944841"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1944841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}