![\"\"](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/07\/css-stack.png\")
\nIf the calendar’s stylesheets are loaded before the theme’s stylesheets and the styles conflict with each other, it’s still possible to load styles after<\/em> ours, allowing you to fix those conflicts.<\/p>\n\n\n\n As part of our effort to prevent style conflicts with themes, The Events Calendar uses CSS custom properties (also known as CSS variables).<\/p>\n\n\n\n Custom properties allow us to define a variable and assign a value to it:<\/p>\n\n\n If the value of the variable updates, then that change is applied everywhere the variable is used in the CSS. Now we can use that variable anywhere we’d like, just as if it was a regular CSS property value:<\/p>\n\n\n This is the same as writing:<\/p>\n\n\n The difference is that the custom property gives us flexibility to change values across the board without any additional development.<\/p>\n\n\n\n If you are already overriding the calendar’s CSS with your own styles<\/a>, it probably looks something close to this:<\/p>\n\n\n Adding that snippet to the Additional CSS panel in the WordPress Customizer<\/a> overrides the plugin’s style with the custom property property value.<\/p>\n\n\n\n Custom properties provide us with a more straightforward way to change that color value. Instead of locating the CSS class you want to update, then updating the color directly on the class, it’s possible to re-define the custom property value on the document Now, the value of the Let’s look at a few examples that use CSS custom properties to override The Events Calendar plugin styles.<\/p>\n\n\n\n Let’s say you want to add a button to an event page2<\/a><\/sup>, and you want it to use the same color as The Events Calendar buttons ( Re-load the page and the plugin’s custom property will change the background color of the button to the same blue used throughout The Events Calendar.<\/p>\n\n\n\n And if you want to change the color value of the custom property, then you could do that either by:<\/p>\n\n\n\n Let’s say you’ve created a button you are injecting next to the calendar export button in the calendar footer, and you want it to be styled just like the other buttons in The Events Calendar.<\/p>\n\n\n\n You could put the same CSS class on the button in your HTML:<\/p>\n\n\n But let’s say we want that custom button to be red instead of blue. We open up the calendar template file<\/a> in a code editor and add an inline style to the button HTML:<\/p>\n\n\n That’s right, we can use CSS custom properties directly in the HTML as an inline style, and still reassign the value of it. This way, the custom property is changed just on this one instance and all other buttons remain blue.<\/p>\n\n\n\n One of the benefits of custom properties is that they can be changed by JavaScript running on the page. Let’s look at a somewhat silly example, but one that shows off the power of custom properties.<\/p>\n\n\n\n Let’s say we are using the exact same HTML as the previous example, just without inline styles. We can use JavaScript to listen for that button to be clicked, then swap the custom property value with another value on that click:<\/p>\n\n\n The Events Calendar styles elements with CSS, and those stylesheets are loaded in a particular order. Because CSS cares about how things are ordered, styles later in the order have greater weight. We do our best to load our stylesheets after the theme stylesheets. This way, the plugin’s styles are prioritized, preventing possible conflicts with…<\/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,24],"tags":[23,25],"stellar-product-taxonomy":[161],"class_list":["post-1950422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","category-customizing","tag-css","tag-customizations","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS & Styling"},{"value":24,"label":"Customizations"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"}],"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":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS & 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 & Styling","category_nicename":"css-styling","category_parent":24},{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":110,"filter":"raw","term_order":"0","cat_ID":24,"category_count":110,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":48,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1950422","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=1950422"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1950422\/revisions"}],"predecessor-version":[{"id":1955926,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1950422\/revisions\/1955926"}],"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=1950422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1950422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1950422"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1950422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What are CSS custom properties?<\/h2>\n\n\n\n
\n--tec-color-accent-primary: #334aff;\n<\/pre><\/div>\n\n\n
\n.tribe-common .tribe-common-c-svgicon {\n color: var(--tec-color-accent-primary);\n}\n<\/pre><\/div>\n\n\n\n.tribe-common .tribe-common-c-svgicon {\n color: #334aff;\n}\n<\/pre><\/div>\n\n\nUsing CSS custom properties<\/h2>\n\n\n\n
\n.tribe-common .tribe-common-c-svgicon {\n color: #000;\n}\n<\/pre><\/div>\n\n\n:root<\/code> element1<\/a><\/sup> instead.<\/p>\n\n\n\n:root { --tec-color-accent-primary: #f00; }\n<\/pre><\/div>\n\n\n--tec-color-accent-primary<\/code> custom variable is #f00<\/code> instead of #334aff<\/code>.<\/p>\n\n\n\nWhy we use CSS custom properties<\/h2>\n\n\n\n
\n
Examples<\/h2>\n\n\n\n
Change the primary button color<\/h3>\n\n\n\n
#334aff<\/code>). So you add some custom CSS for your button in the Additional CSS panel of the WordPress Customizer, and in it, you set the background color:<\/p>\n\n\n\n.button-class-name {\n background-color: var(--tec-color-button-primary);\n}\n<\/pre><\/div>\n\n\n\n
\n:root {\n --tec-color-button-primary: #f8a100;\n}\n<\/pre><\/div>\n\n\nUsing the calendar’s custom properties to style a custom element<\/h3>\n\n\n\n
![\"Showing](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/calendar-footer-export-button-custom.png\")
<\/figure>\n\n\n\n\n<button class="tribe-common-c-btn" name="custom-button">My Custom Button<\/button>\n<\/pre><\/div>\n\n\n
\n<button class="tribe-common-c-btn" name="custom-button" style="--tec-color-button-primary:red">My Custom Button<\/button>\n<\/pre><\/div>\n\n\n
![\"The](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/calendar-footer-export-button-custom-edited.png\")
<\/figure>\n\n\n\nChanging a custom property value with JavaScript<\/h3>\n\n\n\n
\ndocument.addEventListener(\n 'click',\n event => {\n \/\/ If the clicked element doesn't have the right selector, bail\n if ( ! event.target.matches(".tribe-common-c-btn" ) ) { return; }\n\n event.target.style.setProperty( '--tec-color-button-primary', 'red' );\n\n },\n false\n);\n<\/pre><\/div>\n\n\nFootnotes<\/h2>\n\n\n\n
\n
:root<\/code> is the highest level in HTML. Assigning custom properties to the :root<\/code> ensures that they are available and applied everywhere. \u2b91<\/a><\/li>\n