Jump to content

KyleKeigan

Member
  • Posts

    18
  • Joined

  • Last visited

Everything posted by KyleKeigan

  1. @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; }
  2. @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
  3. @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>
  4. @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
  5. @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!!!
  6. @tuanphan apologies, here: https://sunfish-turbot-cxel.squarespace.com/ Thank you!
  7. @tuanphan you're always fantastic help, if you have any ideas I'd be forever grateful!
  8. 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
  9. @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!
  10. Amazing, thank you! With some added padding on the right this worked perfectly.
  11. 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
  12. 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!
  13. 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
  14. 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
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.