-
Posts
67 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by MattyT208
-
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
Yes! That works great now. Thank you so much. -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
I added to the bottom of Custom CSS like you suggested. Funny thing is that when I have the Custom CSS window open, the down arrow is centered, but when I close out of the Custom CSS window and refresh that page, the down arrow is once again not centered. -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
Thank you, that worked great. I'm still learning 🙂 -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
This works. However, how do I limit this so it only applies to a certain page? When I pasted this into Custom CSS window it applied it site-wide. When I pasted it into the particular page Code Injection window, it didn't work. Any suggestions? -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
Yes, I did. I'm wondering if my custom codes and scripts need to be cleaned up – like maybe I have something in the Page Settings>Advanced window that is conflicting with this as I've added code to that window from other individuals. -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
I tried this and it's still not working correctly – it did the same thing as before. Do you think there may be conflicting code that I have pasted into the Advanced> Page Header Code Injection for the particular page? The code that is in there is the following: <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> #page section:first-child a.next-section { padding-top: 70px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #page section:first-child a.next-section span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s 0; animation: sdb05 1.5s 0; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } </style> <script> $(function() { $("#page section:first-child").append('<a href="#" class="next-section"><span></span></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> I don't know if that is causing issues with the code you said to replace in the Custom CSS window, which is this: a.next-section { border: 10px solid rgba(255,255,255,0.5) !important; width: 70px; height: 70px; border-radius: 100%; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; } #page section:first-child a.next-section span { -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); top: calc(~"50% - 5px"); border-color: rgba(255,255,255,0.5); } I hope this makes sense. Thanks. -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
This worked great at first and then for some reason (minutes later) the arrow began displaying as such (see attachment). -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
So this did allow me to adjust height, placement, color, etc. but it also added scrolling controls to the right side of the caption boxes – is there a way to get rid of those? See attachment. https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1 PW: yil1TONG4toft*ib -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
This worked great. Thank you so much. -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
That worked perfectly, thank you. -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1 yil1TONG4toft*ib -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
Both the height and width, if possible. -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
How do I adjust my drop down arrow to look like Image_1? It currently looks like Image_2. Code injection is currently this: <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> #page section:first-child a.next-section { padding-top: 70px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #page section:first-child a.next-section span { position: absolute; top: 0; left: 50%; width: 28px; height: 28px; margin-left: -12px; border-left: 8px solid #fff; border-bottom: 8px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 0s infinite; animation: sdb05 0s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } </style> <script> $(function() { $("#page section:first-child").append('<a href="#" class="next-section"><span></span></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity? -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
Sorry, I forgot that it was disabled. Please try accessing it again. -
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1 yil1TONG4toft*ib -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
Thank you! -
That worked perfectly. Thank you!
-
Changing Color on Inline Image Block Overlay
MattyT208 replied to alexanderkarlmartinwilhelm's topic in Customize with code
I'm needing the same thing but when I placed this in Custom CSS nothing happened. I'm also wanting to adjust the size or padding of the colored caption box so it's not taking up so much empty space – is that possible? -
Scroll Down Arrow That Links To Next Section
MattyT208 replied to MattyT208's topic in Customize with code
Thank you, that works great. However, how do I limit it to only appear on the homepage? It's showing up on all pages. -
https://cinnamon-arugula-lbx4.squarespace.com yil1TONG4toft*ib
-
The logo on my homepage displays well on desktop but on mobile it drops way down on the page and is really small. Is there a way to anchor the logo's position and size when viewed on a mobile device? Here's the script I'm using: header-title-logo a { position: absolute; bottom: -105px; z-index: 9999; } /* Fix logo overlap */ .header-title-logo { width: 270px; } /* header shadow */ header#header { box-shadow: 3px 4px 5px rgba(0,0,0,0.5); }