JessicaWare Posted April 9 Share Posted April 9 Site URL: https://algae-lute-kkft.squarespace.com/ Password: lucid Hi, I've been looking for some custom code to change the navigation arrow style for the carousel used on our About page here: https://algae-lute-kkft.squarespace.com/about but can't seem to find any that work. I'd like the arrow style to look like the attached image. Any help much appreciated! Thanks Link to comment
humxahafeex Posted April 9 Share Posted April 9 Please set password to website it's currently PRIVATE. Link to comment
JessicaWare Posted April 9 Author Share Posted April 9 @humxahafeex sorry try it now ! Link to comment
JessicaWare Posted April 9 Author Share Posted April 9 @humxahafeex were you able to view the site? Any help would be much appreciated. Thanks! Link to comment
JessicaWare Posted April 10 Author Share Posted April 10 @tuanphan Hi! Any chance you'd be able to help with this? I've seen some previous posts where you've helped people do similar, but for some reason when I copy the code you've given it doesn't work on my site - I'm guessing I'm not referring to the right block in the code maybe. Any help would be much appreciated! Thanks Link to comment
Solution tuanphan Posted April 13 Solution Share Posted April 13 On 4/10/2024 at 9:01 AM, JessicaWare said: @tuanphan Hi! Any chance you'd be able to help with this? I've seen some previous posts where you've helped people do similar, but for some reason when I copy the code you've given it doesn't work on my site - I'm guessing I'm not referring to the right block in the code maybe. Any help would be much appreciated! Thanks Use this code to Website > Website Tools > Custom CSS. Here I used an example arrow icon url, you can replace with your icon url body#collection-65ace4e2fb0c2f0015d2b8bf { button[class*="arrow-button"] svg { display: none !important; } [class*="arrow-icon-background"] { background-size: contain; background-repeat:no-repeat; background-position: center center; background-color: transparent !important; } button[class*="arrow-button--left"] [class*="arrow-icon-background"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png); } button[class*="arrow-button--right"] [class*="arrow-icon-background"] { background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png); }} zoga_sufefi3 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JessicaWare Posted April 16 Author Share Posted April 16 @tuanphan hi again! do you know if I'd be able to switch out the code for this so it uses the same arrows that are used on the bottom of my project pages (have a look at the bottom of the page here: https://www.lucidinteriors.com.au/projects/quarrybarn). I've tried to inspect and replace the icon names with "caret-right-icon--small" and "caret-left-icon--small". But I must be doing something wrong as they just go blank. Thanks in advance! Link to comment
tuanphan Posted April 16 Share Posted April 16 4 hours ago, JessicaWare said: @tuanphan hi again! do you know if I'd be able to switch out the code for this so it uses the same arrows that are used on the bottom of my project pages (have a look at the bottom of the page here: https://www.lucidinteriors.com.au/projects/quarrybarn). I've tried to inspect and replace the icon names with "caret-right-icon--small" and "caret-left-icon--small". But I must be doing something wrong as they just go blank. Thanks in advance! Do you use Personal or Business Plan? I can test new code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JessicaWare Posted April 17 Author Share Posted April 17 @tuanphan we have a business plan. That would be amazing if you could test - thanks so much Link to comment
tuanphan Posted April 19 Share Posted April 19 On 4/17/2024 at 7:05 AM, JessicaWare said: @tuanphan we have a business plan. That would be amazing if you could test - thanks so much You can use this CSS code [data-section-id="660f3e4a407c38034e075266"] { .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area { background-image: none !important; } button:nth-child(2) .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:after { content: "\e009"; font-family: 'squarespace-ui-font'; display: block; transform: rotate(-90deg); font-size: 40px; } button:nth-child(1) .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area:after { content: "\e009"; font-family: 'squarespace-ui-font'; display: block; transform: rotate(90deg); font-size: 40px; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JessicaWare Posted May 2 Author Share Posted May 2 @tuanphan the code didn't work, it made the arrow style look like the attached. Any idea what went wrong? mipu_jerome86 1 Link to comment
tuanphan Posted May 4 Share Posted May 4 On 5/2/2024 at 10:47 AM, JessicaWare said: @tuanphan the code didn't work, it made the arrow style look like the attached. Any idea what went wrong? Maybe you added code to wrong position. I just tested from my browser and it works. You try move the code to top of CSS box. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JessicaWare Posted May 8 Author Share Posted May 8 @tuanphan weird - I'm not sure what I could be doing wrong. I've moved the code to the top of the CSS box and it still looks like the attached. I've tried removing and re-adding but it's still the same. Link to comment
tuanphan Posted May 9 Share Posted May 9 23 hours ago, JessicaWare said: @tuanphan weird - I'm not sure what I could be doing wrong. I've moved the code to the top of the CSS box and it still looks like the attached. I've tried removing and re-adding but it's still the same. Can you send all current code in CSS box? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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