KyleKeigan
-
Posts
18 -
Joined
-
Last visited
KyleKeigan's Achievements
-
moonlitdesign reacted to a post in a topic:
Custom Cursor / Mouse
-
moonlitdesign reacted to a post in a topic:
Custom Cursor / Mouse
-
@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; }
- 13 replies
-
- 1
-
-
- css
- custom-css
- (and 2 more)
-
Active Button Background With Custom Code
KyleKeigan replied to KyleKeigan's topic in Customize with code
@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 reacted to a post in a topic:
Active Button Background With Custom Code
-
@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>
- 13 replies
-
- 1
-
-
- css
- custom-css
- (and 2 more)
-
Active Button Background With Custom Code
KyleKeigan replied to KyleKeigan's topic in Customize with code
As always, THANK YOU! -Kyle- 4 replies
-
- 1
-
-
- custom-css
- link
- (and 2 more)
-
tuanphan reacted to a post in a topic:
Center Text Vertically within HTML Code Block
-
@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!!!
-
Center Text Vertically within HTML Code Block
KyleKeigan replied to KyleKeigan's topic in Customize with code
@tuanphan lifesaver as always, thank you!!!- 5 replies
-
- 1
-
-
- html
- responsive
- (and 2 more)
-
Center Text Vertically within HTML Code Block
KyleKeigan replied to KyleKeigan's topic in Customize with code
@tuanphan apologies, here: https://sunfish-turbot-cxel.squarespace.com/ Thank you! -
Center Text Vertically within HTML Code Block
KyleKeigan replied to KyleKeigan's topic in Customize with code
@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.
-
KyleKeigan reacted to a post in a topic:
Change navigation font on hover
-
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
