{"id":1896505,"date":"2019-10-18T13:19:17","date_gmt":"2019-10-18T17:19:17","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/styling-events-widgets-2\/"},"modified":"2021-04-29T07:59:10","modified_gmt":"2021-04-29T11:59:10","slug":"styling-events-widgets","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/styling-events-widgets\/","title":{"rendered":"Styling Calendar Widgets"},"content":{"rendered":"

This guide outlines stylesheets and classes for styling the calendar widgets for both\u00a0The Events Calendar<\/a> (TEC) and Events Calendar Pro<\/a> (ECP). This follows the same concepts outlined in our “Customizing CSS”<\/a> guide, so please check that out if you haven’t already.<\/p>\n

\n\n\n\n\n\n\n\n\n\n
Widget<\/th>\nPlugin<\/th>\nStylesheet<\/th>\nBase Class<\/th>\n<\/tr>\n<\/thead>\n
Events List<\/td>\nTEC & ECP<\/td>\nwidget-events-list-full.css<\/code><\/td>\n.tribe-events-widget-events-list<\/code><\/td>\n<\/tr>\n
Event
\nCalendar<\/td>\n		ECP<\/td>\nwidget-shortcode-skeleton or (-full)<\/code><\/td>\n.tribe-events-widget-shortcode-events-month<\/code><\/td>\n<\/tr>\n
Events by Week<\/td>\nECP<\/td>\nwidget-shortcode-skeleton or (-full)<\/code><\/td>\n.tribe-events-widget-shortcode-events-week<\/code><\/td>\n<\/tr>\n
Featured
\nVenue<\/td>\n		ECP<\/td>\ntribe-events-pro.css<\/code><\/td>\n.tribe-events-venue-widget<\/code><\/td>\n<\/tr>\n
Countdown<\/td>\nECP<\/td>\ntribe-events-pro.css<\/code><\/td>\n.tribe-events-countdown-widget<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

As you can see, different widgets require different stylesheets to be set up within your theme if you are to successfully style them to suit your needs.<\/p>\n

We hope this post helps you to quickly get to grips with styling each of our widgets, but if you have any questions or need more specific guidance please feel free to contact the support team at our\u00a0Help
\nDesk<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

This guide outlines stylesheets and classes for styling the calendar widgets for both\u00a0The Events Calendar (TEC) and Events Calendar Pro (ECP). This follows the same concepts outlined in our “Customizing CSS” guide, so please check that out if you haven’t already. Widget Plugin Stylesheet Base Class Events List TEC & ECP widget-events-list-full.css .tribe-events-widget-events-list Event Calendar…<\/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,105],"stellar-product-taxonomy":[158],"class_list":["post-1896505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-css","tag-customizations","tag-widgets","stellar-product-taxonomy-events-calendar-pro"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS & Styling"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":105,"label":"Widgets"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"}]},"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"},{"term_id":105,"name":"Widgets","slug":"widgets","term_group":0,"term_taxonomy_id":105,"taxonomy":"post_tag","description":"","parent":0,"count":16,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896505","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=1896505"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896505\/revisions"}],"predecessor-version":[{"id":1956313,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896505\/revisions\/1956313"}],"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=1896505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896505"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}