KyleKeigan
Member-
Posts
18 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by 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; }
- 13 replies
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
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- 4 replies
-
- custom-css
- link
-
(and 2 more)
Tagged with:
-
@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
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
Active Button Background With Custom Code
KyleKeigan replied to KyleKeigan's topic in Customize with code
As always, THANK YOU! -Kyle- 4 replies
-
- custom-css
- link
-
(and 2 more)
Tagged with:
-
@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
- 4 replies
-
- custom-css
- link
-
(and 2 more)
Tagged with:
-
@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!!!
- 13 replies
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
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
-
- html
- responsive
-
(and 2 more)
Tagged with:
-
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!- 5 replies
-
- html
- responsive
-
(and 2 more)
Tagged with:
-
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!- 5 replies
-
- html
- responsive
-
(and 2 more)
Tagged with:
-
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
- 5 replies
-
- html
- responsive
-
(and 2 more)
Tagged with:
-
@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!
- 5 replies
-
- navigation
- code
-
(and 1 more)
Tagged with:
-
Amazing, thank you! With some added padding on the right this worked perfectly.
- 12 replies
-
- navigation
- font
-
(and 2 more)
Tagged with:
-
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 replies
-
- navigation
- font
-
(and 2 more)
Tagged with:
-
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!
- 5 replies
-
- navigation
- code
-
(and 1 more)
Tagged with:
-
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
- 3 replies
-
- navigation
- code
-
(and 1 more)
Tagged with:
-
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
- 5 replies
-
- navigation
- code
-
(and 1 more)
Tagged with:
-
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!