Jump to content

Burchard

Circle Member
  • Posts

    35
  • Joined

  • Last visited

Everything posted by Burchard

  1. To apply certain page specific changes I use Page Header Code Injection on the index page, which then also get applied to the 'underlying' pages that are part of the index collection. Amongst others, the CSS changes the color and size of certain buttons and hides the quantity input for a product block. This works fine while still working in the editor, however, when I load the page separately, the CSS does not get applied until I reload the page. I have tried adding the CSS to the underlying pages, but this doesn't seem to make any difference. I would really appreciate some insight into why this is happening and how I can make it so that the CSS gets applied immediately on first load. Thanks! The website is running on 7.0 One of the pages I'm working on: https://www.maartenrots.nl/march-rock-29-la-aldea-azul Code I'm using: <style> .product-quantity-input { display:none; visibility: hidden; } .product-block .sqs-add-to-cart-button-wrapper { margin: 0px 0; display: block; } .sqs-gallery-controls .previous, .sqs-gallery-controls .next { color: #454545 !important; background-color: rgba(0,0,0,0); } .sqs-block-button .sqs-block-button-element--large { padding: 1em 2.5em; font-size: 12px; color: #fff; background-color: #0299d8 !important; } body:not(.button-style-default) .sqs-editable-button, body:not(.button-style-default) .sqs-editable-button-color, body:not(.button-style-default) .tock-block div#Tock_widget_container > div.TockWidgetWrapper .TockButton-blue { color: #fff; background-color: #0299d8 !important; border-color: #ebebeb; } </style>
  2. That worked like a charm, thanks a lot! I imagine this will be helpful for others as well, thank you for your generosity in sharing your skills and the code, much appreciated!
  3. I've done that, but no success yet. I'm working on this page to achieve the desired effect: https://www.maartenrots.nl/la-aldea-azul-editions/untitled-juzcar-2023-1/ Maybe you can spot where I am failing? Thanks again, your help is much appreciated
  4. Thank you for your solution. I've made the adjustments, but I'm not sure where I should add this bit of code?
  5. It will be two text blocks, divided with a line block, with some bold text and one or two hyperlinks. I think the solution with the hidden block in the footer might be a good way to achieve this. How would you go about this?
  6. Giving this a bump. I would really like to achieve this, but do not have any experience using AJAX requests. It would be great if someone can give me directions. Thanks!
  7. Thanks for your reply! Can you explain how to do this? I'm not familiar with using AJAX requests.
  8. For the 'additional info' below a product, I would like to use a code block that loads pre-formatted text from a file on my web server (either uploaded through the Squarespace interface or via FTP, whichever works best). I want to do this so that I can change the additional information for all products on the website at once, by changing only one document, instead of manually going through all products one by one. It would save a lot of time,and minimize the chance of errors. The website is built on 7.0 in the Brine family. How can such a thing be achieved? Thanks for your input.
  9. @tuanphan Is there a way to make the above code also work on mobile displays? Thanks!
  10. Sure, here it is a bit more in-depth; This is the bit of code to add the social icons. I added e-mail and Instagram, to figure out the specific codes for other platforms I would suggest to briefly turn on the icons in the design styles and then copy that code; <div class="social-footer"> <a href="http://instagram.com/your-username" target="_blank" class="SocialLinks-link instagram-unauth" style=""> <div> <svg class="SocialLinks-link-svg" viewBox="0 0 64 64"> <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#instagram-unauth-icon"></use> <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#instagram-unauth-mask"></use> </svg> </div> </a><a href="mailto:name@yourwebsite.com" target="_blank" class="SocialLinks-link email" style=""> <div> <svg class="SocialLinks-link-svg" viewBox="0 0 64 64"> <use class="SocialLinks-link-icon" xlink:href="https://www.yourwebsite.com/#email-icon"></use> <use class="SocialLinks-link-mask" xlink:href="https://www.yourwebsite.com/#email-mask"></use> </svg> </div> </div> This is the CSS I used to position the icons: /* Footer social icons */ .social-footer { display: flex; justify-content: center; }
  11. Fixed it after some fiddling around. I added the social links to the header in the Site Styles. Then I copied the piece of code Squarespace uses to add the icons in the header. I pasted this in a code block in the footer and used CSS to position it. I then turned the social links off again in the Site Styles. That's it, works like a charm 🙂
  12. Site URL: https://www.maartenrots.nl/ Hi there, I'm using Brine (Moksha) and would like to have the social icons in the footer instead of the header. It would be great to get some help with this, thanks!
×
×
  • 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.