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

jpeter

Member
  • Posts

    79
  • Joined

  • Last visited

Community Answers

  1. jpeter's post in Changing wording of the "Back to All Events" link on an event view and the URL it goes to. was marked as the answer   
    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>  
  2. jpeter's post in Increase social media icons in mobile menu was marked as the answer   
    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
  3. jpeter's post in Need help with a button code was marked as the answer   
    @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
  4. jpeter's post in SOLVED: Move the Add to Cart Button above the product descriptions was marked as the answer   
    You can add the following CSS:
    @media screen and (min-width: 768px ) { .ProductItem-details .ProductItem-details-checkout { display: flex; } }  
  5. jpeter's post in Header fixed & transparent only on home 1st gallery was marked as the answer   
    @Paul_in You could add the JS and CSS below. What it does is dynamically add a data-dynamic-bg attribute to the .Header element whose value is based on the id you add to the IDS variable. Update the IDS variable in the JS code by adding the id's of the sections you want the background color to change: 
    JS:
    (function (document) { /************************************************************************** * This code will add a "data-dynamic-bg" attribute to the .Header element * if it's over a section defined in the array of IDS. ***************************************************************************/ // Array of HTML element ID's. var IDS = [ '#landing-01', '#landing-06', ]; /************************************************************************** * DO NOT EDIT CODE BELOW, unless you know what your doing. ***************************************************************************/ // Initialized code depending on if the user places it in the header or footer if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var header, section, headerHeight, rect, setBackground, removeBackground, timeout; addClosestPolyfill(); if(isMobile()) { header = document.querySelector('.Mobile-bar'); } else { header = document.querySelector('.Header'); } addDynamicBg(); delegate(document, 'click', '.Header a', function(){ setTimeout(function(){ setBackground = false; removeBackground = true; header.setAttribute('data-dynamic-bg', ''); addDynamicBg(); }, 500); }); window.addEventListener('resize', debounce(function(){ if(isMobile()) { header = document.querySelector('.Mobile-bar'); } else { header = document.querySelector('.Header'); } addDynamicBg(); setBackground = false; removeBackground = false; }, 250)); window.addEventListener('scroll',function(){ // If there's a timer, cancel it if (timeout) { window.cancelAnimationFrame(timeout); } // Setup the new requestAnimationFrame() timeout = window.requestAnimationFrame(addDynamicBg); }); function addDynamicBg(){ IDS.forEach(function(id){ section = document.querySelector(id); // Exit if not section found if(!section) return; rect = section.getBoundingClientRect(); headerHeight = header.offsetHeight; if(!setBackground && rect.top <= headerHeight && Math.abs(rect.top) < rect.height) { setBackground = true; removeBackground = false; header.setAttribute('data-dynamic-bg', id); } if(!removeBackground && rect.top <= headerHeight && Math.abs(rect.top) > rect.height) { setBackground = false; removeBackground = true; header.setAttribute('data-dynamic-bg', ''); } }); } } function isMobile() { return window.matchMedia('(max-width: 1080px)').matches; } function debounce(func) { var wait = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1]; var timeout = void 0; return function () { var _this = this; for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } clearTimeout(timeout); timeout = setTimeout(function () { func.apply(_this, args); }, wait); }; } 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 addClosestPolyfill() { 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; }; } } })(document); CSS:
    /* Smoothly transition the background colors */ [data-dynamic-bg]{ transition: all .2s; } /* Target the section with the id of #home-01 */ [data-dynamic-bg="#home-01"] { background-color: blue !important; } /* Target the section with the id of #landing-06 */ [data-dynamic-bg="#landing-06"] { background-color: green !important; } Here's an example of how it works:

    5Q6vcdsrbR.mp4
  6. jpeter's post in Image Hover Overlay Text - tweak needed was marked as the answer   
    Add the following styles to override the .image-caption-wrapper:
    .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper { max-height: 100%; }  

  7. jpeter's post in Switch Between Images By Clicking Text? was marked as the answer   
    @nicolemeza You could use the following JS below. You'll need to make sure you enable thumbnails on your slideshow gallery because the JS code relies on them being there. The text that is used is based on the alt text of the thumbail images.
    You can update the config.position to be "top" or "bottom" to position the links above or below the slideshow and the config.hideThumbails to true or false to hide or show the thumbnails:
    javascript
    (function () { /********************************************************************************** * REQUIREMENTS * - This code will only be ran if there's a Slideshow Gallery Block on the page * - This code SHOULD have thumbnails enabled. You can hide them using the * config defined below **********************************************************************************/ /********************************************************************************** * CONFIGURATION **********************************************************************************/ var config = {}; // DO NOT DELETE // Choose "top" or "bottom" config.position = 'top'; // Choose true or false config.hideThumbnails = false; // Customize the class name of the container that wraps the links config.containerClass = 'sqs-gallery-thumbnail-links'; // Customize the class name of the links themselves config.linkClass = 'sqs-gallery-thumbnail-link'; // Customize the active class name that gets added to the link config.activeClass = 'sqs-active-slide'; /********************************************************************************** * DO NOT MODIFY the code below unless you know what you're doing. **********************************************************************************/ // Initialize code depending on if the DOM has been fully loaded or not. if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ addPolyfills(); var galleryBlocks = document.querySelectorAll('.gallery-block'); var thumbnailLinksPosition, thumbnails, div, html, altText, id; // Exit if there are no gallery blocks on the page. if(!galleryBlocks) return; galleryBlocks.forEach(function(gallery){ var slideshow = gallery.querySelector('.sqs-gallery-block-slideshow.sqs-gallery-has-thumbnails'); // Exit if the gallery is not a slidshow and does not have thumbnails if(!slideshow) return; thumbnailContainer = gallery.querySelector('.sqs-gallery-thumbnails'); thumbnails = gallery.querySelectorAll('.sqs-gallery-thumbnails img'); // Create div container that links will go in. div = document.createElement('div'); div.setAttribute('class', config.containerClass); addClass(div, config.containerClass); addClass(div, 'position--' + config.position); html = ''; // Loop over each thumbnail and create a link based on it's alt text thumbnails.forEach(function(thumbnail, index){ altText = thumbnail.getAttribute('alt'); id = thumbnail.getAttribute('id'); var classes = [ config.linkClass, index == 0 ? config.activeClass : '' ].join(' '); if(altText){ html += '<a class="' + classes +'" href="#' + id + '">' + altText + '</a>'; } }); // Add html to div container div.innerHTML = html; // Figure out the position to use for the Element.insertAdjacentElement // method based based on config. switch(config.position) { case 'top': thumbnailLinksPosition = 'afterbegin'; break; case 'bottom': thumbnailLinksPosition = 'beforeend'; break } // Add thumbnails to top or bottom based on config. gallery.insertAdjacentElement(thumbnailLinksPosition, div); // Hide thumbnails based on config. if(config.hideThumbnails) { thumbnailContainer.style.display = 'none'; } // Options for the observer (which mutations to observe) var options = { attributes: true, subtree: true }; // Create an observer instance linked to the callback function var observer = new MutationObserver(function () { var activeSlide = thumbnailContainer.querySelector('.sqs-active-slide'); var id = activeSlide.getAttribute('id'); var links = gallery.querySelectorAll('.' + config.containerClass + ' .' + config.linkClass); links.forEach(function(link){ removeClass(link, config.activeClass); }); var link = gallery.querySelector('.'+config.linkClass + '[href="#'+ id +'"]'); addClass(link, config.activeClass); }); // Start observing the target node for configured mutations observer.observe(thumbnailContainer, options); }); // Use Event delegation for all of the links that are going to be clicked delegate(document, 'click', '.sqs-gallery-thumbnail-link', function (event) { event.preventDefault(); var link = event.target; var id = link.getAttribute('href'); link.parentElement.querySelectorAll('.sqs-gallery-thumbnail-link').forEach(function(el){ removeClass(el, config.activeClass); }); addClass(link, config.activeClass); document.querySelector(id).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 hasClass(el, className) { return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className); } function addClass(el, className) { if (el.classList) el.classList.add(className); else if (!hasClass(el, className)) el.className += ' ' + className; } function removeClass(el, className) { if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), ''); } function addPolyfills() { nodeListForEachPolyfill(); closestPolyfill(); } function nodeListForEachPolyfill() { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } } function closestPolyfill() { 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 above in between <script> tags:
     
    <script> // Add JS Code Here </script> Then add CSS:
    .sqs-gallery-thumbnail-links { text-align: center; } .sqs-gallery-thumbnail-links.position--top { margin-bottom: 2rem; } .sqs-gallery-thumbnail-link { font-size: 1.3rem; margin-left: 1rem; margin-right: 1rem; margin-top: 1rem; display: inline-block; } .sqs-gallery-thumbnail-link.sqs-active-slide { color: red; } Working example:
     

    eWQKtvxPto.mp4
  8. jpeter's post in Change mobile navigation in 7.1 was marked as the answer   
    Adding the following CSS should put you in a good spot:
    /* Mobile nav styles */ @media (max-width: 799px){ /* Make the sub menu and container that contains the icons spaced apart into a column */ .header--menu-open .header-menu .header-menu-nav-list { display: flex; flex-direction: column; justify-content: space-between; } /* Override default properties to bring the sub menu into view */ .header-menu-nav-folder { position: relative; transform: translateX(0); min-height: auto; } /* Reduce the font size and adjust the space between the lines */ .header-menu-nav-folder a { font-size: 2.1rem; line-height: 1; } /* Override the default `position` and `min-height` properties of the main menu container that also contains the icons and place it below the sub menu using the `order` property. */ .header-menu-nav-folder[data-folder="root"] { position: relative; min-height: auto; order: 2; } /* Hide the container of the main menu */ .header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content { display: none; } /* Hide the back button */ .header-menu-controls-control[data-action="back"] { display: none; } } See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  9. jpeter's post in Contact Form - Change "Submitting" Validation Text was marked as the answer   
    You can add this JS, replace the value of the submittingText variable with with your own:
     
    (function () { // Text to add when form is submitting. var submittingText = 'SUBMITTING!!'; // Select the node that will be observed for mutations var form = document.querySelector('form'); var submitButton = form.querySelector('input[type="submit"]'); var submitText = submitButton.value; // Options for the observer (which mutations to observe) var config = { attributes: true }; // Create an observer instance linked to the callback function var observer = new MutationObserver(function () { // Check to see if the form has a `submitting` class. var isSubmitting = form.classList.contains('submitting'); // Toggle betweeen the default submit text and the submitting text. if (isSubmitting) { submitButton.value = submittingText; } else { submitButton.value = submitText; } }); // Start observing the target node for configured mutations observer.observe(form, config); })();  
  10. jpeter's post in Reduce top/bottom padding on a portfolio page? was marked as the answer   
    Looks like the min-height CSS property on the .portfolio-hover and .portfolio-hover-display classes is the culprit. You can fix it by adding custom CSS:
    .portfolio-hover { position: absolute; width: 100%; }  
×
×
  • Create New...