{"id":1945704,"date":"2020-02-18T15:10:38","date_gmt":"2020-02-18T20:10:38","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1945704"},"modified":"2022-06-06T08:44:45","modified_gmt":"2022-06-06T12:44:45","slug":"wordpress-customizer-2","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wordpress-customizer-2\/","title":{"rendered":"WordPress Customizer for Calendar Views"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/xqTX7e0mbq0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>The Events Calendar supports the WordPress Customizer, located at <code>Appearance<\/code> \u2192 <code>Customize<\/code> from the WordPress dashboard. This is an excellent way to make styling changes to the calendar directly in WordPress without touching code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Locating the WordPress Customizer<\/h2>\n\n\n\n<p>The WordPress Customizer is part of&nbsp;the&nbsp;<code>Appearance<\/code> \u2192&nbsp;<code>Customize<\/code> screen&nbsp;in the WordPress admin. The easiest way to access the Customizer, though, is to simply navigate to the event page that you wish to customize, and then click \u201cCustomize\u201d in the&nbsp;<a href=\"https:\/\/wordpress.org\/support\/article\/toolbar\/\">admin Toolbar menu<\/a>.<\/p>\n\n\n\n<p>Some themes hide the admin Toolbar by default. If you can\u2019t locate the Toolbar or the \u201cCustomize\u201d link within it, you may find it easiest to just head to your site\u2019s <code>wp-admin<\/code> and to the&nbsp;<code>Appearance<\/code> \u2192 <code>Customize<\/code>&nbsp;screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using the WordPress Customizer<\/h2>\n\n\n\n<p>Once you\u2019ve got the Customizer open, you\u2019ll notice that it&#8217;s comprised of two panes: the customization options panel on the left, and the preview screen on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/12\/the-events-calendar-customizer-overview.png\" alt=\"the events calendar wordpress customizer \" class=\"wp-image-1948764\"\/><figcaption>The Customizer includes a tab for &#8220;The Events Calendar&#8221; when the plugin is installed and activated.<\/figcaption><\/figure>\n\n\n\n<p>In that left-hand panel of customization options, there\u2019s a link that says \u201cThe Events Calendar.\u201d Click on this to begin customizing the calendar.<\/p>\n\n\n\n<p>You\u2019ll see a list of options in the left-hand panel of features&nbsp;you can customize. Many of these options are for customizing colors, so, for example, if you click an option and then modify a color, you\u2019ll see a corresponding preview&nbsp;in the right-hand&nbsp;pane of those changes.<\/p>\n\n\n\n<p>Once you\u2019ve found the right color for one item, you can customize the colors of as many other items as you\u2019d like without having to save your changes yet. Once you\u2019re all set with the customizations you want to make, click \u201cSave &amp; Publish.\u201d If you don\u2019t like your changes, though, simply click \u201cDefault\u201d to remove them and exit the Customizer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/03\/Screen-Shot-2021-03-22-at-10.12.02-AM.png\" alt=\"the events calendar wordpress customizer \" class=\"wp-image-1949406\"\/><figcaption>An example showing the post title color being updated in the WordPress Customizer.<\/figcaption><\/figure>\n\n\n\n<p>You can make as many customizations as you\u2019d like before clicking that \u201cSave &amp; Publish\u201d button, and can repeat this process over and over until your calendar is looking just right.<\/p>\n\n\n\n<p>You can also use the Additional CSS option directly below The Events Calendar to add any custom styles or <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/css-custom-properties\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS properties<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"available-options\">All Available Options<\/h2>\n\n\n\n<p>The WordPress Customizer options for The Events Calendar are organized in the following groups.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Global Elements<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/08\/Screen-Shot-2021-08-09-at-7.02.45-AM.png\" alt=\"Global Elements WordPress Customizer\" class=\"wp-image-1950649\"\/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Option Name<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/customizing-fonts-for-calendar-events\/\" target=\"_blank\" rel=\"noreferrer noopener\">Select Font Family<\/a><\/td><td>Choose from Default or Inherit theme font(s) to use the font from The Events Calendar or the font from your theme.<\/td><\/tr><tr><td><a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/customizing-fonts-for-calendar-events\/\" target=\"_blank\" rel=\"noreferrer noopener\">Select Font Size<\/a><\/td><td>Choose the font size based on pixel or by scale (small, medium, or large).<\/td><\/tr><tr><td>Event Title<\/td><td>Changes the color of the event title in calendar views, on the single event page, and on some Event Tickets pages.<\/td><\/tr><tr><td>Date and Time<\/td><td>Controls the colors of the main event date and time display in calendar views, on the single event page, and on some Event Tickets pages.<\/td><\/tr><tr><td>Links<\/td><td>Controls the color of URLs on single events as well as Pro Venue &amp; Organizer pages.<\/td><\/tr><tr><td>Background Color<\/td><td>Changes the background color of most calendar pages, including views, single events, Pro Venue &amp; Organizer pages, Community Events pages, and some Event Tickets pages.<\/td><\/tr><tr><td>Accent Color<\/td><td>Changes the default blue color used throughout the calendar. Among other things, this controls the color of the Find Events button and the featured event highlights.<\/td><\/tr><tr><td>Custom Map Pin<\/td><td>Allows the ability to add or change a custom image for Map View and single event pages.  Note that this function is only available to users who are using a <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/setting-up-your-google-maps-api-key\/\" data-type=\"URL\" data-id=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/setting-up-your-google-maps-api-key\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom Google Maps API Key<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Single event<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/03\/Screen-Shot-2021-03-22-at-10.16.23-AM.png\" alt=\"the events calendar wordpress customizer single event option\" class=\"wp-image-1949408\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Option Name<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Event Title Color<\/td><td>Controls the color of the event&#8217;s title in the single event view. This setting will override the Event Title color setting in the General section. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Month View<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/05\/Screen-Shot-2021-05-26-at-12.08.30-PM.png\" alt=\"the events calendar wordpress customizer month view option\" class=\"wp-image-1949815\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Option Name<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Days of the Week<\/td><td>Changes the color of the days of the week headings above the Month View calendar.<\/td><\/tr><tr><td>Date Marker<\/td><td>Controls the colors of the individual dates.<\/td><\/tr><tr><td>Event Span<\/td><td>Controls the color for all-day and multi-day event spans. Can use the Accent Color or a custom color.<\/td><\/tr><tr><td>Grid Lines Color<\/td><td>Changes the color of the lines on the Month View grid.<\/td><\/tr><tr><td>Day Hover<\/td><td>Changes the color of the bottom border when hovering over a day.<\/td><\/tr><tr><td>Grid Background<\/td><td>Can either be set to transparent or custom.<\/td><\/tr><tr><td>Event Preview Background<\/td><td>Changes the preview display color when hovering on an event title. Can be set to White or can respect the General Background Color.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-events-bar\">Events Bar<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/07\/Screen-Shot-2021-07-01-at-7.23.34-AM.png\" alt=\"the events calendar wordpress customizer events bar\" class=\"wp-image-1950205\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Option Name<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Text Color<\/td><td>Changes the color of the text in the search bar.<\/td><\/tr><tr><td>Find Events Button Text<\/td><td>Controls the color of the <strong>Find Events<\/strong> button.<\/td><\/tr><tr><td>Icons<\/td><td>Controls the color of all icons in the search bar.<\/td><\/tr><tr><td>Find Events Button Color<\/td><td>Changes the background color of the <strong>Find Events<\/strong> button.<\/td><\/tr><tr><td>Background Color<\/td><td>Changes the background color of the search bar.<\/td><\/tr><tr><td>View Dropdown Background Color<\/td><td>Changes the background color of the view switcher dropdown.<\/td><\/tr><tr><td>Border Color<\/td><td>Changes the color of the border of the search bar.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Events Calendar supports the WordPress Customizer, located at Appearance \u2192 Customize from the WordPress dashboard. This is an excellent way to make styling changes to the calendar directly in WordPress without touching code. Locating the WordPress Customizer The WordPress Customizer is part of&nbsp;the&nbsp;Appearance \u2192&nbsp;Customize screen&nbsp;in the WordPress admin. The easiest way to access the&#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":[25],"stellar-product-taxonomy":[161],"class_list":["post-1945704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-customizations","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS &amp; Styling"}],"post_tag":[{"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 &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":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\/1945704","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=1945704"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945704\/revisions"}],"predecessor-version":[{"id":1956037,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945704\/revisions\/1956037"}],"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=1945704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945704"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}