knockout Posted October 4, 2022 Share Posted October 4, 2022 Site URL: https://roadrunner-echidna-9e76.squarespace.com/ PW: ephemora2k22 I've figured out the CSS to change the stroke color and width of the existing arrows, and to remove or change the shape of the encapsulating circles, but I have a custom arrow I'm using throughout the site and would like to insert that in place of the built-in arrows for consistency. How do I do this? This is the code I currently have affecting the banner slideshow auto-layout: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background { opacity: 0; } .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-foreground { stroke: @blue; } .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-path { stroke-width: 3px; } The first screenshot is the results of this code. The second screenshot is what I want it to look like. I've included the HTML for my custom SVG arrow below. <svg class="custom-arrow" version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22.91 10.19" style="enable-background:new 0 0 22.91 10.19;" xml:space="preserve"> <path class="arrow" d="M15.39,0h-0.88v4.08H0v2.04h14.52v4.08h0.88l7.52-4.45v-1.3L15.39,0z M16.07,7.66V2.53l4.46,2.57L16.07,7.66z"/> </svg> Link to comment
Ziggy Posted October 4, 2022 Share Posted October 4, 2022 I would suggest that you should upload the SVG to your website, and then use this CSS and in the content add the URL for the svg. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
knockout Posted October 4, 2022 Author Share Posted October 4, 2022 29 minutes ago, Ziggy said: I would suggest that you should upload the SVG to your website, and then use this CSS and in the content add the URL for the svg. Thank you!! This was the exact starting point I needed. Here's the CSS and a screenshot of the final result, as well as some notes: section[data-section-id="633754fe7c506e2e4e13c01a"] { .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-icon-background { opacity: 0; } svg.user-items-list-banner-slideshow__arrow-icon { display: none !important; } button.user-items-list-banner-slideshow__arrow-button--left:before { content: @blue-arrow-left; display: block; width: 70%; margin-left: auto; margin-right: auto; opacity: 1; } button.user-items-list-banner-slideshow__arrow-button--right:before { content: @blue-arrow-right; display: block; width: 70%; margin-left: auto; margin-right: auto; opacity: 1; } } So first I had to keep my CSS of removing the circle backgrounds of the arrows. I uploaded my SVG files in their proper color (because you can't customize color of uploaded SVGs in CSS) to a disabled page and defined them using this code at the top of my CSS document: @blue-arrow-right: url('/s/Ephemora-Arrow-BlueRight.svg'); @blue-arrow-left: url('/s/Ephemora-Arrow-BlueLeft.svg'); So those are what's referenced in the code above. I also wanted them a little smaller, so I set the width to 70% and centered them in their containers with the margin properties. Lastly, for some reason the :after pseudo-element on the right arrow meant that once I had clicked on the right arrow, it disappeared until I clicked on the left arrow. I don't know why this happened. But changing it to a :before pseudo-element, as it is with the left arrow, fixed this issue. I don't understand this, but it worked so I'm rolling with it. Thank you to you and @tuanphan for the help! Link to comment
Ziggy Posted October 4, 2022 Share Posted October 4, 2022 19 minutes ago, knockout said: I don't understand this, but it worked so I'm rolling with it. That works! TLCDesigns 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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