Jump to content

Lesum

Circle Member
  • Posts

    1,186
  • Joined

  • Last visited

  • Days Won

    14

Community Answers

  1. Lesum's post in Brine 7.0 Blog Page & Categories was marked as the answer   
    @amuzz Hi! The blog page can definitely be made to look like the example you shared, both on Squarespace 7.0 and 7.1. All the content blocks can be added using the Summary Block (for the grid layout), the Image Block (for the featured post section), and the Archive Block (for the categories bar). With custom CSS, it can be styled to look like the example site. However, writing all this code without access to your site is a bit difficult.
  2. Lesum's post in CHANGE SIZE OF TESTIMONAL SECTION TITLE **MOBILE VIEW** was marked as the answer   
    @IwanJJ Hi! You can add this code in Website > Pages > Website Tools > Custom CSS
    @media screen and (min-width: 767px) { section[data-section-id="6686bdde57b3951273918d1e"] .list-section-title p { font-size: 2rem !important; } }  
  3. Lesum's post in Replacing Background video with an image on mobile was marked as the answer   
    @Mofoxdesign Sure thing! You can update the previous code I shared to the following:
    @media screen and (max-width: 767px) { section[data-section-id="66967f6c4958591ff334c52c"] .section-background video { opacity:0 !important } section[data-section-id="66967f6c4958591ff334c52c"] .section-background img { opacity: 0 !important } section[data-section-id="66967f6c4958591ff334c52c"] .section-background { background-image: url("your-image-url"); background-size: cover; background-position: center; background-repeat: no-repeat; } }  
  4. Lesum's post in Customize Checkout Button with Hover & Alignment was marked as the answer   
    @leena Hi! You can try adding this code in Website > pages > Website Tools > Custom CSS
    // add spacing below cart title div#sqs-cart-container .cart-title { margin-bottom: 40px; } #cart [aria-label="Checkout"] { font-size: 0 !important; } #cart .cart-checkout { border: 1px solid #f0f; } //button hover #cart .cart-checkout:hover .cart-checkout-button:after { color: #fff; }  
  5. Lesum's post in Create a banner effect on logo in navigation? was marked as the answer   
    @hg3designs Hi there! To achieve the effect of the header logo overlapping the section banner, similar to what you described, you can add this code in Website > Pages > Website Tools > Custom CSS.
    @media screen and (min-width: 1025px) { header#header { background: transparent !important; } #header .header-announcement-bar-wrapper { padding-bottom: 0 !important; background: #fff !important; margin-top: -50px; } .header-display-desktop { margin-bottom: -50px !important; } .header-title-logo { margin-top: 25px; } .header-title { margin-top: 25px; } }  
  6. Lesum's post in Customize fonts in forms was marked as the answer   
    @Lorena1223 Hi! You can add this code in Custom CSS to change the font to your custom font
    .form-wrapper .react-form-contents .field-list .caption-text { font-family: 'EssentialSans-Regular' !important; } input::placeholder, textarea::placeholder, select::placeholder { font-family: 'EssentialSans-Regular' !important; }  
  7. Lesum's post in Changing inline text on an auto timer was marked as the answer   
    @sarahrab Hi! I just created this solution based on what you described:
    First add the following body text inside a code block:
    <p id="auto-changing-text">With a proven track record of financial and strategic returns across two funds and 28 companies, Allumia Ventures is your partner in <span id="auto-change-word">innovation</span>.</p> Then add the following code in Website > Pages > Website Tools > Code Injection > Header
    <script> const words = ["innovation", "second text", "third text"]; let index = 0; function changeWord() { index = (index + 1) % words.length; document.getElementById("auto-change-word").innerText = words[index]; } setInterval(changeWord, 2000); </script> Inside this line of code add the words, I added the first word "innovation"
    const words = ["innovation", "second text", "third text"]; Let me know how it goes. Thank you!
  8. Lesum's post in Need to create a product page with CSS without affecting other pages was marked as the answer   
    @Thumbcandy Hi! To display the "Buy Print" text linked to "issuu.com" after the Product title, please add the following code in your website's Code Injection section under Website > Pages > Website Tools > Code Injection > Header.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function() { var buyPrint = $('<h3 class="buy-print"><a href="https://issuu.com/" target="_blank">Buy Print</a></h3>'); $('#item-665a0364c21de205c5622495 .ProductItem-details .ProductItem-details-title').after(buyPrint); }); </script> <style> #item-665a0364c21de205c5622495 .ProductItem-details .buy-print { order: 2 !important; } </style>  
  9. Lesum's post in Remove active page underline link in drop down menu? was marked as the answer   
    @greta Hi! To remove the underline from active pages in the dropdown folder, you can add this code is Website > Pages > Website Tools > Custom CSS
    #header .header-nav-folder-item--active .header-nav-folder-item-content { background-image: none !important; }  
  10. Lesum's post in Left align all texts for mobile view only was marked as the answer   
    @IACreatives To align all texts to the left on mobile view, you can add this code is Website > Pages > Website Tools > Custom CSS
    @media screen and (max-width: 767px) { body, p, h1, h2, h3, h4, h5, h6, a, span { text-align: left !important; } }  
  11. Lesum's post in Remove text box hover overlay on mobile view was marked as the answer   
    @julalberts5 Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to hide the colored text boxes on image hover:
    @media screen and (max-width: 767px) { section[data-section-id="65e7aee2ef5439016b8aaa76"] .fe-block:has(h1) { display: none !important; } }  
  12. Lesum's post in Lesson pages Logo was marked as the answer   
    @ElliotS Your logo has been set up using custom code. If you add the header logo image in your Squarespace site editor, you can use the code from the first option to change the logo to black when the page is white. The code options below can be applied to all other pages, including the lessons page.
    First option: First, add your logo image in the header, remove or disable any existing custom code related to the logo, and then add this code in Website > Pages > Website Tools > Custom CSS. This option involves using less code.
    #item-6692fc9ad71fc366cb084189 { .header-title-logo img { filter: brightness(0) invert(1); } } Second Option: Add your header logo image using custom code, which is your current approach. Add this code in Website > Pages > Website Tools > Custom CSS
    #item-6692fc9ad71fc366cb084189 { div.header-title-logo a { content: url('add-your-image-url-here') !important; max-width: 290px; margin-left: auto; margin-right: auto; } } In both options, you need to add the page ID for the page where you want to use a different logo. For other pages where you want to change the logo, simply add the page ID to the code options, followed by a comma. In both code blocks above, I used the page ID #item-6692fc9ad71fc366cb084189 of the first lessons page.
    You might find this tool useful for locating the page ID: Squarespace ID Finder
    Hope that helps.
  13. Lesum's post in Company on two lines with different colors was marked as the answer   
    @arodz Hi! To move the logo to the right, you can add this code inside at the end of the <style></style> tag
    .header-title-logo, .header-display-mobile .header-mobile-logo { flex-direction: row-reverse; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; float: left; }  
  14. Lesum's post in How to add a URL link to a gallery image was marked as the answer   
    @Amywhorlow You can add this code in Website > Pages > Website Tools > Code Injection > Header
    <script> document.addEventListener('DOMContentLoaded', function() { // add section ID here var section = document.querySelector('section[data-section-id="668e88d1244c2a1a36c14af8"]'); if (section) { var link = document.createElement('a'); // add page link here link.href = 'https://amywhorlowdesign.squarespace.com/new-page'; section.parentNode.insertBefore(link, section); link.appendChild(section); } }); </script> If you want to add this code to another section, simply copy and paste the code, then update the section ID and URL.
  15. Lesum's post in Moving 'Add to Cart' button on product pages - Mobile view only was marked as the answer   
    @RJ29 You can add this code in Website > Pages > Website Tools > Custom CSS
    @media screen and (max-width: 767px) { #pdp .ProductItem-details .ProductItem-product-price { margin-bottom: 0 !important; } #pdp .ProductItem-details .ProductItem-product-price .product-price { margin-bottom: 0 !important; } }  
  16. Lesum's post in Alternating Blog on Mobile - How to Expand Text Width? was marked as the answer   
    @ellen_b You can add this code in Website > Pages > Website Tools > Custom CSS
    @media screen and (max-width: 767px) { .collection-type-blog-alternating-side-by-side .blog-alternating-side-by-side .blog-item-text { width: 100% !important; } }
  17. Lesum's post in Remove space and center text on dropdown menu was marked as the answer   
    @jasondane You can add this code in Website > Pages > Website Tools > Custom CSS
    #header .header-nav-folder-content { text-align: center !important; min-width: fit-content !important; } #header .header-nav-folder-item a { display: inline-block !important; text-align: center !important; } #header .header-nav-folder-item .header-nav-folder-item-content { display: inline-block !important; }  
  18. Lesum's post in Help with Spacing? was marked as the answer   
    It's nothing weird. You made some mistake while adding code. From the screenshot, I can't see the entire code you've added. Try adding a closing bracket } after line 910. If it still doesn't work, you need to give someone access to your site. Going back and forth like this unfortunately won't solve the problem. 
  19. Lesum's post in Adding Hover Effect: Image Transparency and Text Box Visibility was marked as the answer   
    @Qvonto Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to create the hover effect you mentioned.
    section[data-section-id="668fc843777974502a3cacfe"] .list-item-media { transition: opacity 0.3s ease-in-out; } section[data-section-id="668fc843777974502a3cacfe"] .list-item-content__description { opacity: 0; transition: opacity 0.3s ease-in-out; } section[data-section-id="668fc843777974502a3cacfe"] .list-item:hover .list-item-media { opacity: 0.7; } section[data-section-id="668fc843777974502a3cacfe"] .list-item:hover .list-item-content__description { opacity: 1; } However, I noticed that when you initially hide the text below the features/feature description, it creates a large empty space between the rows. To reduce the space between the rows, you can add this code:"
    section[data-section-id="668fc843777974502a3cacfe"] .user-items-list-simple { row-gap: 10px !important; } Hope that helps.
  20. Lesum's post in Fixed Nav Issues - CSS or Javascript Interference? was marked as the answer   
    @mrb317 Hi! Add this code in Website > Pages > Website Tools > Custom CSS
    #header { z-index: 1000 !important; }  
  21. Lesum's post in Sign Up Form is too wide on footer on mobile. v 7.0 was marked as the answer   
    @buchananfl Hi! You can add this code in Website > Pages > Website Tools > Custom CSS
    @media screen and (max-width: 767px) { #collection-663542756d1c4c60640a00ba .form-wrapper { padding: 0 20px; } #collection-663542756d1c4c60640a00ba .form-item.fields.name { display: flex !important; flex-direction: column; } #collection-663542756d1c4c60640a00ba .form-item.fields.name .first-name, #collection-663542756d1c4c60640a00ba .form-item.fields.name .last-name { width: 100% !important; } }  
  22. Lesum's post in Wrap grid of related products on mobile was marked as the answer   
    @specialdale Hi! You can add the add this code in Website > Pages > Website Tools > Custom CSS, to address the issue and wrap all the related products in the same row:
    @media only screen and (max-width: 1024px) { #pdp .ProductItem-relatedProducts .list-grid { grid-template-columns: 1fr 1fr 1fr 1fr !important; grid-column-gap: 10px !important; grid-row-gap: 10px !important; } }  
  23. Lesum's post in Mobile Menu - keep header divider when navigation is open was marked as the answer   
    @nahlah Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to display the border when header menu is open:
    .header--menu-open .header-announcement-bar-wrapper { border-bottom: 1px solid !important; }  
  24. Lesum's post in Add a button to a link in the navigation without affecting dropdown menus in 7.0 was marked as the answer   
    @buchananfl Did you delete this code first?
    .Header-nav a:last-child { background: #36c; color: #fff !important; padding: .9rem 1.4rem !important; } This block of code is still on your site. 
  25. Lesum's post in Add Outline Around List Section Images was marked as the answer   
    @ellen_b Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to create a 1px outline around the images in the list section carousel.
    section[data-section-id="668bdfc019b7cd389380c055"] .user-items-list-carousel__media-inner { border: 1px solid; }  
×
×
  • 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.