-
Posts
63,790 -
Joined
-
Last visited
-
Days Won
511
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by tuanphan
-
The site is private. You can setup an access password, we can check easier
-
Add to Website Tools (under Not Linked) > Custom CSS body#collection-63dd5a5ffadc43118d546d68 header#header img { content: url(https://cdn.pixabay.com/photo/2023/05/25/07/38/antarctica-8016562_1280.jpg); }
-
How to remove weird white floating box on website
tuanphan replied to MRWORLD's topic in Customize with code
- 1 reply
-
- product-page
- error
-
(and 1 more)
Tagged with:
-
Hidding pricing on squarespace specific product page
tuanphan replied to AC06's topic in Customize with code
Can you share link to this page? I can check easier- 8 replies
-
- product-page
- add-to-cart
-
(and 2 more)
Tagged with:
-
You try this code to Custom CSS div.form-block label, div.form-block label * { color: white !important; }
- 2 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Can you share site url? We can check easier
- 17 replies
-
- product-page
- mobile
-
(and 3 more)
Tagged with:
-
You can use this code to Custom CSS footer#footer-sections { border-top: 1.5px solid black; } footer.sections { --sqs-site-max-width: 100% !important; }
-
how do I code in a different video for mobile vs Desktop?
tuanphan replied to GLOCK's topic in Fonts, colors and images
You can use below code with this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff -
Some CSS code for Cart Page. You need to add it to Custom CSS #1. Rename Cart Title /* Rename Cart Title */ h2.cart-title { visibility: hidden; } h2.cart-title:before { visibility: visible; content: "New Shop Title"; } #2. Align center Cart Title /* Align center Cart Title */ h2.cart-title { text-align: center; } #3. Add a subtext under Cart Title /* Add a subtext under Cart Title */ h2.cart-title:after { content: "Cart sub text"; display: block; font-size: 14px; } #4. Rename “You have nothing in your shopping cart” text /* Rename You have nothing in your shopping cart text */ p.empty-message { visibility: hidden; } p.empty-message:before { visibility: visible; content: "enter new text here"; } #5. Rename “Continue Shopping” text /* Rename Continue Shopping text */ a.cart-continue-button { color: transparent !important; position: relative; } a.cart-continue-button:after { color: #fff; content: 'Enter New Text'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } #6. Product thumbnail size /* product thumbnail size */ .cart-row-img-wrapper { width: 190px !important; } #7. Variant size color /* Variant size color */ p.cart-row-variant { color: #f1f; font-size: 20px !important; } #8. Remove quantity /* remove quantity */ .cart-row-qty { display: none !important; } #9. Remove Price /* remove price */ p.cart-row-price { display: none; } .cart-subtotal { display: none; } #10. X remove color /* X Color */ .cart-row-remove svg { fill: #f1f !important; } #11. Add a text under the checkout button /* add a text under checkout button */ .cart-checkout:after { content: "enter new text here"; text-align: left; font-size: 20px; margin-top: 10px; } #12. Remove checkout button /* remove checkout button */ .cart-checkout-button { display: none !important; } If you have any other questions, just comment below.
-
You can change it in Site Styles or use this CSS code footer.sections * { font-family: var(--site-navigation-font-font-family); }
-
If external links, use this <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('a').attr('target', function() { if(this.host == location.host) return '_self' else return '_blank' }); }); </script>
-
Image height is different so I can't find a code to align them under image You try contacting Plugin Author, maybe he know a solution for this?
-
Need help with displaying an interactive object on desktop and mobile
tuanphan replied to sssnole's topic in Pages & Content
If stretch it fullheight, it won't be fullwidth The only solution is make it align center, so you will see a gap on both top/bottom of screen- 9 replies
-
- responsive-design
- jasper-template
-
(and 2 more)
Tagged with:
-
Horizontal Text Scroll For Mobile - Text Links
tuanphan replied to mikecali's topic in Site Structure & Navigation
You can consider using Scrolling Block, Gallery Block, List Section Carousel... then we can use code to move it above Header What do you think? -
You can use this code to Website Tools (under Not Linked) > Custom CSS #block-yui_3_17_2_1_1700578253242_14542 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper { margin-bottom: 0px !important; }
-
Main Events Section & Event Description Pages Formatting
tuanphan replied to ChrisVL's topic in Site Design & Styles
Add this to Last Line in Code Injection > Footer <script> $(document).ready(function(){ $('h1.eventitem-title').insertBefore('div.eventitem-column-content .button-block'); $('li.eventitem-meta-item.eventitem-meta-date.event-meta-item').insertAfter('h1.eventitem-title'); }); </script> <style> li.eventitem-meta-item.eventitem-meta-date.event-meta-item { list-style: none; } </style> -
Yes. you must add that code to Code Injection, it is jQuery code, not CSS code, if you add to CSS, Squarespace won't render it and it will break all current code in CSS box
-
How do I left align images in a Gallery (Slideshow: Reel)?
tuanphan replied to shyde94's topic in Customize with code
The url doesn't work, if you share link to page where you use slideshow reel, we can check easier -
You mean 2 different dropdowns or 2 dropdown inside dropdown?
-
How to fix the search bar? Mobile view issues!
tuanphan replied to Xwinter_soul's topic in Customize with code
#1. Did you solve it? It looks fine to me #2. Move to this position? to make header fixed on scroll, you can use this code to Website Tools (under Not Linked) > Custom CSS header.Header { position: sticky !important; top: 0 !important; z-index: 99999; } #3. You mean float Contact Us to right of black bar? -
Add this code to Website Tools (under Not Linked) > Code Injection > Footer <style> .blog-excerpt a:hover { font-weight: bold; color: #f1f; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.blog-excerpt a').attr('target','_blank'); }); </script>
-
hidden header logo that appears when scrolling
tuanphan replied to Jord2308's topic in Customize with code
You mean Make logo invisible on first section and make it visible on other sections on current page? -
Add this code under your code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { setTimeout(function(){ $('a.sx-verified-seal').attr('target','_blank'); }, 2000); }); </script>
-
Because your Codepen link uses SCSS, not CSS, so it won't work when you pasted directly to Code Block. And you need to declare jQuery library Add a Code Block > paste this new code <div class='tp-container'> <div class='img background-img'></div> <div class='img foreground-img'></div> <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider"> <div class='slider-button'></div> </div> <style> .tp-container { box-sizing: border-box; } .tp-container *, .tp-container *:before, .tp-container *:after { box-sizing: inherit; } .tp-container { position: relative; width: 900px; height: 600px; border: 2px solid white; } .tp-container .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 900px 100%; } .tp-container .background-img { background-image: url("https://i.imgur.com/s08MkXC.jpg"); } .tp-container .foreground-img { background-image: url("https://i.imgur.com/PfIWek4.jpg"); width: 50%; } .tp-container .slider { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: rgba(242, 242, 242, 0.3); outline: none; margin: 0; transition: all 0.2s; display: flex; justify-content: center; align-items: center; } .tp-container .slider:hover { background: rgba(242, 242, 242, 0.1); } .tp-container .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 600px; background: white; cursor: pointer; } .tp-container .slider::-moz-range-thumb { width: 6px; height: 600px; background: white; cursor: pointer; } .tp-container .slider-button { pointer-events: none; position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: white; left: calc(50% - 18px); top: calc(50% - 18px); display: flex; justify-content: center; align-items: center; } .tp-container .slider-button:after { content: ""; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(-45deg); } .tp-container .slider-button:before { content: ""; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(135deg); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $("#slider").on("input change", (e)=>{ const sliderPos = e.target.value; // Update the width of the foreground image $('.foreground-img').css('width', `${sliderPos}%`) // Update the position of the slider button $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`) }); </script>