yogacid

On 9/28/2024 at 1:42 AM, tuanphan said:

You can use this extra code

.sqs-block-button .sqs-button-element--primary:hover:after {
    filter: invert(0);
}

Thanks so much! You are the best.

On 9/30/2024 at 1:42 AM, tuanphan said:

Use this code to Page Header Injection (page where you want to remove scroll to top arrow)

<style>
  buddon#myBtn {
  	display: none !important;
  }
</style>

 

Hi, thank you, but how do I add this code to one single page? Didn't know I could do that on Squarespace.

10 hours ago, tuanphan said:

Can you share link to a page where you use scroll to top arrow? Current I don't see this arrow.

Hi, I removed the arrow because its in the way of the new nav bar. Here's the code for it:

<!-- Scroll to the top -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-arrow-up"></i></button>
<!-- End Scroll to the top -->


<!-- Scroll to the top JS-->
<script>
   window.onscroll = function() {scrollFunction()};

   function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
         document.getElementById("myBtn").style.display = "block";
      } else {
         document.getElementById("myBtn").style.display = "none";
      }
   }

   function topFunction() {
      $('html,body').animate({ scrollTop: 0 }, 750);
   }
</script>
<!-- End Scroll to the top JS-->

Site URL: https://psygaia.org/psychedelic-preparation

I recently installed a adaptive navagation menu bar on a few of my website pages. However, it doesn't work with the scroll to top arrow. I would like to keep that arrow on every page except the few pages that I am using the adaptive nav bar on.

Here's the code for the scroll to top arrow:

<!-- Scroll to the top JS-->
<script>
   window.onscroll = function() {scrollFunction()};

   function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
         document.getElementById("myBtn").style.display = "block";
      } else {
         document.getElementById("myBtn").style.display = "none";
      }
   }

   function topFunction() {
      $('html,body').animate({ scrollTop: 0 }, 750);
   }
</script>
<!-- End Scroll to the top JS-->

Thank you

Site URL: https://psygaia.org/microdosing-course

Hi there, I recently found this custom css that adds a little arrow to the button, which is great. However, I am having issues with the colour of the arrow. I need the button to change colour, like the text in the button, so that when hovering, the arrow becomes black and we can see it.

.sqs-block-button .sqs-button-element--primary:after {
  width: 20px;
  height: 15px;
  margin-left: 15px;
  background: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66de25785e74a84e10708c23/1725834616316/arrow_icon.png) center center no-repeat;
  filter: invert(1);
  background-size: contain;
  content: "";
  vertical-align: middle;
  transition: ease-in-out all 0.2s;
}

Thanks!

16 hours ago, tuanphan said:

I think screenshot is fine?

Its not aligned, don't you think? The right text is a bit higher than left.

Site URL: https://psygaia.org

How do I perfectly align these two text blocks? Is that possible?

ok.

www.howtousepsychedelics.com

I recently brought my course onto Squarespace, and I don't want the Login header to be a normal header item, rather, I want it to look like a button. How can I make the "Login" in the top right corner look like a button instead of a regular header item?

17 hours ago, Ziggy said:

You can try this CSS:

.header-actions .btn:hover {
    transition:ease-in-out 300ms;
    background-color:rgba(255,255,255,0.85) !important
  }

Solved, actually. Thanks!

17 hours ago, Ziggy said:

You can try this CSS:

.header-actions .btn:hover {
    transition:ease-in-out 300ms;
    background-color:rgba(255,255,255,0.85) !important
  }

Thanks, this is working except for the fact that it's slightly transparent on hover?

20 hours ago, Ziggy said:

Can you share your website URL?

Yes, sorry, I thought I did.

www.howtousepsychedelics.com

As you can see on my website, the current header button "Create Account" does not have any hover effect.

I already have some custom code for this button in CSS (for sizing and colour), and I would like to add a slight dim to it when the mouse hovers on it. However, I want to do this without affecting current button CSS which maintains its size and colour.

Can you please help?

Thank you!

On 7/15/2023 at 3:01 AM, tuanphan said:

You mean apply to this video only?

Yes, that is what I mean. Because currently, the code is applying it to section background videos as well.

On 7/9/2023 at 1:41 AM, tuanphan said:

You can use this CSS code

.video-player .plyr .plyr__controls:before
{display:none!important;}

.plyr__video-wrapper video, .plyr__video-wrapper
{border-radius:30px !important;}

 

Thank you, but, this also rounds the corners on background videos, is there a way to make it only for imbedded videos?

Thanks for ther reply @DPruitt but when I copy / past that code into the CSS area it doesn't change the video at all.

Hi, I'd like to round the corners of the first video on this page: https://www.howtousepsychedelics.com/microdosing-course

Thank you for your help!

Site URL: https://www.howtousepsychedelics.com

Hi, I've been using this code to remove hyperlinks underline throughout my website and today, without changing any code, hyperlinks have reappeared. Why?

a {
 border: none !important;
}

Site URL: https://howtousepsychedelics.com

I want to use tooltips to further define words. So, when users hover over a word, a tooltip box shows up and a definition of that word is in that box.

Is this possible? If so, how?

Thank you