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


Popular Content

Showing content with the highest reputation since 06/25/2020 in all areas

  1. 3 points
    OHHHH. I think I see the issue. You might have put some of the CSS in the code injection block. So delete both codes from above replace with this (code injection) <script> window.Squarespace.onInitialize(Y, function() { $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer'); $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').click(function() { if ($(this).nextUntil('h3').is(':hidden')) { $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').removeClass('ui-open'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed'); $(this).nextUntil('h3').slideDown(); $(this).toggleClass('ui-closed ui-open'); } else { $(this).nextUntil('h3').slideUp(); $(this).toggleClass('ui-closed ui-open'); } }); }); </script> Then add this to Design -> Custom CSS .markdown-block p { margin-left: 1em; } .markdown-block .ui-closed:before { font-family: monospace; content: "+ "; color: #2DA9C6; } .markdown-block .ui-open:before { font-family: monospace; content: "- "; color: #2DA9C6; }
  2. 2 points
    Worked a charm, thank you!
  3. 2 points
    Add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1588737720160_6409 .sqs-gallery-design-strip-slide { cursor: context-menu; }
  4. 2 points

    Mobile Background Size

    Make sure you put the code in the code injection section of the home page. Not in the site wide code injection area.
  5. 2 points
    $('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html(''); This jQuery would do it, but personal accounts don't allow code injection.
  6. 2 points

    Rounded edges image cards

    Just perfect @paul2009 and great for me to learn too. Thank you so much.
  7. 2 points

    Rounded edges image cards

    You should be able to do this with a little more CSS 🙂. For example: @media only screen and (max-width: 767px) { .view-item.collection-type-blog.collection-5eefe73c2814402a19db9172 .sqs-block-image img { max-width: 70%; margin-left: 5%; } } Explanation: The first line is a media query that prevents it from applying unless the "viewport" (the screen width) is less than 768 pixels. I set the maximum width of the image to 70%, but you can change this to suit your needs. I added a left margin of 5% to align the image with the text on the mobile page, because images are normally shown full width on mobile devices.
  8. 2 points
    Add to Home > Design > custom CSS .cart-title { visibility: hidden; } .cart-title:before { visibility: visible; content: "New text"; }
  9. 2 points

    Shopping Cart Size

    .floating-cart .icon { width: 50px; height: 50px; } .floating-cart { border: 2px solid; border-radius: 10px; } Size bump and optional border
  10. 2 points

    Banner Slide Show

    [data-section-id="5ef3f133ec071a338d9df3b8"] { max-height: 100vh !important; padding-top: 0px !important; }
  11. 2 points
    Todd, this actually looks better. A little combination of both of our codes....plus a little more. You will have to remove the other code you just added. .header-nav-folder-content { padding-top: 2px !important; padding-bottom: 2px !important; } .header-nav-folder-content > * { padding-bottom: 8px; padding-top: 8px; } .header-nav-folder-content > * + * { border-top: 1px solid rgba(0,0,0,.1); }
  12. 2 points

    Coding - Wedsite logo

    Custom CSS, nothing else needed!
  13. 2 points

    Improve Search Engine like Google

    Add to Home > Design > Custom CSS @media screen and (min-width:641px) { .sqs-search-container-list>.search-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }
  14. 2 points
    Why are normal and basic e-commerce store features missing? (The elephant in the room?) Here's a list of complaints I have. My basic question is why isn't Squarespace trying to offer features to seriously compete with Shopify and others to expand their business? Why are the following missing? There's no option to sort/filter products by tags, availabilty, sales, color, or anything else. There's no built in option for product reviews. You can't expect everyone to figure out coding and troubleshooting every single time they want a basic, ubiquitous store feature. There's no ability to add all products to a single page. Likewise, there's no ability to add all sale products on a single page to show a "clearance" section. There's a limit to adding more than 200 products on a single collection, meaning you have to make new collections for each category. Why jump through hoops to invest in expanding your product offerings? Why not just a single collection like any normal store??? There's a consistent value for design in Squarespace which is what attracts any sensible person, but why are there consistent shoddy designs??? A built-in inability redesign the Search page, the Checkout page, the account page, the login page, etc etc. Why are functionality updates not easy? Why the crazy hassle to go from 7.0 to 7.1? Why can't I easily get new features and be confident for my business investments? Why do popular features have to disappear when there is an update even then? For example, parallax is gone with the update. Other normal store features that should be standard to ease merchant usage are missing also. Product color to image linking, liking products. Why is the functionality of different themes restricted instead of simply design? I'm reading 7.1 fixed this, but the point still stands. Why not just have a simple flexible design language where everyone can have every feature and not have to go through the hours of work required to apply new themes Why all the rigidity?? Why can't I edit a gallery's transition settings when directly in an index, but only in a gallery block? Why no limit on how many product's per page?? Isn't that normal? Why is there no built in return/exchange mechanism? Why do you make us pay for basic store features??? Why is Shopify automating basic calculations like adding statebystate tax information, and you guys are making us do it manually or pay for it? This is crazy. Also why not integrate live shipping costs from different shipping services by weight, etc. Why do these basic basic features need to be such a hassle. Why no drop shipping integrations?? Is that like a crazy thing to ask for? Why no integrations to Printful competitors. Please start investing more in your ecommerce side. Integrations are lacking, features are lacking, Please compete with shopify. You guys are just ASKING us to migrate elsewhere. Its constantly frustrating to encounter squarespace limitations and dragging, cloggy updates. I'm sure there's many more basic features that are missing. These are just the ones I've been facing.
  15. 1 point
    It works Rwp! Thank you so much!😀
  16. 1 point
    I see underline hover works here? Dell laptop/Chrome With mobile, add this to Home > Design > Custom CSS .header-menu-nav-item a { display: inline-block; }
  17. 1 point
    Hi Tuanphan, After a few tweaks, the below is the code that worked:) Thanks for the help @media screen and (max-width:900px) { h1.logo.site-title a { font-size: 25px !important; } }
  18. 1 point
    Site URL: https://www.kwinmosby.com/blog/coronavirus-effect-impact-on-travelers-of-color I have a blog on my personal website and would like to add a social share bar to each blog post. Has anyone used customized code that has worked really well with Squarespace? I would like to allow readers/users the ability to share a blog post on social platforms such as Facebook, Twitter, LinkedIn, etc. Any help would be greatly appreciated. I've added an example of one of my blog posts that I would like to add a social share bar.
  19. 1 point
    @AbbyGoodson I just check really quickly, it looks the the code above will work for you too, let me know if it doesn't work right. See my signature for how to use this code. Here's some CSS that we need to add: nav.index-next { display: inline-flex !important; margin-top: auto !important; } .index-next .link-next-up { padding-right: 25px; } And some jQuery window.Squarespace.onInitialize(Y, function () { var NextLink = $('a.active-link'); var PrevLink = $(NextLink).prev('a'); var PrevSpan = $(PrevLink).children('span').first(); $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up'); $(PrevSpan).attr('data-next-link', 'PREV'); });
  20. 1 point

    Resize Gallery for Mobile

    Perfect! This worked - thank you so much! 🙂
  21. 1 point
    Site URL: https://www.bottlerocketrecording.co.uk/ Hi @tuanphan, @RyanDejaegher, @paul2009, @bangank36, @christyprice I've recently redesigned my site – transferring from Pacific to Brine. I'm pretty much there now apart from some frustrating glitches on mobile view, as explained below. On mobile: The header at the top keeps mysteriously adding 8px + worth of padding to the top and bottom which is contributing to – if not wholly – causing it to obscure my section headings when using index scrolling from the hamburger menu. I've isolated the .mobile bar section and removed 8px with CSS but if you compare it to the desktop view there is clearly still more white space added around my branding box. Cosmetically – I'd obviously rather it were thinner but it's not that big a deal, but I do need it not to obscure my headings during scrolling, so it has to be fixed one way or another. On Mobile, BLOG PAGE: There is another mystery white space between the "Notes from the Studio" intro Banner and the nav/branding bar at the top. I've tried reducing padding to that area using CSS and site styles. In most cases just causes the "notes from the Studio" banner to be chopped into. I've also tried that banner image in a number of different shapes and sizes and always get the same issue. Furthermore there have been many occasions where I seem to have fixed it – I go to my mobile device immediately after editing and it displays perfectly as as it should. Then then on reloading the page – the white space jumps back – almost saying "WAIT, I'M STILL HERE!, pushing the banner down again. This has been incredibly frustrating, especially when resizing and adjusting the padding to the "notes from ..." image block. In the section editor, Squarespace will show that I've solved the problem – everything looks fine – and then I open it on my actual phone and the white space is either still there or I've chopped the top or bottom off my banner. My only conclusion is there must be some rogue code somewhere that's over-riding everything or even a ghost block that can't be deleted that is pushing things to flow around it. Hoping someone can shed some light! Thanks!
  22. 1 point
    Hi, Did you add the script into individual pages in the main navigation Advanced->Custom Code
  23. 1 point

    Different color for title and blog content

    Try this, its acting a bit weird on my end, but sometimes it works when the code is actually in place. .blog-basic-grid.collection-content-wrapper { background-color: tan; margin-left: 0px !important; margin-right: 0px !important; } .blog-basic-grid--container.entry.blog-item.is-loaded { padding-left: 4vw; padding-right: 4vw; }
  24. 1 point
    Site URL: https://www.simonocarrigan.com.au/shop/never-forget Hi, I’m adding products to my shop, and having problem with the UI disappearing on mobile and/or when the page is viewed in a narrow browser window. The example page to refer to is: https://www.simonocarrigan.com.au/shop/never-forget Viewed on desktop, the seven product images display as clickable thumbnails beneath the image. Viewed on mobile, there are no thumbnails, and also no arrows or much of anything to indicate the images can be slid across. If you squint, you can make out a very faint “1/7” indicator on the first image to load, but there is no cue to the user that they should slide the image with their finger. I can't work out how to change the styling of that overlay to make it more prominent. Further, when you do slide you must be *exactly* horizontal, or your mobile browser will just scroll the whole page up or down, or even navigate forward or back on webpages. Can I just have the thumbnails display on mobile? Or a caption that says “1/7 - swipe” “3/7 - swipe” etc.? I can only find one relevant article on the forums: https://forum.squarespace.com/topic/155802-product-carousel-arrows-get-lost-on-mobile/#comment-345574 which discussed the same problem, with no solution. Can this be logged as a feature request and/or can someone send me info on how to do a work around? Thanks, Simon
  25. 1 point

    Save image

    Try this guide.
  26. 1 point
    Add to Home > Design > Custom CSS a.Mobile-bar-branding { margin-top: 20px; }
  27. 1 point

    letter superscript

    Markdown Blocks are more useful than Code Blocks, because you can continue to format your text with a Markdown Block, like you would in an ordinary Text Block. To add an H1 title, you just type # and the name of your title. To add an H2 title, you just type ## and the name of your title. To add an H3 title, you just type ### and the name of your title, and so on. Instead of using a combination of Text Blocks and Markdown Blocks, you could use a single Markdown Block for all the text, or at least all the text between other Blocks such as images. As an example, here's an extract of your page as it is now: Here's the same extract, with all the text added to a single Markdown Block: You'll see that because the text is all in one block, there aren't additional spaces above and below the first paragraph. I hope this makes sense 🙂
  28. 1 point
    You cannot add the PDF file itself, but you can add a link to the email so that when a customer clicks it, the PDF will download from your site and be shown. To do this, follow the Uploading and managing files guide to add the PDF file to your site. Once added to your site, you will have a URL. Make a note of this. Next, go to Commerce > Customer Notifications > Order Emails and edit the relevant email. Add some HTML text like this for each PDF link: <a href="https://www.sitename.com/s/terms.pdf">View Terms</a> Change 'https://www.sitename.com/s/terms.pdf' to match the correct link to your PDF, and change 'View Terms' according to your needs. When you have saved your changes, you should be able to send a test email by clicking the SEND TEST EMAIL button further down the panel.
  29. 1 point

    Rounded edges image cards

    thank you so much @paul2009 this worked perfectly. I hope other forum members find this useful. 🙂
  30. 1 point
    Very nice. Good use of the Brine template family.
  31. 1 point

    Banner Slide Show

    [data-section-id="5ef3f133ec071a338d9df3b8"] { max-height: 100vh !important; padding-top: 0px !important; } Change the code from that one to this one [data-section-id="5ef3f133ec071a338d9df3b8"] { min-height: 100vh !important; padding-top: 0px !important; } That should do it.
  32. 1 point

    Adding a custom button in a text box

    You can add Text Link "Learn more", then we can give the code to turn link to button.
  33. 1 point

    Adding Dividers to Drop-Down Menu with CSS

    .header-nav-folder-content > * { padding-bottom: 8px; } That should add the padding. I removed the other code I posted before, I thought you were talking about the mobile menu at first.
  34. 1 point

    Coding - Wedsite logo

    .Header-branding-logo { filter: invert(1); } img.Mobile-bar-branding-logo { filter: invert(1); } #collection-57d6c581f5e23170b59ec7e3 .Header-branding-logo { filter: invert(0) !important; } Looking at your page more, I think its actually better for you to globally invert the image, and then just invert it back for the home page. Good call on the mobile @tuanphan
  35. 1 point

    Coding - Wedsite logo

    If you use Business Plan, you can also add this to Page Settings > Advanced > Header <style> .Header-branding-logo { filter: invert(1); } img.Mobile-bar-branding-logo { filter: invert(1); } </style> If you use Personal Plan, use @rwp code (Add to Home > Design > Custom CSS), to find Page ID, see this guide. #collection-5b3e8ab8352f5323cc5513a3 { /* desktop */ .Header-branding-logo { filter: invert(1); } /* mobile */ img.Mobile-bar-branding-logo { filter: invert(1); } }
  36. 1 point

    7.1 Mobile Menu Link Colors

    .header--menu-open .header-menu.light-bold .header-menu-nav a { color: #006fcd; } body:not(.tweak-transparent-header) .light-bold .header-menu-nav .header-menu-nav-item--active a { color: #464645; }
  37. 1 point
    On squarespace 7.1, the style options only allow you to have: a Carousel (with arrows) but without the image thumbnails, or a Static image with product thumbnails (known as Slideshow). However, you can add the thumbnails to the Carousel with some code. First, view a product and click EDIT DESIGN to launch the styles panel. Within PRODUCTS: ITEM, set the Design mode to Carousel. Save your settings and then add this to Design > Custom CSS: @media screen and (min-width: 768px) { .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails { display: flex!important; margin-top: 10px; } }
  38. 1 point

    Make Thumbnails Unclickable

    Add to Home > Design > Custom CSS. Do similar for other items a.project[href="/verina-risoles/"] { pointer-events: none; } a.project[href="/native-man-skincare-1/"] { pointer-events: none; }
  39. 1 point

    Lightbox captions only?

    Enable Caption first, then add this to Home > Settings > Advanced > Code Injection > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .3em text-align: left; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style> Code from another member on Forum.
  40. 1 point

    Instagram symbol at Insta feed

    Do you want it like this
  41. 1 point
    Was this ever resolved? I am having the same issue, the email from the form comes with subject FROM SUBMISSION and email no-reply. Cant create auto respond, email comes back as error. Anyone figured it out? Thanks
  42. 1 point

    letter superscript

    No problem 😊 You should be able to control line spacing overall, either from the Site Styles panel or with some Custom CSS. The only reason Hanna needed more specific CSS was because she only wanted to change two specific blocks of text; the rest was to remain the same.
  43. 1 point

    [Share] Squarespace 7.1 CSS ID List

    Some CSS Class/ID for Squarespace 7.1 Header Header: header#header Site Title: a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Mobile Navigation Items: .header-menu-nav-item a Mobile Menu Icon: .header-burger Mobile Menu X icon: .burger–active Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Footer Footer: footer#footer-sections Footer Social Icons: footer#footer-sections .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page Cart Page: body#cart Cart Title: .cart-title Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Product Thumbnail: .item-image Product Name: .CartTableRow-itemTitle-1MDgZ a Quantity input: .CartTableRow-itemQuantity-LwuRx.item-quantity Price: .CartTableRow-itemPrice-26eXS.item-price Subtotal: .CartTable-subtotal-2nJjm Subtotal Price: span.CartTable-subtotalPrice-2JFeD Checkout: .CartFooter-checkout-28MW2.checkout Checkout Text: .CartFooter-checkout-28MW2.checkout span Variant Text: .CartTableRow-variant-1ihcF.variant Blog List Blog List: .collection-type-blog.view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts Blog Posts Page: .collection-type-blog.view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Event List Page Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next Checked & Wrote by tuanphan
  44. 1 point

    Feedback Site Content and Style

    The cover image is stunning! It sets the mood for your lovely jewelry. Well done
  45. 1 point
    Try this CSS a.project img { filter: grayscale(1); } a.project:hover img { filter: grayscale(0); }
  46. 1 point

    Sort orders by Shipping Option

    There's nothing built-in that offers what you need, but Squarespace have a very powerful Orders API that provides access to detailed order data including shipment information. This may be more useful, although I haven't specifically tried to sort orders by delivery method. With a Robotic Process Automation (RPA) tool like Parabola or Integromat you may be able to pull the order data from the API, then flatten, filter and/or sort it to meet your requirements. In addition to running an export on demand, these tools allow you to schedule it to run regularly.
  47. 1 point

    How replace "Older Posts >" in 7.1 ?

    Add to Home > Design > Custom CSS /* Newer posts */ nav.blog-list-pagination .prev-label { visibility: hidden; } nav.blog-list-pagination .prev-label:before { visibility: visible; content: "New prev text"; } /* Older posts */ nav.blog-list-pagination .next-label { visibility: hidden; } nav.blog-list-pagination .next-label:after { visibility: visible; content: "new next text"; }
  48. 1 point

    How do I delete imported images?

    I am guessing SS has never implemented it due to all plans having "unlimited storage", while Wix has a 50 GB cap. Still a poor reason to not include the function...
  49. 1 point

    Can I use Font Awesome?

    Note that for newer versions of the FontAwesome CDN, the format is: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
  50. 1 point
    @milomilomilo Add to Home > Design > Custom CSS @media screen and (min-width:901px) { body#collection-5bc850da9140b7397ee80e6f .sqs-gallery.sqs-gallery-design-stacked { max-height: 500px !important; overflow: hidden !important; } }
This leaderboard is set to New York/GMT-04:00
  • Create New...