{"id":9393,"date":"2024-05-02T14:13:05","date_gmt":"2024-05-02T12:13:05","guid":{"rendered":"https:\/\/leogeracademy.hestia.wpspace.me\/?post_type=docs&#038;p=9393"},"modified":"2024-10-17T15:36:10","modified_gmt":"2024-10-17T13:36:10","password":"","slug":"13-how-to-customize-embedded-calendars-using-css","status":"publish","type":"docs","link":"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-how-to-customize-embedded-calendars-using-css\/","title":{"rendered":"How to customize embedded calendars using CSS"},"content":{"rendered":"\n<p>You can customize the appearance and the 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, which are then automatically taken into account when embedding a calendar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1 Open system settings<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"443\" height=\"462\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-280.png\" alt=\"\" class=\"wp-image-16005\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-280.png 443w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-280-288x300.png 288w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-280-360x375.png 360w\" sizes=\"(max-width: 443px) 100vw, 443px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Select calendar module<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"640\" height=\"353\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-281.png\" alt=\"\" class=\"wp-image-16008\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-281.png 640w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-281-300x165.png 300w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-281-360x199.png 360w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Enter CSS commands<\/h2>\n\n\n\n<p>Here you enter the CSS commands you want.<br>Don&#8217;t forget to <em><strong>save<\/strong><\/em> your changes before you close the system settings.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"640\" height=\"506\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-282.png\" alt=\"\" class=\"wp-image-16007\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-282.png 640w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-282-300x237.png 300w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-282-360x285.png 360w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/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 assigning your own <em><strong>CSS classes<\/strong><\/em> (1).<br>In this way, you can define that a CSS command stored in the system settings is only applied if you also add the corresponding CSS class when <em><strong>embedding the calendar<\/strong><\/em> (2). This gives the embedded calendar its own CSS class.<\/p>\n<\/aside>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"448\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-284.png\" alt=\"\" class=\"wp-image-16013\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-284.png 468w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-284-300x287.png 300w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-284-360x345.png 360w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"835\" src=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-283.png\" alt=\"\" class=\"wp-image-16011\" srcset=\"https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-283.png 374w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-283-134x300.png 134w, https:\/\/staging.churchtools.academy\/wp-content\/uploads\/2024\/06\/image-283-229x512.png 229w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>You can customize the appearance and the displayed information of the embedded calendar on your website using CSS.To do this, enter CSS commands in the system settings of your ChurchTools, which are then automatically taken into account when embedding a calendar. 1 Open system settings 2. Select calendar module 3. Enter CSS commands Here you [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[470],"doc_tag":[],"knowledge_base":[224],"class_list":["post-9393","docs","type-docs","status-publish","hentry","doc_category-embedding-calendars","knowledge_base-churchtools-modules"],"acf":[],"year_month":"2026-05","word_count":71,"total_views":"686","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Jasper Stehmeier","author_nicename":"jstehmeier","author_url":"https:\/\/staging.churchtools.academy\/en\/author\/jstehmeier\/"},"doc_category_info":[{"term_name":"Embedding Calendars","term_url":"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Modules","term_url":"https:\/\/staging.churchtools.academy\/en\/help\/churchtools-modules\/","term_slug":"churchtools-modules"}],"knowledge_base_slug":["churchtools-modules"],"_links":{"self":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/comments?post=9393"}],"version-history":[{"count":3,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9393\/revisions"}],"predecessor-version":[{"id":16222,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9393\/revisions\/16222"}],"wp:attachment":[{"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/media?parent=9393"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/doc_category?post=9393"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/doc_tag?post=9393"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/staging.churchtools.academy\/en\/wp-json\/wp\/v2\/knowledge_base?post=9393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}