KyleKeigan

@tuanphan

I solved this using another thread: 

I changed this code:

In Settings > Advanced > Code Injection > FOOTER.  (slight difference and I don't necessarily think this is where the problem was)

<script>

  $( ( ) => {
  
    $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
  
    $( window ).mousemove ( function ( e ) {
    
      $( '.cursor' ).css ( {
      
        left: e.pageX,
        top: e.pageY
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a' ).on ( 'mouseenter', function ( ) {
        
        $( '.cursor' ).addClass ( 'active' );
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a' ).on ( 'mouseleave', function ( ) {
      
        $( '.cursor' ).removeClass ( 'active' );
        
        } );
        
      } );
      
    } );
    
  </script>

And in Design > Custom CSS added:

* {
    cursor: none !important;
}

@tuanphan One last question 🙂

Currently the only hotspot / clickable area is the text. Is there a way to change this multi-button code to make each pill shape clickable? Thanks!

Best,
Kyle

@tuanphan

Design > Cusom CSS

@media ( hover: none ) {

  .cursor {
  
    display: none !important;
    
    }
  }

* {

  cursor: none;
  
  }

.cursor {

  --size: 10px;
  
  height: var( --size );
  width: var( --size );
  
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  
  }

.cursor.cursor-dot {

  background: #ed4c00; /* This defines the color of the cursor */
  mix-blend-mode: screen; /* Delete this line if you dont want the circle to invert */
  transition: width 0.6s, height 0.6s, background-color 0.6s;
  transition-timing-function: ease-out;
  
  }

.cursor-dot.active {

  --size: 50px;
  
  background-color: #ed4c00;
  
  }

In Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

In Settings > Advanced > Code Injection > FOOTER. 

<script>

  $( ( ) => {
  
    $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
  
    $( window ).mousemove ( function ( e ) {
    
      $( '.cursor' ).css ( {
      
        left: e.pageX,
        top: e.pageY
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a, input.button' ).on ( 'mouseenter', function ( ) {
        
        $( '.cursor' ).addClass ( 'active' );
        
        } );
        
      } );
      
    $( window ).mousemove ( function ( e ) {
    
      $( 'a, input.button' ).on ( 'mouseleave', function ( ) {
      
        $( '.cursor' ).removeClass ( 'active' );
        
        } );
        
      } );
      
    } );
    
  </script>

As always, THANK YOU!

-Kyle

@tuanphan Hi! I've uploaded the following code to create a multi-button section on this page: https://sunfish-turbot-cxel.squarespace.com/artwork

Is there a way to make the background of the button black when you're actively on the page that corresponds to the button?

Code: .multi-button {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  &.center {
    justify-content: center;
  }
  &.right {
    justify-content: flex-end;
  }
  .sqs-edit-mode-active .fluid-engine & .sqs-block-button-container {
    width: unset;
  }
}

Thank you!!!
Kyle

@tuanphan Hi! Same issue as @TJC123 I successfully used the above code for a custom cursor on my site but the pointer cursor is appearing over most of my links. It doesn't appear when hovering over the logo and social icons but I think those are the only spots. 

I played around with adding this code but it changes it back to the arrow instead:

.header-nav *, nav.header-menu-nav-list * {
cursor: default !important;
  }

Website URL: https://sunfish-turbot-cxel.squarespace.com/

Thank you!!!

@tuanphan lifesaver as always, thank you!!!

@tuanphan apologies, here: https://sunfish-turbot-cxel.squarespace.com/

Thank you!

@tuanphan you're always fantastic help, if you have any ideas I'd be forever grateful!

Hi all!

I'm wondering if someone could help me figure out how to center the type vertically within the animated radial gradient on the home page of this site. The code I referenced for this allows me to add a top margin but when the browser size is adjusted the type isn't responsive and centered. Thank you!

-Kyle

@tuanphan do you have any ideas? It seems like a simple solution but I can't figure it out for the life of me. Thanks!

Amazing, thank you! With some added padding on the right this worked perfectly.

I've added this code to change my navigation font to italic on hover by switching the font family, however, this is now causing my links to shift on hover. Is there a way to avoid this? Thanks!

https://cow-prism-nfr6.squarespace.com/information

pw: kyle

I was able to figure that out but I'd like my logo & navigation links to blend with different aspects on my background. PW: kyle

Thanks!

Hi all,

I'm looking to incorporate CSS to my nav header using a difference blend mode on my site:

https://cow-prism-nfr6.squarespace.com/

I've tried adding it to a few elements but haven't had success. Here are a few examples of what I'd like to achieve, thanks!

https://anniversary.blindbarber.com/

https://postcompany.co/information

Thanks again!

Kyle

Hi all,

I'm looking to incorporate CSS to my nav header using a difference blend mode on my site:

https://cow-prism-nfr6.squarespace.com/

I've tried adding it to a few elements but haven't had success. Here are a few examples of what I'd like to achieve, thanks!

https://anniversary.blindbarber.com/

https://postcompany.co/information

Thanks again!

Kyle

Thank you so much!

That worked perfectly!

Site URL: http://www.kylekeigan.com/anfmarketing

I've added an embedded video into my layout, however, for some reason there seems to be a small amount of padding on every side.

I would like it to be flush to the images above and below it as well as the full width of the container if possible.

Any help would be much appreciated!! Thank you!