{"id":1896546,"date":"2019-10-18T13:19:25","date_gmt":"2019-10-18T17:19:25","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/basic-font-and-color-changes-with-css\/"},"modified":"2022-06-15T06:45:19","modified_gmt":"2022-06-15T10:45:19","slug":"basic-font-and-color-changes-with-css","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/basic-font-and-color-changes-with-css\/","title":{"rendered":"Custom CSS Example"},"content":{"rendered":"\n

The Events Calendar offers a few ways to customize the calendar’s CSS. One of the options is creating your own stylesheet to override the plugin’s stylesheet. This process is outlined in the “Customizing CSS”<\/a> guide, which is worth checking out before proceeding.<\/p>\n\n\n\n

Let’s look at an example of creating a custom stylesheet to override the calendar’s default styles. Say you want to change the background color of month view so it’s not so… white.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Create a new folder in your theme<\/h2>\n\n\n\n

Like template overrides, custom calendar stylesheets go into a folder in your WordPress theme called tribe-events<\/code>. Add that folder if it isn’t there already.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Create a new CSS file in that folder<\/h2>\n\n\n\n

You could copy the original CSS file located in the plugin, but again, there’s no reason to do that since your custom stylesheet is loaded in addition to the plugin’s stylesheets rather than replacing them.<\/p>\n\n\n\n

Go ahead and create a new file in the tribe-events<\/code> folder in your theme called tribe-events.css<\/code>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Add your custom styles<\/h2>\n\n\n\n

That’s right, time to code! Let’s break open DevTools to see how we can change the calendar’s background.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Looks like we have the class we’re looking for: .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__body<\/code><\/p>\n\n\n\n

Phew, that’s a long class name! No matter, though. We can drop it into our tribe-events.css<\/code> file and add our background style. Perhaps a light shade of blue will look nice without washing out the calendar content.<\/p>\n\n\n\n

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__body {\n    background-color: #f5f6ff;\n}<\/pre><\/pre>\n\n\n\n
Let’s save the file and check out the results:<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
Oh hey, that’s pretty nice! Although this is a fairly simple example, customizing any of the calendar’s styles with your own stylesheet follows this same pattern.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Events Calendar offers a few ways to customize the calendar’s CSS. One of the options is creating your own stylesheet to override the plugin’s stylesheet. This process is outlined in the “Customizing CSS” guide, which is worth checking out before proceeding. Let’s look at an example of creating a custom stylesheet to override the…<\/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":[23,25],"stellar-product-taxonomy":[161],"class_list":["post-1896546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-css","tag-customizations","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS & Styling"}],"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}],"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\/1896546","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=1896546"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896546\/revisions"}],"predecessor-version":[{"id":1956270,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896546\/revisions\/1956270"}],"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=1896546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896546"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}