{"id":1967321,"date":"2025-10-22T12:42:26","date_gmt":"2025-10-22T16:42:26","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?p=1967321"},"modified":"2026-04-22T16:20:05","modified_gmt":"2026-04-22T20:20:05","slug":"customize-seating","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customize-seating\/","title":{"rendered":"Customizing the Ticket Seat Selection Modal"},"content":{"rendered":"\n<p>Do you want to enhance the user experience in your Seating modal? You can easily add custom information, warnings, or new layout elements to remind users about time limits or display crucial policies.<\/p>\n\n\n\n<p>This is achieved using simple <strong>CSS snippets<\/strong> and requires <strong>no modifications to core plugin files<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>How to apply this CSS:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your WordPress dashboard \u2192 <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong>.<\/li>\n\n\n\n<li>Paste the CSS snippet above and <strong>publish<\/strong> your changes.<\/li>\n<\/ol>\n\n\n\n<p>After adding the code, reload the page and open the Seating modal. You should now see a clear warning displayed based on the option you chose.<\/p>\n<\/div><\/div>\n\n\n\n<p><strong><em>Three Options for Customization<\/em><\/strong><\/p>\n\n\n\n<p>You can choose one of the following approaches based on how prominent you want the message to be:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-option-1-full-width-banner-maximum-urgency\"><strong>Option 1: Full-Width Banner (Maximum Urgency)<\/strong><\/h3>\n\n\n\n<p>This code creates a prominent, <strong>full-width red banner<\/strong> that spans across the top of the entire modal. This is the most effective way to communicate urgency.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tec-tickets-seating__modal &gt; &#x5B;role=&quot;document&quot;]::before {\n    content: &quot;WARNING: Seats are reserved for a limited time! Please complete your purchase before the timer runs out.&quot;; \/* Customize this content *\/\n    display: block;\n    text-align: center;\n    position: relative;\n    padding: 12px 20px;\n    margin: 0;\n    background-color: #fce8e8;\n    color: #c00;\n    border-bottom: 2px solid #c00;\n    font-weight: bold;\n    font-size: 1.1em;\n    width: 100%;\n}\n<\/pre><\/div>\n\n\n<p><strong><em>Result:<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.46.02-1024x529.png\" alt=\"\" class=\"wp-image-1967331\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.46.02-1024x529.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.46.02-300x155.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.46.02-768x397.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.46.02-1536x794.png 1536w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.46.02-2048x1058.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-option-2-right-sidebar-box-targeted-warning\"><strong>Option 2: Right Sidebar Box (Targeted Warning)<\/strong><\/h3>\n\n\n\n<p>This code inserts a visually distinct warning box <strong>only inside the existing right sidebar<\/strong>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tec-tickets-seating__modal-sidebar::before {\n    content: &quot;IMPORTANT! Your seat selection is held for 15 minutes. Please complete your purchase before the timer runs out.&quot;; \/* Customize this content *\/\n    display: block;\n    background: #fff3cd;\n    color: #856404;\n    padding: 20px;\n    margin-bottom: 10px;\n    border: 1px solid #ffeeba;\n    border-radius: 4px;\n    font-weight: bold;\n}\n<\/pre><\/div>\n\n\n<p><strong><em>Result:<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.25.46-1024x529.png\" alt=\"\" class=\"wp-image-1967332\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.25.46-1024x529.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.25.46-300x155.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.25.46-768x397.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.25.46-1536x794.png 1536w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-20.25.46-2048x1058.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-option-3-new-left-sidebar-three-column-layout\"><strong>Option 3: New Left Sidebar (Three-Column Layout)<\/strong><\/h3>\n\n\n\n<p>This advanced option converts the modal into a three-column grid by adding a new, narrow sidebar to the left of the seating map. Use this to display persistent information or instructions.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-dialog__content.tribe-modal__content {\n    display: grid;\n    grid-template-columns: 150px 1fr 300px; \n    gap: 15px; \n    align-items: start;\n}\n\n.tec-tickets-seating__iframe-container {\n    grid-column: 2 \/ 3; \n    width: 100%;\n    height: 100%;\n}\n\n.tec-tickets-seating__modal-sidebar_container {\n    grid-column: 3 \/ 4;\n}\n\n.tec-tickets-seating__iframe-container::before {\n    content: &quot;Check policies here.&quot;; \/* Customize this content *\/\n    grid-column: 1 \/ 2;\n    display: block;\n    padding: 15px;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    background-color: #ffffff;\n    color: #555555;\n    font-size: 1.1em;\n    font-style: italic;\n    font-weight: bold;\n    line-height: 1.6;\n}\n<\/pre><\/div>\n\n\n<p><strong><em>Result:<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-21.18.14-1024x534.png\" alt=\"\" class=\"wp-image-1967333\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-21.18.14-1024x534.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-21.18.14-300x156.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-21.18.14-768x400.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-21.18.14-1536x801.png 1536w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/10\/Screenshot-2025-10-21-at-21.18.14-2048x1067.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to enhance the user experience in your Seating modal? You can easily add custom information, warnings, or new layout elements to remind users about time limits or display crucial policies. This is achieved using simple CSS snippets and requires no modifications to core plugin files. How to apply this CSS: After adding&#8230;<\/p>\n","protected":false},"author":67,"featured_media":1955565,"comment_status":"open","ping_status":"open","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":[1],"tags":[],"stellar-product-taxonomy":[255],"class_list":["post-1967321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","stellar-product-taxonomy-seating"],"acf":[],"taxonomy_info":{"category":[{"value":1,"label":"Uncategorized"}],"stellar-product-taxonomy":[{"value":255,"label":"Seating"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Marta Kozak","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/marta\/"},"comment_info":0,"category_info":[{"term_id":1,"name":"Uncategorized","slug":"uncategorized","term_group":0,"term_taxonomy_id":1,"taxonomy":"category","description":"","parent":0,"count":20,"filter":"raw","term_order":"0","cat_ID":1,"category_count":20,"category_description":"","cat_name":"Uncategorized","category_nicename":"uncategorized","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1967321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1967321"}],"version-history":[{"count":13,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1967321\/revisions"}],"predecessor-version":[{"id":1970082,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1967321\/revisions\/1970082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1967321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1967321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1967321"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1967321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}