{"id":9393,"date":"2025-10-09T17:06:44","date_gmt":"2025-10-09T16:06:44","guid":{"rendered":"https:\/\/churchtools.academy\/?post_type=docs&#038;p=9393"},"modified":"2025-12-05T12:55:09","modified_gmt":"2025-12-05T11:55:09","password":"","slug":"how-to-embedded-calendars-be-customized-with-css","status":"publish","type":"docs","link":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/how-to-embedded-calendars-be-customized-with-css\/","title":{"rendered":"How to embedded calendars be customized with CSS"},"content":{"rendered":"\n<p>You can customize the appearance and displayed information of the embedded calendar on your website using CSS.<br>To do this, enter CSS commands in the system settings of your ChurchTools system, which are then automatically taken into account when embedding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Open system settings<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/open_system-settings.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"522\" height=\"722\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/open_system-settings.png\" alt=\"open system settings\" class=\"wp-image-41552\" style=\"width:390px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/open_system-settings.png 522w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/open_system-settings-217x300.png 217w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/open_system-settings-360x498.png 360w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Select calendar module<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar.png\"><img decoding=\"async\" width=\"1024\" height=\"620\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-1024x620.png\" alt=\"System settings -&gt; Modules -&gt; Calendar\" class=\"wp-image-41555\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-1024x620.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-300x182.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-768x465.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-1536x930.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-2048x1240.png 2048w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_Modules_Calendar-360x218.png 360w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Enter CSS commands<\/h2>\n\n\n\n<p>Here you can enter the CSS commands you want.<br>Don&#8217;t forget to <strong>save<\/strong> your changes, before you close the system settings again.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars.png\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars-1024x662.png\" alt=\"System settings - calendar - CSS for embedded calendars\" class=\"wp-image-41558\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars-1024x662.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars-300x194.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars-768x496.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars-360x233.png 360w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calendar_CSS-for-embedded-calendars.png 1504w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<aside class=\"wp-block-group ct-box ct-box-blue has-background is-vertical is-layout-flex wp-container-core-group-is-layout-002f1c27 wp-block-group-is-layout-flex\" style=\"border-radius:8px;border-left-color:#3e70ce;border-left-width:0.5rem;background-color:#f3f5f7;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<p style=\"margin-top:0.5rem;margin-right:0.5rem;margin-bottom:0rem;margin-left:0.5rem\"><strong>Note<\/strong><\/p>\n\n\n\n<p style=\"margin-top:0rem;margin-right:0.5rem;margin-bottom:0.5rem;margin-left:0.5rem\">You can define when the CSS commands should be applied by creating your own <em><strong>CSS classes<\/strong><\/em> (1).<br>This allows you to set that a CSS command stored in the system settings is only applied if you also add the corresponding CSS class in the embed calendar dialog box (2). This provides the embedded calendar with its own CSS class.<br><img loading=\"lazy\" decoding=\"async\" width=\"1098\" height=\"692\" class=\"wp-image-41563\" style=\"width: 600px\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage.png\" alt=\"System settings -&gt; calenar -&gt; CSS for homepage\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage.png 1098w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage-300x189.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage-1024x645.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage-768x484.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage-360x227.png 360w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/System-settings_calenar_CSS-for-homepage-79x50.png 79w\" sizes=\"(max-width: 1098px) 100vw, 1098px\" \/><br><br><img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"846\" class=\"wp-image-41566\" style=\"width: 350px\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/Calendar_Embed-Calendar_Advanced-settings_CSS-class.png\" alt=\"Calendar_Embed Calendar -&gt; Advanced settings -&gt; CSS-class\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/Calendar_Embed-Calendar_Advanced-settings_CSS-class.png 566w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/Calendar_Embed-Calendar_Advanced-settings_CSS-class-201x300.png 201w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/Calendar_Embed-Calendar_Advanced-settings_CSS-class-343x512.png 343w, https:\/\/churchtools.academy\/wp-content\/uploads\/2025\/10\/Calendar_Embed-Calendar_Advanced-settings_CSS-class-33x50.png 33w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/p>\n<\/aside>\n\n\n\n<aside class=\"wp-block-group ct-artikel-zum-weiterlesen has-background is-layout-constrained wp-container-core-group-is-layout-89fd719a wp-block-group-is-layout-constrained\" style=\"border-radius:8px;background-color:#f9fafb;margin-top:24px;margin-bottom:24px;padding-top:32px;padding-right:24px;padding-bottom:32px;padding-left:24px\">\n<h2 class=\"wp-block-heading has-medium-font-size\">Article to read more<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-how-to-hide-the-resources-in-an-embedded-calendar\/\" data-type=\"docs\" data-id=\"7530\">Hide resources in the embedded calendar<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-embed-calendar-css-classes\/\" data-type=\"docs\" data-id=\"7527\">Embed calendar: CSS classes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-embed-calendar-url-parameters\/\" data-type=\"docs\" data-id=\"7528\">Embed calendar: URL parameter<\/a><\/li>\n<\/ul>\n<\/aside>\n","protected":false},"excerpt":{"rendered":"<p>You can customize the appearance and displayed information of the embedded calendar on your website using CSS.To do this, enter CSS commands in the system settings of your ChurchTools system, which are then automatically taken into account when embedding. 1. Open system settings 2. Select calendar module 3. Enter CSS commands Here you can enter [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[470],"doc_tag":[689],"knowledge_base":[224],"class_list":["post-9393","docs","type-docs","status-publish","hentry","doc_category-embedding-calendars","doc_tag-screenshot-outdated","knowledge_base-churchtools-modules"],"pp_statuses_selecting_workflow":false,"pp_workflow_action":"current","pp_status_selection":"publish","acf":[],"year_month":"2026-04","word_count":89,"total_views":"2536","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Victoria Weidemann","author_nicename":"vweidemann","author_url":"https:\/\/churchtools.academy\/en\/author\/vweidemann\/"},"doc_category_info":[{"term_name":"Embedding Calendars","term_url":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/"}],"doc_tag_info":[{"term_name":"Screenshot outdated","term_url":"https:\/\/churchtools.academy\/en\/docs-tag\/screenshot-outdated\/"}],"knowledge_base_info":[{"term_name":"Modules","term_url":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/","term_slug":"churchtools-modules"}],"knowledge_base_slug":["churchtools-modules"],"_links":{"self":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/comments?post=9393"}],"version-history":[{"count":17,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9393\/revisions"}],"predecessor-version":[{"id":42852,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9393\/revisions\/42852"}],"wp:attachment":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/media?parent=9393"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/doc_category?post=9393"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/doc_tag?post=9393"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/knowledge_base?post=9393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}