-
Posts
64,633 -
Joined
-
Last visited
-
Days Won
515
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by tuanphan
-
You can use this code to Website > Website Tools > 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[href="/our-products"]').click(function() { var link = $(this).text(), href = "/our-products"; window.location.href=href; }); }); </script>
-
You added it to URL Mapping or Code Injection?
- 3 replies
-
- 404-error-page
- url
-
(and 2 more)
Tagged with:
-
You can follow these steps to achieve this feature (1) You add a Text Block with 3 text, then hyperlink them, use this format. And make sure "Open in New Tab" is disabled #Engineering #Environmental #Industrial-services (2) Add 3 Gallery Sections under Text Block When you add a Section > Click Images > Choose section with (i) icon, it is Gallery Section Hover on Gallery > Click Edit Section Choose Grid Simple, adjust number of items/row and enable Gallery Caption Next, click Edit Gallery and add some text for images and add some text/url (3) Install this free tool to find ID of 3 Galleries you added https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff In my example, we will have Engineering Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd27"] Environmental Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd29"] Industrial Services Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd2a"] (4) Use this code to Individual Page Header Code Injection (Page where you added 3 Galleries) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // Show initial: Engineering $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass('show'); // Engineering $('a[href="#Engineering"]').click(function(){ $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass("show"); $('section:not([data-section-id="661f1cfbe479ea22f816bd27"])').removeClass('show'); } ); // Environmental $('a[href="#Environmental"]').click(function(){ $('section[data-section-id="661f1cfbe479ea22f816bd29"]').addClass("show"); $('section:not([data-section-id="661f1cfbe479ea22f816bd29"])').removeClass('show'); } ); // Industrial Services $('a[href="#Industrial-services"]').click(function(){ $('section[data-section-id="661f1cfbe479ea22f816bd2a"]').addClass("show"); $('section:not([data-section-id="661f1cfbe479ea22f816bd2a"])').removeClass('show'); } ); }); </script> <style> section[data-section-id="661f1cfbe479ea22f816bd27"], section[data-section-id="661f1cfbe479ea22f816bd29"], section[data-section-id="661f1cfbe479ea22f816bd2a"]{ display: none; transition: all 0.5s; } section.show { display: block !important; transition: all 0.5s; } </style> <style> figure[class*="gallery"]:not(.gallery-slideshow-item) { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ div[class*="-item-wrapper"]:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } </style> (5) See a demo https://tuanphan-demo01.squarespace.com/ctext-show-gallery-section-fr?noredirect pass: abc If you have problems when adding the code, just comment below
-
Need custom CSS code to change arrow style for carousel
tuanphan replied to JessicaWare's topic in Customize with code
Do you use Personal or Business Plan? I can test new code easier- 9 replies
-
- custom-css
- design
-
(and 1 more)
Tagged with:
-
What is problem? Screenshot looks fine
-
When you add a section > Choose Classic Next, add an Image Block then choose Inline Next, choose this option
-
Custom font for product title in product page
tuanphan replied to thearrivalyoga's topic in Customize with code
You can use a CSS code like this .pdp-layout .pdp-details .pdp-details-title { font-family: 'omnes-pro' !important; } -
To apply to buttons belong a specific section, use this code [enter your data-section-id] { a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; background: #000; transition: all 0.3s ease; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element { transition: all 0.3s ease; position: relative; display: flex; background-color: transparent !important; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover { color: #fff; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover:after { top: 0; height: 100%; } } Use this free tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
- 14 replies
-
Logo Partially Disappearing When Mobile Menu Appears
tuanphan replied to BigAMc's topic in Fonts, colors and images
You can consider changing mobile overlay background color, or change logo to another logo when burger menu is open To change logo, you can use this code to Website > Website Tools > Custom CSS. Replace Pixabay image with your new logo url body.header--menu-open header#header img { content: url(https://cdn.pixabay.com/photo/2016/10/26/22/02/dog-1772759_1280.jpg); } -
Can you share link to page where you added code on your site?
-
I just checked and it looks like there is remove SS option to make more text You can consider create custom quick view lightbox, but this will take more time to add content to quick view lightbox (but if you need this, let me know, I will give some hint)
- 4 replies
-
- text
- product-page
-
(and 1 more)
Tagged with:
-
It's quite complicated so I haven't had time to check it yet. But here I shared some custom layout, You can based on that to try to customize the items
- 9 replies
-
- gallery
- gallery-block
-
(and 2 more)
Tagged with:
-
CSS to prevent dark mode from changing the colours on a site
tuanphan replied to Stacey_anne's topic in Customize with code
The page doesn't work. Can you check it again? -
Make content within simple list section not clickable
tuanphan replied to jbassett's topic in Customize with code
You can remove code you used, then we can give new code to make list block clickable + exclude card on another page. Your current code is encrypted so there is no way to insert an exclude id into your code -
You can use this code to Custom CSS box [data-section-id="642ed5df644676989d3164f4"]:after { content: "Simon Mannion"; position: absolute; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: -1; }
- 4 replies
-
- background
- text
-
(and 1 more)
Tagged with:
-
Vertical Video - change 16:9 container to vertical
tuanphan replied to miketerranova's topic in Customize with code
Use this code under @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1711831694026_15313 .native-video-player.video-player { padding-top: 90% !important; } } -
Shop Dropdown Variant color custom
tuanphan replied to _yohandeschamps_'s topic in Customize with code
Can you share link to a product/ we an try some CSS code -
- 10 replies
-
- code
- code-injection
-
(and 1 more)
Tagged with:
-
You mean add it above scrolling block, or make countdown to scroll?
- 14 replies
-
- css
- custom-css
-
(and 1 more)
Tagged with:
-
When you use a link something like this, it will automatically enter password (just an example link) https://tuanphan3.squarespace.com/lottie-loading-one?noredirect&password=abc
- 13 replies
-
- lock-screen
- customized
-
(and 1 more)
Tagged with:
-
Use this CSS code under [data-filter="lokation"].sqs-block:before { content: "Lokation"; display: block; font-size: 17px; margin-top: 20px; font-weight: bold; }
-
Full screen hero image on home page load
tuanphan replied to LukeDesign's topic in Customize with code
The page doesnt exist now. Can you check it again? -
You can use this CSS code img.grid-item-image.grid-image-cover { opacity: 1 !important; } img.grid-item-image.grid-item-additional-image { opacity: 0 !important; } img.grid-item-image.grid-image-hover { opacity: 0 !important; }