Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


  • Posts

  • Joined

  • Last visited

Everything posted by jpeter

  1. You can try adding the following CSS: .collection-type-products:not(.view-list) .header-title-logo { filter: invert(1); }
  2. You can add the following Javascript via Code Injection. Just edit the values of the UPDATED_TEXT and UPDATED_URL variables in the code to what you want. I went ahead and used the values you provided. JavaScript (function($){ var UPDATED_TEXT = 'Back To Calendar'; var UPDATED_URL = '/monthly-calendar'; /********************************************************* * DO NOT EDIT BELOW THIS LINE **********************************************************/ if(!$) { var s = document.createElement('script'); s.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; s.integrity = 'sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4='; s.crossorigin = 'anonymous'; s.onload = init; document.body.appendChild(s); } else { $(document).ready(init); } function init(){ var $backLink = $('.eventitem-backlink'); var url = UPDATED_URL || $backLink.attr('href'); var text = UPDATED_TEXT || $backLink.html(); $backLink .html(text) .attr('href', url); } })(jQuery); Make sure the code above is in between <script></script> tags. e.g.: <script> // JS code goes here </script>
  3. @Beyond Try the JS code below instead, which maintains the HTML structure rather than override it. (function () { // Select the node that will be observed for mutations var productSummaryPrice = document.querySelector('.ProductItem-summary .product-price'); // Exit if target node isn't found. if(!productSummaryPrice) return; // Options for the observer (which mutations to observe) var config = { childList: true }; // Create an observer instance linked to the callback function var observer = new MutationObserver(function () { var html = productSummaryPrice.innerHTML; productSummaryPrice.innerHTML = html.replace(/€/g, 'TL '); }); // Start observing the target node for configured mutations observer.observe(productSummaryPrice, config); })();
  4. @sambradley I updated my code and description above. It looks like all you're missing is the "block-" portion of the block id. So in your case, the value should be block-c6d10541e56caccb299c. I also added a 4th variable called BLOCK_ID_SELECTOR to target child elements in the block and I set it to target the <h3> in the block on the /thanksforyourrequest page you created.
  5. You can add the javascript code below to the page using Per Page Code Injection. Javascript (function(){ if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var dayField = document.querySelector('.date .day'); dayField.parentNode.insertBefore(dayField, dayField.previousElementSibling); } })(); Make sure you add the code between <script> tags, e.g. <script> // JS code goes here </script>
  6. @Peterotoole Add the custom CSS code below. See article on how to do that: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor CSS /* Round corners on form fields */ .ProductItem-details input, .ProductItem-details select, .ProductItem-details textarea, .form-wrapper input, .form-wrapper select, .form-wrapper textarea { border-radius: 5px !important; } /* Override top alignment of product details */ @media screen and (min-width: 768px){ .tweak-product-basic-item-content-alignment-top .ProductItem-details { padding-top: 0px; } }
  7. You can add the CSS code below using a CSS code block on the page: <style> @media (max-width: 768px) { .image-block-outer-wrapper { max-width: 158px; /* adjust the width */ margin: 0 auto; /* center the block */ } } </style>
  8. Adjust the width and height properties of the css below. Make sure they're the same value. CSS /* Overrides icon size in mobile menu */ .header-menu-actions .icon--lg { width: 28px; height: 28px; } See article on how to add CSS https://support.squarespace.com/hc/en-us/articles/206545567
  9. You'll want to mess with the value of the min-width style property of the CSS code below. It looks like the default it 200px. CSS .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: 200px; } See article on where to place CSS code https://support.squarespace.com/hc/en-us/articles/206545567
  10. Correct. I personally would put it in the footer area and make sure the code is surrounded by <script> tags. e.g. <script> // Add JS Code Here </script>
  11. On your booking confirmation page, add the following JS code below. STEPS Add a text block with generic confirmation text. Make sure not to include any other text because our JS code will override it. Find and add the block id for the text block and add it to the BLOCK_ID variable in the JS code below. For information on how to find the block id value, see this article. Make sure to include the "block-" portion. To target a child element in the block, update the BLOCK_ID_SELECTOR. The code below looks for an <h3> inside of the block to override. If it doesn't find it, then it'll replace the entire content of the block. The CONFIRMATION_TEXT variable will be what replaces the content in the text block you created. Feel free to update that. Make sure the text remains in between the quotes. The PARAMETER_NAME variable is the name of the query parameter that gets added to the URL Once the steps above are complete, the code will append the PARAMETER_NAME value to the end of the CONFIRMATION_TEXT. (function(){ // Place the id of the text block between the quotes of BLOCK_ID. Should be "block-****". // For information on how to get the text block id, see article below, // https://www.will-myers.com/articles/what-is-a-block-id-in-squarespace-and-how-to-find-one var BLOCK_ID = ''; var BLOCK_ID_SELECTOR = 'h3'; var CONFIRMATION_TEXT = 'Thanks for your Booking, '; var PARAMETER_NAME = 'FirstName'; /************************************************************************** * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING **************************************************************************/ if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ BLOCK_ID = BLOCK_ID.replace('#', ''); var parameterValue = getParameterByName(PARAMETER_NAME); var block = document.querySelector('#' + BLOCK_ID); var blockSelector = block.querySelector(BLOCK_ID_SELECTOR); var element = blockSelector || block; if(element && parameterValue){ element.textContent = CONFIRMATION_TEXT + ' ' + parameterValue; } } function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } })()
  12. The following CSS will hide the image in mobile: @media (max-width: 767px){ /* Hide section background image under the carousel on "Home" and "How it works" pages */ .page-section[data-section-id="5fd08e73a040431536c13852"] .section-background img, .page-section[data-section-id="5fea45edb282ec468d1fbbc1"] .section-background img { display: none; } }
  13. @dnmddy Hello there! Increasing the specificity should do the trick, so try replacing the line: var elements = document.querySelectorAll('.event-time-12hr'); with var elements = document.querySelectorAll('.mega-menu-container .event-time-12hr'); This way it only target the times in the mega menu.
  14. Missing an = after the id attribute. Should be: <div id="anchor"> </div>
  15. @Triple8 Get rid of opacity: 1 !important; in the .image-caption-wrapper CSS ruleset and then increase the transition speed from 0.1s to something like 0.5s
  16. Oh ok I see the issue, the content of the mega menu is being dynamically added in using Ajax and on my end it take about 2 seconds for it to load in which is why changing that value to 5000 works. You can probably play around with that value and reduce to like 3000.
  17. @dnmddy Modified the code a bit, try this out: (function () { // Defer running the script in milliseconds. Default is 0. var DEFER_LOADING = 0; if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } if(window.MutationObserver && typeof window.MutationObserver === 'function') { var targetNode = document.querySelector('.mega-menu-container'); if(targetNode) { var config = { attributes: true, childList: true, subtree: true }; var observer = new MutationObserver(init); observer.observe(targetNode, config); } } function init() { setTimeout(function(){ var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } }, DEFER_LOADING); } })();
  18. @ChristopherBerman You can use the following code below. HTML Added a cta-button--outline class to the second button to style it different from the default, which is solid I removed the &nbsp; and used CSS margin to space the buttons apart <a class="button cta-button" href="https://www.elevated.no/priser">Se Priser</a> <a class="button cta-button cta-button--outline" href="https://www.elevated.no/tjenester">Kom i gang</a> CSS .button { border: 2px solid #2cd4d9; border-radius: 50px; background: #2cd4d9; display: inline-block; text-decoration: none; font-size: 15px; font-weight: 500; text-align: center; padding: 15px 20px; width: 103px; color: #000080 } .button:hover, .button:focus{ background: none; color: #FFF; opacity: 1 !important; transition: 0.5s !important; } /* Space buttons apart if they're next to each other */ .button + .button { margin-left: 1rem; } /* Create a class specific for buttons that are outlined */ .cta-button--outline { border: 2px solid #2cd4d9; color: white; background: none; } .cta-button--outline:hover, .cta-button--outline:focus { background: #2cd4d9; } Here's what it produces: jqtoGBvE9H.mp4
  19. You can add the following javascript code to handle this: (function () { addPolyfills(); if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var imageWrappers = document.querySelectorAll('.image-block-outer-wrapper.layout-caption-overlay-hover'); imageWrappers.forEach(function(wrapper){ wrapper.style.cursor = 'pointer'; }); delegate(document, 'click', '.image-block-outer-wrapper.layout-caption-overlay-hover', function (evt) { var link = evt.target.querySelector('a'); if (link) { link.click(); } }); } function delegate(target, eventName, selector, handler) { target.addEventListener(eventName, function (event) { if (matches(event)) { handler(event); } }); function matches(event) { const element = event.target.closest(selector); return element !== null; }; } function addPolyfills() { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function (s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(); Be sure to include the JS code in between <script> tags, e.g: <script> // Insert JS code here </script> See article on how to add JS code https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  20. @dnmddy that tells me there may be javascript code for summary blocks that may be running after the code I wrote get's ran. If that's the case, I updated the code to defer when it get's ran after a period of time. I created a DEFER_LOADING variable you can update in the code below. I set it to 500 milliseconds for now. (function () { // Defer loading in milliseconds. var DEFER_LOADING = 500; if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { setTimeout(function(){ var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } }, DEFER_LOADING); } })();
  21. @dnmddy Try adding the code to the Footer rather than the Header. See screenshot:
  22. @Carrian You'll want to add another product variant. Here's an article describing how to do that https://support.squarespace.com/hc/en-us/articles/206540687-Adding-basic-product-variants
  23. @rodri333 You can get away with this using JS, here's the code: (function () { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } } })(); Be sure to add the JS code between <script> tag, e.g. <script> // Add JS code here </script> Here's a video of me running the script using Chrome's dev console: Nx2trLElSa.mp4
  24. @veganedge It appears to be working fine. Perhaps you just needed to give the DNS settings time to update. See video below: Nn92lGvCas.mp4
  25. @Ptphotography You can add the following JavaScript and CSS below. Feel free to update the TEXT variable in the JavaScript code to whatever you want: JavaScript (function(document){ // Customize TEXT variable. var TEXT = 'Cart'; /******************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. *******************************************************************/ if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var cartInner = document.querySelector('.Cart-inner'); if(cartInner) { var qty = document.querySelector('.icon-cart-quantity'); var div = document.createElement('div'); div.setAttribute('class', 'Cart-inner-content'); div.innerHTML = TEXT; cartInner.insertBefore(div, qty); } } })(document); CSS .Cart-inner { display: flex; align-items: center; } .Cart-inner-content { text-transform: uppercase; } .icon-cart-quantity, .sqs-cart-quantity { position: static; padding: initial; font-size: 0.8rem; } .icon-cart-quantity { margin-left: 5px; position: static !important; } .sqs-cart-quantity:after { content: ')'; } .sqs-cart-quantity:before { content: '('; } .header .header-actions-action--cart a.icon { width: auto; height: auto; padding: .8rem; background-color: #eee; } .header .header-actions-action--cart svg.icon--cart { width: 25px; height: 20px; padding: 0 5px 0 0; } .header-display { /* flex-wrap: wrap; */ } .header-actions--right { /* width: 100%; */ } @media (min-width: 1180px) { .header-actions-action--cart a.icon { position: absolute; bottom: -2rem; right: 1rem; } } Be sure to add the JavaScript between <script> tags and the CSS between <style> tags, example: <style> /* Add CSS Code here */ </style> <script> // Add JS code here </script> I would use Site-wide code injection, see article https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  • Create New...