Jump to content

calibratedconcepts

Circle Member
  • Posts

    47
  • Joined

  • Last visited

Reputation Activity

  1. Like
    calibratedconcepts reacted to paul2009 in Annoucement Bar changes not saving   
    @HollyDavis1210 This is currently a bug (since March 13th). If you paste text into the Announcement Bar it would normally be stripped of its formatting. Unfortunately this isn't happening right now, so if you paste in something that is H1 sized, the Announcement Bar will become enormous. Squarespace recommend the following workaround
    Delete all text contents of the field On empty formatted field, Select all ( Command + A ) Delete again to remove formatting  
  2. Like
    calibratedconcepts reacted to Ziggy in 2 Products per row on Mobile view   
    @dgoodman1 You no longer need CSS to have a 2-column grid on their mobile product page, this feature has been added to the store section settings. You can find it by editing the store section and toggling the mobile view:
     

  3. Like
    calibratedconcepts reacted to studiofives in Can you add a gallery section into the footer 7.1?   
    I was trying to do the same thing. Add a image carousel in the footer to make a logo slider. Since this function was not available, I did a work around... 
    I made my image carousel just in the page, with all the right settings and CSS. Then I opened the pages code in Google Chrome, searched for the section and I copied the entire thing. Then I added a code block in footer and paste the code their. It works and it's mobile friendly. There are some beauty troubles tho like page width and white space between the sections but yeah.. 
    I've hidden the "donor" section on the copywriting page where I copied the code from. So when I want to add or edit the logo wall I just do it there, then refresh and copy/paste the code again. It's a big work around, but it beats editing almost every page when we add a new big client or project which we want to show off in the logo wall. 
    You can check out the site www.alphaleads.eu. Hope this helps, and hope that @Squarespace will add the function since this is just basic CMS I think. Making a "template" like a logo wall which you can edit when you want and paste in pages you want.
  4. Thanks
    calibratedconcepts reacted to tuanphan in How to add a line break to list item title   
    ah, typo, script, not style, use this new code
    <script> $(document).ready(function(){ $("h2.list-item-content__title").each(function(){ $(this).html($(this).text()); }); }); </script>  
  5. Like
    calibratedconcepts reacted to MS_coder in How to add a line break to list item title   
    Just wanted to add to this since I was referencing the same question and couldn't get the code to work. ( It seems obvious now, but wasn't thinking at the time. )  In order for the code to work you need to load the jquery into the header code injection.  So in all: 
    Header add -
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    Footer add - 
    <script> $(document).ready(function(){ $("h2.list-item-content__title").each(function(){ $(this).html($(this).text()); }); }); </script> Hope that helps. 
  6. Like
    calibratedconcepts reacted to gracemoore in Code Blocks/Embed Code Block: Preview in Safe Mode Issue   
    Hey @digitalink, yes managed to sort it! After aaaages trying to find a solution on Squarespace forum I came across this post which expressed the same problem.
    @Ziggy shared the below solution which worked for me...
    Try adding this to your Custom CSS, hoping it will hide the embed warning message and should allow you to shrink the block so you don't have to leave it overlapping the text block:
    html.squarespace-damask .sqs-blockStatus { display: none !important; } Hope it works for you too!
  7. Like
    calibratedconcepts reacted to BPDjohnny in ChatBots - which is best?   
    Hi all, I'm a new SquareSpace user, building a site to promote and sell software subscriptions... thinking about adding a chatbot and wondered which would be the best to go with? There are so many available; paid and free - happy to pay a little for it, I just want to be sure we choose a reliable, user friendly option - they all claim to be the best!
    Any help would be appreciated!
    Regards,
    Johnny
  8. Thanks
    calibratedconcepts reacted to AniT in Can't reauthenticate Instagram connected account   
    This has to do with your personal account being connected to the Instagram. If you go to Instagram -> Settings -> FACEBOOK Account Center -> Click your personal page that's connected to the account -> Disconnect
    Should work! 
  9. Like
    calibratedconcepts reacted to cmography in Center Align Button on Mobile   
    This solved it!
    @media(max-width: 1220px) { .homepage .sqs-block-button .sqs-block-button-container--left { text-align: center; } }  
  10. Thanks
    calibratedconcepts reacted to tuanphan in [Share] Portfolio Page Code (7.1)   
    Some code for Portfolio Page - Grid Simple in 7.1.
    All code: Add to Design > Custom CSS
    <style> <script> you need to add to Page Header or Code Injection #1. Change Overlay Color
    /* Show dark overlay on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); /* chage overlay color here */ transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } #2. Add Subtitle
    First, find subpage [url slug]

    Next, use this CSS
    /* Add subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01"; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 01"; } Repeat for other sub pages
    #3. Add Multi Subtitle
    /* Multi subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; white-space: pre-wrap; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01 \A second subtitle \A third subtitle "; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 02 \A second subtitle \A third subtitle 2"; }
    #4. Change to 5 items/row (Desktop)
    /* Portfolio 5 columns */ @media screen and (min-width:992px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.
    #5. Change to 2 items/row (Mobile)
    /* Mobile 2 columns */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code.
    #6. Add “new” badge to next to title
    /* new badge */ a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "New"; position: absolute; top: -5px; font-size: 14px; background-color: red; color: white; line-height: 20px; padding: 2px; margin-left: 10px; }
    #7. Add an icon next to title
    a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 50px; height: 50px; display: block; float: right; } Replace with [URL Slug] (see screenshot in first code)

    #8. Zoom in image on hover
    /* Zoom in image on hover */ .grid-image img { transition: all 0.3s; } .grid-image-inner-wrapper { overflow: hidden; } a.grid-item:hover img { transform: scale(1.3); transition: all 0.3s; } #9. Add “view” text when hover image
    /* Add view text on hover image */ .grid-image:before { content: "view"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; }
    #10. Show Overlay + Title over image when hover (Desktop only)
    /* show overlay title on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } .grid-image:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } .portfolio-text { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999999999; width: 100%; text-align: center; transition: all 0.3s; opacity: 0; } a.grid-item { position: relative; } a.grid-item:hover .portfolio-text { opacity: 1; } .portfolio-text { margin: 0 !important; } h3.portfolio-title { margin: 0 !important; } #11. Change Aspect ratio on sepcific portfolio page
    First, find [page id]

    Next, use this CSS
    /* aspect ratio 2:3 */ body#collection-622f619622029655b91503a8 .grid-image { padding-bottom: 150% !important; } 2:3 = (100 x 3)/2 = 150%
    #12. Remove Pagination
    /* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; } #13. Remove Pagination Title Only
    /* remove pagination title */ .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { display: none; } #14. Remove Pagination Arrows Only
    /* remove pagination arrows */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke { display: none; } #15. Replace Pagination Title with text Prev/Next
    /* Pagination title */ [data-collection-type*="portfolio"] { h2.item-pagination-title { display: none; } .item-pagination-prev-next { display: block !important; }} #16. Repalce Pagination Arrow with custom icon
    /* Custom pagination arrow icon */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke svg { display: none; } [data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } [data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } #17. Add all projects under Pagination
    Add to Project Page Header
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<section class="item-pagination item-pagination--prev-next under-pagination"><div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"><p><a href="/work" target="_blank">All</a> / <a href="/work/meccaandmedina">Mecca &amp; Medina</a> / <a href="/work/street">Street</a> / <a href="/work/humansofstlouis">Humans of St. Louis</a> / <a href="/work/charis">CHARIS</a></p></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> <style> section.under-pagination { justify-content: center; padding-top: 10px; padding-bottom: 10px; } </style> #18. Add Last Project/First Project on First Page/Last Page Pagination
    Add to Page Header or Code Injection Footer
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio/12" class="item-pagination-link item-pagination-link--prev"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Previous</div><div class="item-pagination-prev-next">- PREV</div><h2 class="item-pagination-title">12 | PRIVATE EVENTS</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> #19. Add Button to Pagination
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> <style> /* Portfolio back to button */ a.portfolio-backto .item-pagination-title { background-color: black; color: white !important; padding: 10px; } </style>
    #20. Add “Back to all projects” under pagination
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script>
    #21. Move Pagination from bottom to top
    Add to Page Header
    <style> main#page { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-top: 100px; } section.item-pagination.item-pagination--prev-next { padding-top: 0; padding-bottom: 5px; } .view-item .item-pagination[data-collection-type^="portfolio"] section:first-child { padding-top: 10px !important; } </style> #22.Change Pagination Title size (mobile)
    /* pagination title mobile */ @media screen and (max-width:767px) { .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { font-size: 14px; } } #23. Change Pagination Color on hover
    /* pagination hover */ .item-pagination[data-collection-type^="portfolio"] h2:hover { color: #f1f; } .item-pagination[data-collection-type^="portfolio"] .icon:hover svg { stroke: #f1f; } --
    Checked by @tuanphan
  11. Like
    calibratedconcepts reacted to jpeter in Image block on mobile missing first letter   
    The following CSS appears to work:
     
    .sqs-block-image .sqs-dynamic-text { display: inline-block; }  
  12. Like
    calibratedconcepts reacted to Beyondspace in Image block on mobile missing first letter   
    Try
    .image-title-wrapper em { display: inline-block; } Let me know how it works on your site
    Support me by pressing 👍 if this useful for you
  13. Like
    calibratedconcepts reacted to paul2009 in HELP - Shipping Rate Calculator   
    You can add a tool to the backend of your Squarespace website, so that you (the merchant) can see the rates from different carriers and choose which one to use for each order when you are processing them.
    However, customers cannot see this information before they purchase. This means customers cannot select an accurate carrier-calculated rate. Instead they must select from the shipping options that you added manually, based on size, weight and destination.
  14. Thanks
    calibratedconcepts reacted to tuanphan in Image Clickthrough URL not working with hover   
    try add pointer-event none to this code
    .image-caption { left: 50%; top: 50%; position: absolute; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); pointer-events: none; }  
×
×
  • 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.