Widle

Which font family did you use for the logo? I'll try my best to improve the image quality on my end."

There is no possibility to cancel order once order is made. So anyone have idea about this problem in squarespace ?

@ACUSOUL Can you share your website URL ?

@bjornlupo Welcome 👍

Download Watermelon fonts into your PC and follow these steps : Navigate to Custom CSS: Go to Pages > Website Tools > Custom CSS. Click on the arrow icon to add or drag your fonts. Upload and Add Font to Custom CSS: @font-face { font-family: 'Watermelon'; src: url('FONT URL'); } Replace 'FONT URL' with the actual URL of your uploaded font file. After loading your fonts, add the following code to your Custom CSS Use the Font for Selectors: Apply the font to any CSS selectors with the following code: h1 { font-family: 'Watermelon'; }

Navigate to Custom CSS: Go to Pages > Website Tools > Custom CSS. Click on the arrow icon to add or drag your fonts. Upload and Add Font to Custom CSS: After loading your fonts, add the following code to your Custom CSS: @font-face { font-family: 'MANHATTAN'; src: url('FONT URL'); } Replace 'FONT URL' with the actual URL of your uploaded font file. Use the Font for Selectors: Apply the font to any CSS selectors with the following code: h1 { font-family: 'MANHATTAN'; }

Hello @FelixCollier ok, Nice 👍 and sorry for that Thank You

sorry my bad i forgot .header .theme-col--primary { --headerBorderColor: none !important; } you can use this code I'll forgot the Dot

.logo-image .logo { line-height: 0; margin: 0; display: inline-block; max-height: 200px; } .logo-image .logo img { max-height:100%; max-width:100%; width: 1680px; }

you can use .header theme-col--primary { --headerBorderColor: none !important; } you can copy this code & paste it into website tool > custom code > paste in this block also you can (reduce padding your choice)

You can use this code to Website Tools > Custom CSS

--headerBorderColor: none !important; you this code if this code is not working you can tell, and e I can provide you with a second solution using .header theme-col--primary class

try this code

hello @FelixCollier can you provide your site link & a little bit more information about the issues

Hi, Can you share a link to the page? We can check easier

can you provide me your site url ?

Here is the code : @media only screen and (min-width: 640px){ #block-12345 { opacity: 0; transition: opacity 1s } #block-12345:hover { opacity: 1; transition: opacity 1s } } if you have any confusion check out this video https://youtu.be/llSO2AMIb3M?si=DkQKTC43sZ0_dtQX

can you try this #block-e46d08f8c549644763be { background: linear-gradient(to right, #916437, #C19255, #E8C784) !important; /* You can adjust the direction and colors of the gradient as needed */ }

Hello I need to add custom Mega Menu with Responsive in squarespace 7.1 Like this type of Mega Menu add or create in Squarespace 7.1 version I'll try to use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $('.header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(1)')) }); </script> this type of code and .header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content { width:100vw; right:0 !important; left: 0 !important; position:fixed; box-sizing:border-box; padding:0px !important; } .header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content .header-nav-folder-item { display:none; } body.sqs-is-page-editing .header-display-desktop [href="/MEGAMENUURL"] + .header-nav-folder-content { display:none; } this is a CSS Notice :: No one can Suggest Any plugin code or purchase code need only Custom HTML , CSS & JAVASCRIPT I can use already Dropdown but it's not Work in Small Devices or Mobile Devices Thank You

@SmallSitesSarah "If there are no issues, could you please provide full information about them? Can you also explain what the actual issues are?"

i try this in index blank page

Can't add two text field in squarespace 7.0 Recording 2024-06-13 163732.mp4

I can provide you a code with animation & styles @SmallSitesSarah Lead generation form <!DOCTYPE html> <html> <head> <title>Lead Generation Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #leadForm { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; transition: transform 0.5s ease-in-out; } #leadForm.fade-out { transform: scale(0.5); opacity: 0; } label { display: block; margin-top: 10px; color: #333333; } input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #28a745; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; } button:hover { background-color: #218838; } </style> </head> <body> <form id="leadForm"> <label for="petName">Pet name:</label> <input type="text" id="petName" name="petName"><br><br> <label for="gender">Gender:</label> <input type="text" id="gender" name="gender"><br><br> <label for="age">Age:</label> <input type="text" id="age" name="age"><br><br> <label for="weight">Weight:</label> <input type="text" id="weight" name="weight"><br><br> <label for="email">Your email address:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">Submit</button> </form> <script> document.getElementById('leadForm').addEventListener('submit', function(e) { e.preventDefault(); const petName = document.getElementById('petName').value; const gender = document.getElementById('gender').value; const age = document.getElementById('age').value; const weight = document.getElementById('weight').value; const email = document.getElementById('email').value; // Store data in sessionStorage sessionStorage.setItem('petName', petName); sessionStorage.setItem('gender', gender); sessionStorage.setItem('age', age); sessionStorage.setItem('weight', weight); sessionStorage.setItem('email', email); // Add fade-out animation to the form document.getElementById('leadForm').classList.add('fade-out'); // Wait for animation to finish before redirecting setTimeout(function() { window.location.href = 'checkout.html'; }, 500); // 0.5 second }); </script> </body> </html> the user is redirected to the checkout page. with auto fill <!DOCTYPE html> <html> <head> <title>Checkout Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #checkoutForm { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 20px; width: 400px; opacity: 0; animation: fadeIn 1s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } label { display: block; margin-top: 10px; color: #333333; } input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #007bff; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; } button:hover { background-color: #0056b3; } </style> </head> <body> <form id="checkoutForm"> <label for="email">Your email:</label> <input type="email" id="email" name="email"><br><br> <label for="name">Your name:</label> <input type="text" id="name" name="name"><br><br> <label for="petName">Pet name:</label> <input type="text" id="petName" name="petName"><br><br> <label for="species">Species:</label> <input type="text" id="species" name="species"><br><br> <label for="breed">Breed:</label> <input type="text" id="breed" name="breed"><br><br> <label for="gender">Gender:</label> <input type="text" id="gender" name="gender"><br><br> <label for="age">Age:</label> <input type="text" id="age" name="age"><br><br> <label for="weight">Weight:</label> <input type="text" id="weight" name="weight"><br><br> <label for="healthConcern">Your pet's health concern:</label> <input type="text" id="healthConcern" name="healthConcern"><br><br> <label for="medications">Current medications:</label> <input type="text" id="medications" name="medications"><br><br> <button type="submit">Checkout</button> </form> <script> window.onload = function() { // Retrieve data from sessionStorage document.getElementById('email').value = sessionStorage.getItem('email'); document.getElementById('petName').value = sessionStorage.getItem('petName'); document.getElementById('gender').value = sessionStorage.getItem('gender'); document.getElementById('age').value = sessionStorage.getItem('age'); document.getElementById('weight').value = sessionStorage.getItem('weight'); } </script> </body> </html>

Might be this video and plugin helps you. Plugin : https://conversiontracking.io/shop/p/currency-converter-plugin-for-squarespace-71 Video : https://youtu.be/jF1R7-IKdG0?si=hRqXG4geO75vz7QY

<style> .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert=’1′); } </style> Where to add the code: Home Page Settings >> Advance