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

jpeter

Member
  • Content Count

    79
  • 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.integr
  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.inne
  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
  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
  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;
  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.querySelect
  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.addEventListe
  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'); });
  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(){
×
×
  • Create New...