carolinacantante Posted April 17, 2020 Share Posted April 17, 2020 Hello, Im trying to add an arrow to scroll down but my website is private with password. Can anyone help me? Link to comment
derricksrandomviews Posted April 17, 2020 Share Posted April 17, 2020 Not without template information and maybe access to your site, to look at. Post a link and password, not your admin password, but the viewer password. Link to comment
tuanphan Posted April 18, 2020 Share Posted April 18, 2020 Insert Code Block > Paste these code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AFisk Posted May 6, 2020 Share Posted May 6, 2020 (edited) On 4/18/2020 at 3:00 AM, tuanphan said: Insert Code Block > Paste these code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> Hey Tuan In order to create an incentive to scroll down on my banner images Ive pasted #siteWrapper:after { content: "V"; position: absolute; top: 1230px; width: 100%; text-align: center; z-index: 50; display: block; color: white; } However as you'll see on my site www.adrianfisk.com the arrow is very small and hard to see. Is there a way to make the arrow larger? I did post the your code from above though didn't get a result. My mistake may have been that I posted all of the code. It seems quite long? As ever you help is much appreciated! Adrian Edited May 6, 2020 by AFisk Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 25 minutes ago, AFisk said: Hey Tuan In order to create an incentive to scroll down on my banner images Ive pasted Where arrow? can you take a screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AFisk Posted May 6, 2020 Share Posted May 6, 2020 (edited) 4 minutes ago, tuanphan said: Where arrow? can you take a screenshot? Its very small white V , at the bottom centre Edited May 6, 2020 by AFisk Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 where... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AFisk Posted May 6, 2020 Share Posted May 6, 2020 8 minutes ago, tuanphan said: where... Thats very strange as you're showing a page that I don't have! My ACT is only on my landing page and not on the CONTACT page. What browser are you using? Can you see the small arrow in the example image I gave above. Here's another example image of the ruined house. Its a very small V bottom of the image in the centre? Link to comment
AFisk Posted May 6, 2020 Share Posted May 6, 2020 Ive just seen that it's not appearing if you're using a mobile. It only seems to be working with a desktop. Link to comment
derricksrandomviews Posted May 6, 2020 Share Posted May 6, 2020 Why not post something like this in your header or top of page. It will show up on both desktop and mobile. Link to comment
AFisk Posted May 6, 2020 Share Posted May 6, 2020 1 hour ago, derricksrandomviews said: Why not post something like this in your header or top of page. It will show up on both desktop and mobile. Hi - Because it would not align with the style of my site. It's too obvious and would be better suited to a shopping site or something similar. I've found the right thing, which is the white V at the bottom of the page. All I need to know is how to Make it bigger and thicker and ideally work on a mobile. Link to comment
derricksrandomviews Posted May 6, 2020 Share Posted May 6, 2020 (edited) http://clipart-library.com/images_k/white-transparent-arrow/white-transparent-arrow-25.jpg Take this image, resize it if need be and if you can insert it, it will show up on both mobile and desktop. But make it smaller before you add it to your site. I resized on my site and it looked good for desktop but way too big on mobile. It will work better than using code I think. The bouncing arrow is a bit much, I agree. Edited May 6, 2020 by derricksrandomviews Link to comment
AFisk Posted May 6, 2020 Share Posted May 6, 2020 3 minutes ago, derricksrandomviews said: http://clipart-library.com/images_k/white-transparent-arrow/white-transparent-arrow-25.jpg Take this image, resize it if need be and if you can insert it, it will show up on both mobile and desktop. But make it smaller before you add it to your site. I resized on my site and it looked good for desktop but way too big on mobile. It will work better than using code I think. The bouncing arrow is a bit much, I agree. Derrick hi, thanks for your advice. Where would I insert the arrow and how would I get it to be placed at the bottom of the frame? Link to comment
derricksrandomviews Posted May 6, 2020 Share Posted May 6, 2020 (edited) Find a spot where you can add an image block, you can push it around with spacers if need be, one on the top of the block and expand it to move the arrow down to where you want it. I say this hoping it will work with your template. If it does you won't need the css code you have tried. Edited May 6, 2020 by derricksrandomviews Link to comment
tuanphan Posted May 7, 2020 Share Posted May 7, 2020 16 hours ago, AFisk said: Thats very strange as you're showing a page that I don't have! My ACT is only on my landing page and not on the CONTACT page. What browser are you using? Can you see the small arrow in the example image I gave above. Here's another example image of the ruined house. Its a very small V bottom of the image in the centre? Can you share link to Exactly page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AndyB Posted October 9, 2020 Share Posted October 9, 2020 On 5/6/2020 at 10:37 AM, AFisk said: Hey Tuan In order to create an incentive to scroll down on my banner images Ive pasted #siteWrapper:after { content: "V"; position: absolute; top: 1230px; width: 100%; text-align: center; z-index: 50; display: block; color: white; } However as you'll see on my site www.adrianfisk.com the arrow is very small and hard to see. Is there a way to make the arrow larger? I did post the your code from above though didn't get a result. My mistake may have been that I posted all of the code. It seems quite long? As ever you help is much appreciated! Adrian Hey Adrian, This approach might work better for you. #page .page-section:first-of-type:after { font-family: squarespace-ui-font; content: "\E009"; border: 3px solid #fff; border-radius: 50%; font-size: 30px; text-align: center; line-height: 40px; height: 40px; width: 40px; position: absolute; bottom: 15px; left: 50%; transform: translatex(-50%) !important; display: block; opacity: 1; transition: all ease .5; } This code will work on Squarespace 7.1. You can play with the font-size, height, and width numbers to adjust the size. You can also remove the "border" line if you just want the arrow. I hope this helps! Link to comment
AylaMourtada Posted January 24, 2021 Share Posted January 24, 2021 Hi @AndyB ! that's amazing you really helped. Can we change the arrow symbol to a different one? and since it's still, like if you click on it it doesn't really take you to the next block, can we make it clickable so that we achieve a smooth scroll to the next block beneath the banner image? thanks Link to comment
AndyB Posted February 5, 2021 Share Posted February 5, 2021 On 1/23/2021 at 9:12 PM, AylaMourtada said: Hi @AndyB ! that's amazing you really helped. Can we change the arrow symbol to a different one? and since it's still, like if you click on it it doesn't really take you to the next block, can we make it clickable so that we achieve a smooth scroll to the next block beneath the banner image? thanks @AylaMourtada I'm glad that helped. Yes, we can change the symbol. Here's a link I have bookmarked that offers different possibilities. You can replace \E009 with something else from this chart. Be sure to keep the quotation marks around the symbol code. https://ericaheinz.com/notes/symbol-fonts-on-squarespace/#.YB2CSXdKi3J I don't believe that it's possible to add a link to CSS using CSS. There may be a way to do this using javascript. Another option would be to use a different method to get an arrow (e.g., an image block with an arrow uploaded or a code block with HTML). I think it's more challenging to get the positioning of the arrow to work as well as it does with the approach I shared. As I'm typing this, an idea came to mind that might make positioning a Squarespace element doable. Usually, it's hard to get the arrow to the bottom of the banner because even when using "position: absolute" in the CSS for that element, the child element is still confined to the parent element's restrictions (e.g., padding, position, etc.). But, using a negative margin number may do the trick. I'll have to play with this idea and report back if it works. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment