Jump to content

jpeter

Member
  • Posts

    182
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by jpeter

  1. The following CSS should work: /* Move site tagline below site title */ .site-branding { flex-direction: column; } /* Add styles to tag line */ .site-tagline { /* add space above */ margin-top: 10px; /* flex-start = align left center = center align flex-end = align right */ align-self: 'flex-start'; /* Remove the default space on the left */ margin-left: 0 !important; }
  2. @johnwelsh1987 Looks like you have a code block in the footer section of your site. So check the footer region of your site and look for that code block.
  3. @stevegrant The following CSS should resolve this issue: .header-menu-nav-folder-content .header-menu-nav-item-content { pointer-events: auto; } The pointer-events CSS property was set to none as it's value which prevented the element from being clickable. The CSS above overrides the CSS generated by the site's CSS code.
  4. @Caroline2022 Running a Google Lighthouse test on your site, looks like your images are the largest assets being loaded, followed by some JS files. A quick win would be to compress your images using a free service like https://tinyjpg.com/ and re-upload them on the site. I ran your hero background image on the home page through TinyJPG and it went from 568kb to 270kb, so a 52% savings. See attached screenshot. Squarespace uses Typekit and Google fonts for its font library and I'm not aware of a way of disabling them. If there was a way to disable certain fonts that aren't being used, then that would help in the performance area. People might have better results on non-squarespace sites because they may be able to control the amount of custom fonts loaded on a page. Doesn't look like that's the case with Squarespace. Your site appears to be loading 20 custom fonts. It may be the same font, but different weights.
  5. @ClaireWard The CSS below should do the trick leveraging the order CSS property. CSS /* Place menu on the right of logo */ .Mobile-bar-menu { order: 2 !important; } Example 95Dg68DLyc.mp4
  6. @shiDMV The javascript code below should work for you. Javascript (function(){ // The value of the "id" HTML attribute of the parent HTML element var PARENT_ID = 'select-61719a1c-6980-4b16-b86c-5a7ccff1e8e5-field'; // The value which will determine the visibility of the DEPENDENT_ID element var PARENT_VALUE = 'Other'; // The value of the "id" HTML attribute of the child HTML element. // This field will hide/show depending on the PARENT_VALUE var DEPENDENT_ID = 'text-48e31159-ed89-4857-9813-092474be4290'; /********************************************************************* * DO NOT ALTER BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING *********************************************************************/ // Initialize after the page has been loaded if (document.readyState === 'complete') { init(); } else { document.addEventListener("DOMContentLoaded", init, false); } function init() { // Load jQuery if not loaded if(!window.jQuery) { return loadJquery(init) } // Assign jQuery to a variable var $ = jQuery; // Get the parent element var $parentField = $('#' + PARENT_ID); // Get the dependent element var $dependentField = $('#'+ DEPENDENT_ID); // Hide the text field on page load $dependentField.hide(); // Show or hide the dependent field based on the PARENT_VALUE $parentField.on('change', function(evt){ if(evt.currentTarget.value == PARENT_VALUE ) { $dependentField.slideDown(); } else { $dependentField.slideUp(); } }); } function loadJquery(init) { 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); }; })() Make sure to place this between <script> tags. For example: <script> // Place JS Code Here </script> QF6rBF69qS.mp4
  7. @TinyEasy I updated the code to account for placing it in the Header or Footer.
  8. @TinyEasy I'm not seeing the code on the page, however my guess is it may have been added to the wrong spot; the Header, instead of the Footer. I would make sure you add it to the Footer when using code injection. See article https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection#footer. It's a best practice to place any javascript code in the Footer.
  9. @TinyEasy Yep! As long as the value of the MAX variable is greater than 1, it'll set random numbers between 1 and the MAX value.
  10. @Malcolm-in-SF You can add the following JS using Code Injection in the footer. The following variables are available to configure in the JS code below: INITIAL_TEXT The initial heading text that the date will be appended to DAYS_FROM_NOW The number a days from todays date DAYJS_FORMAT Uses DayJS formatting pattern to output Month Day, Year. Remove/add what you need. (function(){ // Configuration variables var INITIAL_TEXT = 'Now booking through'; var DAYS_FROM_NOW = 300; var DAYJS_FORMAT = 'MMMM DD, YYYY'; // Get the block with the ID we're targeting var block = document.querySelector('#block-yui_3_17_2_1_1643896438475_6721'); // Get the H3 element within the block var h3 = block && block.querySelector('h3'); // Load in DayJS library, https://day.js.org/, as long // as the block and the h3 exist on the page if(block && h3) { var s = document.createElement('script'); s.src = 'https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js'; s.onload = updateText; document.body.appendChild(s); } // Update content of H3. function updateText() { var d = new Date(Date.now() + DAYS_FROM_NOW * 24 * 60 * 60 * 1000); var date = dayjs(d).format(DAYJS_FORMAT); h3 && (h3.textContent = INITIAL_TEXT + ' ' + date); } })() Make sure you place the JS code between <script> tags e.g.: <script> // Place JS Code Here </script> Here's a working example: HxFedHr0ML.mp4
  11. @TinyEasy You can add the following javascript code below using Code Injection. When a user lands on the page, the code will run and add a random value of either 1 or 2 to the hidden field whose name is SQF_3FREEPLANS. Javascript (function(){ // Configuration var MAX = 2; var FIELD_NAME = 'SQF_3FREEPLANS'; // Execute code if(document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', randomizeFieldValue); } else { randomizeFieldValue(); } function randomizeFieldValue(){ var randomNumber = Math.floor(Math.random() * MAX) + 1; var hiddenField = document.querySelector('[name='+ FIELD_NAME +']'); hiddenField && (hiddenField.value = randomNumber); } })() Make sure to place the javascript code between <script> tag e.g.: <script> // Add JS Code Here </script>
  12. @finlettercreative I would try replacing your code with the following: section[data-section-id="61cf49fb170c3473f49ee9b9"] .list-item-media-inner { border: 1px solid #101820; display: block; border-radius: 16px; overflow: hidden; }
  13. @DustinWilliam You can use the following CSS to target specific items in the nav using the nth-child() property. It allows you to target the position of an item amongst its siblings. The CSS code below shows you two examples of how to apply the styles to a single item or multiple. CSS .header-nav-item { position: relative; } /* Targets a single item */ .header-nav-item:nth-child(1):after { content: '•'; position: absolute; color: #60ffed; top: -3px; right: -8px; } /* Targets multiple items */ .header-nav-item:nth-child(1):after, .header-nav-item:nth-child(3):after, .header-nav-item:nth-child(4):after { content: '•'; position: absolute; color: #60ffed; top: -3px; right: -8px; }
  14. You can use the following CSS below to add it to active links. CSS .header-nav-item--active { position: relative; } .header-nav-item--active:after { content: '•'; position: absolute; color: #60ffed; top: -3px; right: -8px; } See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site
  15. @Danart You can add margin-top: -25px; to the styles. Play with margin-top value to your liking.
  16. @Danart The following CSS seems to work: #page { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: grid; align-items: center; } See following article on how to add CSS if you don't know how https://support.squarespace.com/hc/en-us/articles/206545567#toc-add-css-code
  17. @Indi You'll insert the CSS code by doing the following: In the Home menu, click Design, then click Custom CSS. To open the editor in an expandable window, click Open in Window. The window will close if you navigate away from the Custom CSS panel. Add your code. When you're finished, click Save to publish your changes. Steps above were taken from https://support.squarespace.com/hc/en-us/articles/206545567#toc-add-css-code
  18. @ellerxyz You're welcome. There's a ton of resources out there. I've been having my son learn from codecademy's front end engineer path and he's been liking it. My go to resources when learning are google and youtube honestly. Finding a mentor helped as well and of course working on actual projects to gain experience. Lot's of failures happen before things finally begin to stick, at least for me.
  19. @Indi Adjusting the order using CSS seemed to do the trick: .ProductItem-additional { order: 7; }
  20. @ellerxyz Yeah, the original references the description. Here's some new JS code that will rely on the cart button and place the accordion above it: (function(){ var accordion = document.querySelector('.ProductItem-additional'); var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper'); if(accordion && cartButton) { // Remove accordion from current position. accordion.parentNode.removeChild(accordion); // Add accordion before the cart button. cartButton.before(accordion); } })()
  21. @ellerxyz You can use the following CSS: .ProductItem .ProductItem-additional { order: 3; }
  22. You could add the following CSS below. CSS /* Hide default "All" text */ a.category-link.root.active { visibility: hidden; position: relative; } /* Display custom text */ a.category-link.root.active:after { content: 'View All'; visibility: visible; position: absolute; left: 0; } Example:
  23. Add the following JavaScript code below to the footer using code injection. This will move the accordion code after the description. You may need to add some custom styling to adjust the spacing. JavaScript Code (function(){ var accordion = document.querySelector('.ProductItem-additional'); var description = document.querySelector('.ProductItem-details-excerpt'); if(accordion && description) { // Remove accordion from current position. accordion.parentNode.removeChild(accordion); // Add accordion after the description. description.after(accordion); } })() Make sure the JS code above is in between <script> tags, for example: <script> // Add JS Code Here </script>
  24. The following CSS appears to work: .sqs-block-image .sqs-dynamic-text { display: inline-block; }
  25. @SoundFlashFilms You can try using the following CSS: /* Hide fallback image on desktop using min-width media query */ @media (min-width: 768px) { .sqs-video-background-native__fallback-image { display: none !important; } }
×
×
  • 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.