Jump to content

tuanphan

Circle Member
  • Posts

    63,790
  • Joined

  • Last visited

  • Days Won

    511

Everything posted by tuanphan

  1. The site is private. You can setup an access password, we can check easier
  2. 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); }
  3. You try this code to Custom CSS div.form-block label, div.form-block label * { color: white !important; }
  4. 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; }
  5. You can use below code with this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
  6. 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.
  7. You can change it in Site Styles or use this CSS code footer.sections * { font-family: var(--site-navigation-font-font-family); }
  8. 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>
  9. 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?
  10. 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
  11. 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?
  12. 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; }
  13. 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>
  14. 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
  15. The url doesn't work, if you share link to page where you use slideshow reel, we can check easier
  16. You mean 2 different dropdowns or 2 dropdown inside dropdown?
  17. #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?
  18. 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>
  19. You mean Make logo invisible on first section and make it visible on other sections on current page?
  20. 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>
  21. 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>
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.