tuanphan

Can you share link to this shop page?

What is site url? We can check easier

I think you can try Squarewebsites.org Tool to copy section between sites. They have free trial, you can sign up a trial and test

5 hours ago, mike.bj said:

Hi @tuanphan - is it possible to check if this code can be made to work with the navigation text links that appear at the bottom of project pages? Thank you for any help!

It works for button or not? If works, I will adjust code for nav text link

5 hours ago, SGSocial said:

Thanks Tuan. Can you share the CSS code and the steps to insert the icon on a page?

You can share link to page + let me know which position you want to add icon, we can check easier.

Because they are font code, need to use CSS code to declare them.

You try this code to Website > Website Tools > Custom CSS

p,h1,h2,h3 {
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important
}

On 4/17/2024 at 8:33 AM, mackenzie said:

here is link! 

https://tangerine-ruby-ar4f.squarespace.com/

pass: KL!

I see the border image show fine. Did you solve this?

#1. I think we can use CSS code to move menu to this + reduce dropdown text size. What do you think?

#2. I see you solved logo problem?

Which page are you referring to? We can check easier

https://www.resilientfutures.us/

Hide it from Blog List Page or hide it from blog list page + google result + when user access direct url?

Can you share link to this page? And add a background color behind text?

On 4/17/2024 at 8:23 AM, CharlesD said:

I'm having the same issue, did you figure this out?

If you share link to page where you have problem, we can check easier

On 4/17/2024 at 12:56 AM, thearrivalyoga said:

Hi there - having a similar issue with my product description page for the two products on my site. I have managed to change the font for my shop page, but when I click into the product description page the heading font for the product "The Arrival Bag" is shows italicized and in the wrong font.

https://www.thearrivalyoga.com/shop/p/sagecedarwood-b2wfg

Any ideas on script here? My uploaded custom font is 'KnockoutCruiserweight' in my CSS.

I see you solved with this CSS code

.pdp-layout .pdp-details .pdp-details-title {
    font-family: 'KnockoutCruiserweight';
    font-size: 29px !important;
    font-style: normal !important;
}

The example site is Squarespace. This section, they used Image Block (left) and Text Block + Spacer Block (Right)

With gallery, they used a custom gallery widget into Code Block.

I can't determine which widget they used

On 4/17/2024 at 11:28 PM, Justin G said:

@tuanphan Thanks for getting back with me. I don't have a plug-in on the Gallery page. A "Load More Images" link or button would be great instead of a never-ending stream of images. So, option 2 sounds like the way to go.

Thanks!

I tried doing a quick demo, you can check

https://tuanphan-demo01.squarespace.com/cbutton-show-section?noredirect

pass: abc

I see 3 videos, you want to make them fullwidth or?

https://www.besttorahstories.com/torah-scribe

I see you solved?

On 4/17/2024 at 7:05 AM, JessicaWare said:

@tuanphan we have a business plan. That would be amazing if you could test - thanks so much

You can use this CSS code

[data-section-id="660f3e4a407c38034e075266"] {
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: none !important;
}
button:nth-child(2) .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    display: block;
    transform: rotate(-90deg);
    font-size: 40px;
}
button:nth-child(1) .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    display: block;
    transform: rotate(90deg);
    font-size: 40px;
}}

On 4/18/2024 at 12:27 AM, alana said:

Hi @tuanphan!

I have a similar issue that I'm looking to resolve. I've got a custom hamburger menu on a 7.1 site here:

https://www.esplanadewakefield.ca/?password=demo
Password = demo

Looking to find a way to change the colour of the hamburger menu on scroll and have it stay fixed (Like I have setup for the logo.) The white works for the first section but need it to be this green #746837 for the rest. 

Any chance you'd be able to help with a solution? Many thanks! 

Alana

Add this code to bottom of Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .test-something .burger-inner>div {
    background-color: #746837 !important;
}
</style>

Can you share link to this page? We can check easier

On 4/18/2024 at 1:26 AM, BethanyBoss said:

@tuanphan — It's not aligning properly still. Is there another way to tweak the CSS so that it's more responsive?

You can adjust top and right value to what you want. If it still problem, you can let me know what problem, I can check again easier

On 4/17/2024 at 10:17 PM, theuq said:

@tuanphan Thank you! I added to the footer but it doesn't seem to be working, unfortunately.

I tried clicking it and it already scroll here. You try clicking it and see.

On 4/17/2024 at 9:47 PM, sprucerow said:

Thank you, Tuan! I was hoping to just have the menu overlap the logo not hide it completely, like on this website: https://sealco.ca/

You can use this CSS code

body.header--menu-open .header-title-logo {
    filter: blur(3px);
}

Background Image for Main Content only or main content + header + footer?

On 4/17/2024 at 5:05 AM, _yohandeschamps_ said:

Yes, you can check for this product.

https://www.yodeschamps.com/landscape-prints/p/alpine-evening

Your screenshot is on mobile? The desktop show white color. I think mobile device control style and we can't control it.

But you can try this code to Website > Website Tools > Custom CSS, maybe it work

.product-details .variant-option select {
    background-color: #f1f !important;
}