Jump to content

Replace Banner Slideshow arrows with custom SVG

Recommended Posts

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>

Screen Shot 2022-10-04 at 4.18.48 PM.png

Screen Shot 2022-10-04 at 4.19.14 PM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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!

Screen Shot 2022-10-04 at 5.24.40 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.