tuanphan

Can you send code in 2 Code Blocks? We can check easier. I guess we can change class name of HTML/Script code in Second Code Block

You can also use JS code to attach a class name to it 😆 Use ideal here

You can change this code <style> .mobile-custom-info a { font-family: var(--site-navigation-font-font-family); margin-left: 5vw; } </style> to this <style> .mobile-custom-info a { font-family: var(--site-navigation-font-font-family); margin-left: 5vw; font-size: 17px !important; margin-bottom: 20px; } </style>

Use this new code @media screen and (max-width: 768px) { .header-menu { opacity: 1; visibility: visible; transform: translateX(400px); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; width: 70%; left: unset; } .header--menu-open .header-menu { transform: translateX(0); } .header-menu-nav-folder, .header-menu-nav-item a, .header--menu-open .header-menu .header-menu-nav-list, .header-menu-actions, .header-menu-cta { transition: unset !important; transform: unset !important; } body.header--menu-open #page { transform: translateX(-70%); transition: all 0.4s ease; } #page { transition: all 0.4s ease; } div.container * { font-size: 17px; text-align: left; } .header-menu-actions.social-accounts { justify-content: flex-start !important; } }

Add this code to Last Line in Code Injection > Footer <script> $(document).ready(function(){ $('.header-display-desktop .user-accounts-link').insertAfter('nav>div.header-nav-item:nth-last-child(3)'); }); </script>

Use this CSS code .header-actions .language-picker-content .language-item:nth-child(1) span:after { content: 'FR'; font-size: 12px } .header-actions .language-picker-content .language-item:nth-child(2) span:after { content: 'EN'; font-size: 12px } .header-actions .language-picker-content .language-item span { font-size: 0 } html[lang*="en-"] .language-picker .current-language-name, [lang="fr"] .language-picker .current-language-name { font-size: 0 !important } html[lang*="en-"] .header .language-picker .current-language-name:after { content: 'EN'; font-size: 12px !important } [lang="fr"] .language-picker .current-language-name:after { content: 'FR'; font-size: 12px !important } .header-actions .language-picker-desktop .language-picker-content { padding-left: 0; padding-bottom: 0 } .header .language-picker-content a { justify-content: center; }

It is Gallery Section - Reel then use some custom code to make it autoscroll When you add a section > Choose "Images" from the list > Then choose section with (i) icon on right > Then edit section > Change to Reel layout And to make it autoscroll, you can add this code to Website Tools (under Not Linked) > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(function(){ window.setInterval(function(){ {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn") [0].click()} }, 2000); }); </script>

Add to Website Tools (under Not Linked) > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('a.header-nav-folder-title').each(function(){ $(this).removeAttr("href"); }); }); </script>

With careers page, you try adding a new section under (use Classic Editor Section) > Then add text + markdown again, I think Classic Section won't have problem But if you still want to use code to reduce space, let me know, I will give code

If you use Personal/Basic Plan, you can add this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1633126995558_54960+.row, div#block-yui_3_17_2_1_1633126995558_54960+.row+.row { width: 50% !important; float: left !important; } } If you use Business Plan/higher + You feel the code is not fine, you can use this code to Website Tools (under Not Linked) > Code Injection > FOOTER > Then check again on real mobile <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 767) { $('div#block-yui_3_17_2_1_1633126995558_54960+.row .span-9 .code-block').insertAfter('div#block-yui_3_17_2_1_1633126995558_54960+.row>.span-3 .code-block'); $('div#block-yui_3_17_2_1_1633126995558_54960+.row .span-9 .code-block').insertAfter('div#block-yui_3_17_2_1_1633126995558_54960+.row>.span-3 .code-block'); } }) </script> <style> @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1633126995558_54960+.row .span-3 { display: grid; grid-template-columns: repeat(2,1fr); } } </style>

Hi, Which page in your screenshot?

Which code did you use? If you used this code You can change it to new code /* section hover */ @media screen and (min-width:992px) { body#collection-64f70b73d26309086c7a8dc6 { section:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease; } section:hover:after { opacity: 1; transition: all 0.3s ease; } section .html-block { opacity: 0; transition: all 0.3s ease; } section:hover .html-block { opacity: 1; transition: all 0.3s ease; }}}

Yes. Adding to Footer will appear, but then we can use CSS to hide it on all pages. Currently I don't have code for Section in Site Footer, you can add it then share site url, we can check & give you code (if the site is live & you can't add it, you can duplicate the site & do there) With plugin, I used Section Loader Supreme plugin then use this code to Code Injection Footer First install plugin Next, create a page in Not Linked with Name (any name) - URL: above-footer Next, add your form into Not Linked Page Next, add this code to Blog Page Header Code Injection <div data-wm-plugin="load" data-target="/above-footer"></div> And add this code to Code Injection > Footer <script> $(document).ready(function(){ setTimeout( function() { $('div.wm-load-container').insertBefore('body[class*="type-blog"].view-item footer.sections'); }, 3000); }); </script> The code will add Not Linked Page Section above Footer on Blog Post Only

Hi, #1. You can add this code to Website Tools (under Not Linked) > Code Injection > Footer This code will create effect: When users click on Services >> Show all folder item under it without open new sub page. If this is not what you want, you describe your desired layout, we can check it again easier <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-menu-nav-folder[data-folder="/services"]').appendTo('[data-folder="root"]>div>.container.header-menu-nav-item:nth-child(2)'); $('a[data-folder-id="/services"]').click(function() { $(this).toggleClass('tp-burger-folder'); }); }); </script> <style> .header-menu-nav-folder[data-folder="/insights"] { display: block !important; position: relative !important; transform: unset !important; overflow: hidden; height: 0 !important; transition: all 0.3s; } .header-menu-nav-folder[data-folder="/insights"] .header-menu-controls { display: none; } a.tp-burger-folder+.header-menu-nav-folder[data-folder="/insights"] { height: 100% !important; } .header-menu-nav-folder[data-folder="root"] { transform: unset !important; overflow: hidden; } [data-folder="/insights"] a { margin-top: 5px; margin-bottom: 5px; white-space: nowrap; } [data-folder-id] { margin-top: 10px; margin-bottom: 10px !important; } a[data-folder-id] span:nth-child(2):after { content: "\e009"; font-family: 'squarespace-ui-font'; } a[data-folder-id] { white-space: nowrap; } span.chevron.chevron--right { visibility: hidden !important; } </style> #2. You mean reduce text size? #3. To hide Footer on Mobile, add this code to Website Tools > Custom CSS @media screen and (max-width:767px) { footer.sections { display: none !important; } }

Can you share site url? We can check easier With product to cart, maybe you enable Express Checkout https://support.squarespace.com/hc/en-us/articles/206540817-Express-checkout

Which page are you referring to? I don't see it on home/main page

Hi, Exclude code for this page? https://flamingo-tangerine-b6pg.squarespace.com/design-shanghai-show-design-2023 or all project belong this page? https://flamingo-tangerine-b6pg.squarespace.com/

#1. Add this code to Website Tools (under Not Linked) > Custom CSS div#block-040a8317b5dde6e0b395 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Aftensmad */ li.archive-group:nth-child(1) { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } /* Bagvaerk */ li.archive-group:nth-child(2) { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } /* Dessert */ li.archive-group:nth-child(3) { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } /* Frokost */ li.archive-group:nth-child(4) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } /* Morgenmad */ li.archive-group:nth-child(5) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } /* Sode Sager */ li.archive-group:nth-child(6) { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } /* Tilbehor */ li.archive-group:nth-child(7) { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } #2. You mean increase text size or?

Add this code to bottom of Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('div#block-yui_3_17_2_1_1701098820027_2447').insertAfter('div#block-yui_3_17_2_1_1692163036742_2082 li:nth-child(2) p:last-child'); }) </script>

Use CSS code (Website Tools > Custom CSS) li.lesson-category * { font-family: 'ABCFavoritMono-Book-Trial' !important; }

Change :after to :before It doesn't work properly, please share link to page where you use form, we can check easier

Some solutions to do this Option 1. Use CSS code to turn last 3 items from Navigation to button style, then next use CSS position absolute to push them to right of footer Option 2. Use JavaScript code to add 2 buttons to right of header + enable one button If you share link to your site, we can give code for option 2 (You need to provide button name + button url)

#yui- is dynamic but #block-yui/#block_ is static id, it won't change when you reload or refresh the page note #yui and #block-yui is different id.

You can consider create a new page, add countdown here, then when time is done, redirect to main homepage. What do you think?

Use this code to Website Tools > Code Injection > Footer <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <img src="https://content.invisioncic.com/p289038/monthly_2023_11/LogoTANIQtransparent.thumb.png.0c1808606ac76767e354e33194011587.png"/> </div> <style> div#loader-container img { max-width:500px; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: 0.65s; animation-delay: 5s; top: 0; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> See demo: https://tuanphan3.squarespace.com/1images-loading?noredirect pass: abc