tuanphan

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

On 4/12/2023 at 1:20 AM, Chrystele said:

Hi Tuan, I'm sorry for the confusion. I want this kind of mini audio player only for SOME posts, not all.

You can edit the page where you want to apply > Add a Code Block (anywhere) > Paste this code

<style>
  .sqs-audio-player {
    background-color: unset !important;
    box-shadow: unset !important;
    border: none !important;
}
.sqs-audio-player .controls {
    border: 1px solid black;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,.8);
}
</style>

Don't remove any code in your current code

Add this to Design > Custom CSS

/* Ghost - hide title */
.custom-gallery-inner-wrapper .sqs-gallery.sqs-gallery-design-grid .slide h3 {
    opacity: 0 !important;
}
.custom-gallery-inner-wrapper .sqs-gallery.sqs-gallery-design-grid .slide:hover h3 {
    opacity: 1 !important;
}

On 4/11/2023 at 11:49 PM, LUDLOW said:

@tuanphan yes please. We still need help with this. 

Tried some code but can't address this. You can consider using new way to add promotional popup.

You mean this problem?

On 4/11/2023 at 9:20 PM, bitsst said:

Hey tuanphan - thank you so much!

I did discover the same problem in three other places on my website, and am not sure how to edit the code to align texts in another content block than the footer. Could you explain how I can adjust it, to also use it for other parts of my website? 

The other places are:
- 'About': under services, the lower three paragraphs
- 'Contact': the lower two paragraphs ('interested in a lecture?')
- On my projectpages:
      - Work > Happy Hybrid: the text left underneath the first image
      - Work > Hek Yes: the text left underneath the first image

 

 

Hi,

It looks fine to me

On 4/11/2023 at 9:22 PM, AllyHudson said:

I added the social image option to my blog to see what it would do. I hate it and now I can't remove it. I tried both options discussed above. Help!

Can you share link to a blog post? We can help easier

Add to Design > Custom CSS

a:hover, a:hover span {
    background-size: 100% 1px !important;
}

Try adding to Code Injection > Footer

<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
  
  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>
<style>
  body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
body .cursor__ball circle {
  fill: #f7f8fa;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
  const $bigBall = document.querySelector(".cursor__ball--big");
const $smallBall = document.querySelector(".cursor__ball--small");
const $hoverables = document.querySelectorAll(".hoverable");

// Listeners
document.body.addEventListener("mousemove", onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  $hoverables[i].addEventListener("mouseenter", onMouseHover);
  $hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
}

// Move the cursor
window.CP.exitedLoop(0);function onMouseMove(e) {
  TweenMax.to($bigBall, 0.4, {
    x: e.pageX - 15,
    y: e.pageY - 15 });

  TweenMax.to($smallBall, 0.1, {
    x: e.pageX - 5,
    y: e.pageY - 7 });

}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, 0.3, {
    scale: 4 });

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, 0.3, {
    scale: 1 });

}
</script>

On 4/11/2023 at 7:41 PM, LilithTrembles said:

Ah thank you for the suggestion but I couldn't get it to work. Can I literally copy and paste that line of CSS into the next available line in my CSS editor window? Or does it need breaking up / inputting on different lines?

 

Can you share link to product? We can check easier

On 4/11/2023 at 7:27 PM, samsnapsit said:

Ah, yes - my apologies!

It's here and is in the last section of the page: https://www.samanthapillion.com/work-with-me

Thank you!

Add to Design > Custom CSS

/* month */
.fe-6417a4b9924fe8b418fcef4e h1:after {
    content: "/month";
    font-size: 15px;
}

Hi,

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

You can add slideshow gallery, then share link to page, we can give code to resize it on mobile, to make same as on desktop

On 4/11/2023 at 3:48 PM, lina1570047784 said:

Thank you! The duplicate site is https://nectarine-salamander-dztm.squarespace.com and pw is rainyday. I've added a custom CSS from this forum (maybe yours), and changed some of the numbers in it. Without that CSS, my header just disappears when scrolling. But what I want is the header to disappear when scrolling down, and reappear when starting to scroll up (or a second later or so).

Hi,

Did you solve?

On 4/11/2023 at 4:09 PM, Dilon said:

@tuanphan with the help of your code and Chat GPT, we are able to somewhat get the below code, what it does is that, it removes the clickable function for mobile. I and with the help of gpt (past 1 day trying different prompt) failed to get the click and drag function to still work. I think click and drag to move through the carousel is very intuitive and important, would be amazing if you could help!

 

// Make carousel image clickable, disables in mobile
li.list-item {
  position: relative;
}

.list-item-content__button-container {
  position: static;
}

@media (min-width: 768px) {
  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;
  }

  .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
  }
}

@media (max-width: 767px) {
  .list-item-content__button-container {
    position: static !important;
  }

  .user-items-list-carousel__slide {
    pointer-events: none !important;
    user-select: none !important;
  }
}

Did you solve or still need help?

On 4/11/2023 at 3:47 PM, FTWSGEM said:

Thank you @tuanphan How would I get the icon/menu button to be either at the very top of the page or to the very right of the page and sticky?

Add this code under

div.burger-inner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99999;
    left: unset;
}
.burger-inner:after {
    background-position: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

7 hours ago, kellyetz said:

Hey @tuanphan - yes! It's linked: 

https://carolyn-celia.squarespace.com/
password: demo 

Which summary are you referring to? Homepage looks fine

Hi,

What is site url?

On 4/4/2023 at 6:05 PM, FTWSGEM said:

I have changed the URL: https://ftws-progress.squarespace.com/ 

password: happy123

Thank you

The url doesn't work. Can you check it again?

On 4/11/2023 at 3:21 PM, JonnyIlsley said:

Hi @tuanphan,

When I try this, the animation seems to stop however now I cannot press the next or previous button on the carousel which allows me to move to the next items in the summary block.

Try this new code

div#block-yui_3_17_2_1_1680602460829_8673 .summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

It looks like you figured it out? It shows fine to me

Ah yes, we can add code to make text/overlay always appear

Hi,

Can you share link to shop page & which section are you referring to?

On 4/11/2023 at 10:16 AM, SupaJ said:

Hi, actually, I didn't solve it. I had a client meeting and was showing them an option for the logo. This is just one image edited to be on top of the other and then saved as one image. We'd still like to do what I mentioned in the initial post. Thanks!

Add to Design > Custom CSS

body.homepage .gallery-fullscreen-slideshow-list:after {
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_03/q25logo-removebg-preview.png.e677dab68841dca73c318bc3bcf5df03.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 250px !important;
    height: 250px !important;
}

On 4/11/2023 at 6:10 AM, shelbyodom said:

One more follow-up question, this code worked great, but the images are getting cut on the hover. Is there a way to fix this with code or should i upload specific images for this? They are getting cut to fit into the circle shape, but I would like to show the whole image and not the cut circles.

Try adding this code under

.user-items-list-item-container[data-section-id="64206f28e6cce449d506a051"] li:hover img {
    object-fit: contain !important;
    height: auto !important;
    min-height: unset !important;
    width: 90% !important;
}