artpimpress

Hi there,
I tried this code but then all of the buttons in all of my list sections disappeared.
When I tried it again deleting the below section, the formatting of my buttons was all off. Any suggestions? I don't need to hide the buttons, just make the images clickable.
This is my site (it's a work in progress): https://tarpon-fox-f79k.squarespace.com/hotels
Thanks so much!
a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; }

Try adding
#block-yui_3_17_2_1_1598373529135_8687
{border: 3px solid white;
background: white;}
to the image! You might have to mess with the border sizes to make it even, but at least it gets rid of that pesky border gap.

Before you start, please remove the incorrect code that you've added to both the HEADER and FOOTER boxes in Settings > Advanced > Code Injection as these will both cause errors.
Tremont family (v7.0)
As you mentioned, you are using the Endeavor Framework ("Tremont Family") so this code will work with all the templates in this family including Tremont itself, Camino, Carson, and Henson. 
The correct code to add to Settings > Developer Tools > Code Injection > FOOTER is:
<script> document.querySelector('.site-branding h1 a').setAttribute('href', '/home'); </script> You can change the "/home" page reference to send users to a different page.
 
Brine family (v7.0)
For other users who are using one of the popular Brine-family templates, you'll want to use this instead:
<script> /* Desktop branding - redirect to another URL */ document.querySelector('a.Header-branding').setAttribute('href', '/home'); /* Mobile branding - redirect to another URL */ document.querySelector('a.Mobile-bar-branding').setAttribute('href', '/home'); </script>  
Squarespace version 7.1 (all "templates")
And here's a version for anyone building a site on the newer Squarespace 7.1 templates:
<script>   /* Desktop branding - redirect to another URL */   document.querySelector('.header-display-desktop .header-title-logo a').setAttribute('href', '/home');    /* Mobile branding - redirect to another URL */   document.querySelector('.header-display-mobile .header-title-logo a').setAttribute('href', '/home');   </script>  
-Paul
Did this help? Please give feedback by clicking an icon below  ⬇️

Add to Design > Custom CSS
/* Gallery test page */ body#collection-64bed9575161630bdb2bb868 article section:first-child { padding-top: 0px !important; } Mobile is fine to me.
 

Hey @tuanphan I actually figured it out. This is what worked for me:
<style>
.header-announcement-bar-wrapper {
  background-color: transparent !important
  }
.header-announcement-bar-wrapper.shrink {
    background-color: #533181!important;
  }
</style>

Add to Home > Design > Custom CSS
.header-nav-wrapper a { background-image: none !important; }  

/* Nav item hover color - underline */ .header-nav-item a:hover { color: violet; } Reference (nav hover color code for all templates 7.0 & 7.1): https://beaverhero.com/squarespace-navigation-links/

Add to Page Header (page where you want to change logo)
<style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style>  

@mappdesigns Just a heads up that "p" targets all paragraph fonts. 
p.sqsrte-large (p1) p (all paragraph fonts) p:not(.sqsrte-large):not(.sqsrte-small) (p2) p.sqsrte-small (p3)

There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. 

For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.

Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }  

Q1. Add to Code Injection Footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(function($){ $("a.summary-read-more-link").html(function() { return $(this).html().replace("Read More →", "tuanphan"); }); }); </script> Q2. Can you share link to blog post?

Add to Home > Settings > Advanced > Code Injection > Footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".sqs-add-to-cart-button-inner").html(function() { return $(this).html().replace("Add To Cart", "New text"); }); }); </script>  

Hi @paul2009, 
Thanks for this awesome solution! Just a note on what others have mentioned re: opening links in new window. I've removed your script from code injection and "open in new window" works as expected, so the issue doesn't seem to be on the Squarespace end. I know you're providing this for free and "as is" (and am very grateful that you do), just wanted to let you know 🙂
Thanks again!

Looks like they use a background image for the underlines instead of text decoration or borders, so this worked for me in the CSS Editor:
a {background-image:none !important;}  

Add to Design > Custom CSS
 
div.header-menu-nav-item * { font-size: 14px !important; }  

Hi,
Try the above from another poster tuanphan...the CSS works well for me

You should enable site visibility to password as well, anyway, here is snippet for 7.1 image lightbox
.yui3-lightbox2 .sqs-lightbox-overlay { opacity: 0.2 !important; } .gallery-lightbox-background { opacity: 0.2 !important; }  

There is a work around - if you delete the product id and product variant, change SERVICE to PHYSICAL, and then give that product a unique URL (I just added "1" to the end of each). This creates a duplicate product in your inventory that is now a PHYSICAL product. Still working on how to batch delete all the original SERVICE products...
Way faster than recreating all the products.

Thank you very much! That's it!  😀

Site URL: https://cargofilm-staging.squarespace.com/films
I have added an anchor on the film pages of this site https://cargofilm-staging.squarespace.com/films (password: cargo). It works perfectly in Chrome but does not work in Safari. Any suggestions? Thank you!

Add to Home > Design > Custom CSS
.header-nav-item a:hover { color: red !important; }  

Okay, I'm an idiot. This is a setting within the gallery block where you can select a light or dark overlay. I'm attaching a screenshot just in case it isn't obvious to anyone else. No further help required.

Hi everyone, I managed to get a full page slideshow with smooth fading transitions for my client's site using a combination of the following tutorials/code snippets.
How to make a cover page in 7.1 from Becky at InsidetheSquare
https://www.youtube.com/watch?v=PF45Wz5dAX0&t=303s
+ code pasted in after Becca's from @rwp at this thread.
Be sure to use the snippet posted on April 30th 2020 (I've copied below), there is an edit to this later in the thread (removing a line) that resulted in a syntax error for me.

Just sharing the full sequence of what needed to be done to get the finished product - which I will share once it's live. Current trial link is: https://salamander-ellipse-frfp.squarespace.com/
Hope this saves folks some time hunting around the internet for piecemeal/expensive solutions. ❤️
.gallery-fullscreen-slideshow-item-img{ transition: opacity 1600ms ease-in-out !important; -webkit-transition: opacity 1600ms ease-in-out !important; -ms-transition: opacity 1600ms ease-in-out !important; -moz-transition: opacity 1600ms ease-in-out !important; -o-transition: opacity 1600ms ease-in-out !important; } .gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{ transition: opacity 1400ms ease-in-out !important; -webkit-transition: opacity 1400ms ease-in-out !important; -ms-transition: opacity 1400ms ease-in-out !important; -moz-transition: opacity 1400ms ease-in-out !important; -o-transition: opacity 1400ms ease-in-out !important; }

That one is simple, I just added <br> where I wanted the text to break and a soft return  (shift return, not just return)
Title<br>
Medium<br>
I'm so happy this helped. Enjoy the rest of your weekend!

Hi Gracie,
I'm not a coder either but I can tell you that the code needs to be moved to SETTINGS, advanced, injected code. That will resolve the issue with the line 1 error and hopefully resolve the caption/lighbox issue as well.
This is the site I used the code on https://www.jonathangaber.com/work/bricks in version 7.1. If you are on 7.0, I'm not sure it would work
I think our code is the same but just to make sure I'm repasting it here:
I hope this resolves it. Please let me know.
Sharon
-----
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: black;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}
.gallery-lightbox-wrapper:hover {
    cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
    display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
    display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
    display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</style>