jpeter
Member-
Posts
182 -
Joined
-
Last visited
-
Days Won
1
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by jpeter
-
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; }
-
@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.
-
Navigation links on Chrome Desktop not working
jpeter replied to stevegrant's topic in Customize with code
@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. -
@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.
-
CSS help to centre logo and menu on mobile (brine)
jpeter replied to ClaireWard's topic in Customize with code
@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 -
Form Block: Conditional Logic For "Other, Please Specify."
jpeter replied to shiDMV's topic in Customize with code
@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 -
Assign random hidden value in form field for A/B testing
jpeter replied to TinyEasy's topic in Customize with code
@TinyEasy I updated the code to account for placing it in the Header or Footer.- 7 replies
-
- form
- form-block
-
(and 3 more)
Tagged with:
-
Assign random hidden value in form field for A/B testing
jpeter replied to TinyEasy's topic in Customize with code
@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.- 7 replies
-
- form
- form-block
-
(and 3 more)
Tagged with:
-
Assign random hidden value in form field for A/B testing
jpeter replied to TinyEasy's topic in Customize with code
@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.- 7 replies
-
- form
- form-block
-
(and 3 more)
Tagged with:
-
@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
-
Assign random hidden value in form field for A/B testing
jpeter replied to TinyEasy's topic in Customize with code
@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>- 7 replies
-
- form
- form-block
-
(and 3 more)
Tagged with:
-
Adding border and radius to simple list images
jpeter replied to finlettercreative's topic in Customize with code
@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; } -
@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; }
-
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
-
[Wells Template] Edit position of Main-Content block to a center
jpeter replied to Danart's topic in Customize with code
@Danart You can add margin-top: -25px; to the styles. Play with margin-top value to your liking.- 5 replies
-
- code
- wells-template
-
(and 3 more)
Tagged with:
-
[Wells Template] Edit position of Main-Content block to a center
jpeter replied to Danart's topic in Customize with code
@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- 5 replies
-
- code
- wells-template
-
(and 3 more)
Tagged with:
-
How to add accordion functionality into product description ?!
jpeter replied to ellerxyz's topic in Customize with code
@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 -
How to add accordion functionality into product description ?!
jpeter replied to ellerxyz's topic in Customize with code
@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. -
How to add accordion functionality into product description ?!
jpeter replied to ellerxyz's topic in Customize with code
@Indi Adjusting the order using CSS seemed to do the trick: .ProductItem-additional { order: 7; } -
How to add accordion functionality into product description ?!
jpeter replied to ellerxyz's topic in Customize with code
@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); } })() -
How to add accordion functionality into product description ?!
jpeter replied to ellerxyz's topic in Customize with code
@ellerxyz You can use the following CSS: .ProductItem .ProductItem-additional { order: 3; } -
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:
- 2 replies
-
- accessibility
- coding
-
(and 1 more)
Tagged with:
-
How to add accordion functionality into product description ?!
jpeter replied to ellerxyz's topic in Customize with code
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> -
Image block on mobile missing first letter
jpeter replied to tristankatz's topic in Customize with code
The following CSS appears to work: .sqs-block-image .sqs-dynamic-text { display: inline-block; } -
@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; } }
- 3 replies
-
- fallback-image
- background
-
(and 1 more)
Tagged with: