Custom testimonial carousel arrows with Summary Block

So you’re using a Summary Block in your Squarespace site as a testimonial carousel, but you want a way to make it look less like… you’re using the Summary Block in Squarespace as a testimonial carousel, lol.

There are a couple of ways you can achieve this: by giving the block a nice background, changing the font, adding some details or – and this is what we’re going to be focusing on today – by customizing the default arrows!

Actually, we’re going to be making all the other customizations as well because I got a bit carried away when working on this customization, but the custom carousel arrows will be the main piece of this tutorial!

So, are you ready? Let’s go!

Adding custom arrows to your carousel Summary Block

First thing’s first, we need a Summary Block set as carousel inside our page.

The one I’m working with is pulling the testimonial + client name from the excerpt of a blog page I aptly named Testimonials. In case you were wondering.

1. Starting point.png


Now, let’s start by finding out how to target our arrows so we can start moving them around.

You can skip this part if you only want to replace them with your own custom arrow.

2. How to target arrows of carousel block.png

Zooming in…

3. Inspect element zoom.png

We can see that the container holding both our arrows has two classes.

I’m going to use the first one called .summary-carousel-pager and add it into my Custom CSS window

.summary-carousel-pager {

}

And to be able to move the arrows freely, I’ll be setting them absolutely:

.summary-carousel-pager {
  position: absolute;
}
4. Moving the carousel block arrows.png

Did you see them move?

I’m going to highlight them so they’re easier to spot.

5. Highlighting arrows.png

Alright, so now let’s start putting them in place.

I want them to be aligned to the center of the block horizontally, and then have each arrow to the sides of the testimonial.

To do this, I’m going to start with setting the top and left offsets:

.summary-carousel-pager {
  position: absolute;
  top: 50%;
  left: 0;
}
6. Positioning arrows.png

It seems like it’s a bit too low right now so we’re going to use our old friend the transform property to bring our element slightly back up from where it’s currently sitting.

.summary-carousel-pager {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
7. Centering carousel block arrows.png

Great! Now let’s take care of the side placement.

We have a couple of options at this point to move the arrows, but I’m going to go with floating one of the arrows.

First, we have to expand the container holding both our arrows so it fits the entire width of our testimonial:

.summary-carousel-pager {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100% !important;
}
8. Expanding arrows.png

If you check the “clickability“ of the arrows right now, you’ll notice only one or neither of them are working.

This is because the arrow container is currently BEHIND our testimonial text container – that’s why we can read it! – so we have to bring it to the front and have the arrows be useful once again.

.summary-carousel-pager {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100% !important;
  z-index: 1;
}
9. Bringing to the front.png

Cool, they’re on top of the testimonial and therefore available for clicks again!

And don’t worry about not seeing the testimonial text right now, we’re not going to keep that background color!

Alrighty, so I mentioned we were going to go with floating one of the arrows to place each of them at the sides of the text.

Since the right – next – one is already in place, we just need to target the left – previous – one and float it to the left of the red container.

10. Selecting previous arrow carousel block.png


A little zoom here…

11. Zoom into IE.png

And we can see that our arrow has a few classes in there that we can use, however, if we look into the right sidebar of the Inspect Element window, we notice there’s a selector all ready for us that’s also including the big parent container that indicates we’re dealing with a carousel.

In fact, if we look even closer, we can notice it has the float property set to right. The same property we’re looking to switch up to the left.

Note: we’re dealing with a group of selectors here (notice the comma). One is grayed out and the other isn’t. I’m only copying the part that isn’t grayed out because it’s the selector that corresponds to the previous arrow, the one we’re targeting.

12. Selector.png

Ok, so now in our Custom CSS window we have:

.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
  
}

I’m going to give that arrow a temporary darker color so we can see it better once we move it:

13. Coloring the arrow.png

See that little dark square there? Ok, let’s float it to the left!

.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
  float: left;
}
14. Moving it to the left.png

Nice! It’s on the left side now.

Now, it seems like our arrows have some extra space below them.

Let’s check that out so we can remove it.

15. Selecting next arrow.png

Just by highlighting it we can see there’s a little orange square below it indicating there’s some margin involved.

Let’s look for the selector we’re gonna use to remove it:

16. Inspect element.png

Ok, so we have a couple of classes on this arrow as well, but as you may notice, we have a selector ready to go inside the same group of selectors we saw for the previous arrow!

17. Other selector.png

This means that if we use both groups of selectors at once, we can kill two birds with one stone because the margin has been set for both! Meaning we can also get rid of it for both arrows at the same time.

.sqs-gallery-design-carousel .sqs-gallery-controls .previous,
.sqs-gallery-design-carousel .sqs-gallery-controls .next {
  
}
18. Targeting both carousel block arrows.png

Let’s go ahead and do that! Set our new margin to 0 all around.

.sqs-gallery-design-carousel .sqs-gallery-controls .previous,
.sqs-gallery-design-carousel .sqs-gallery-controls .next {
  margin: 0;
}
19. Removing margin.png

Alright! With all that prep out of the way, it’s time for the juicy stuff.

Let’s switch those default carousel summary block arrows for some custom ones shall we?!

I’m going to be using a pair of really nice arrows I got from Flaticon but you can use ones you made on your own, or any other type of symbol or image you like!

The way we’re going to be doing this is by taking advantage of the existing structure of the Summary Block arrows.

These are being set by Squarespace as pseudo-elements, so we’re going to be substituting the contents of those pseudo-elements with our own (aka our custom arrows)!

If we look for the arrow icons in our Inspect Element window…

20. Switching summary carousel block arrows.png

We notice they’ve been set under a ::before pseudo-element, where the arrow icon is a unicode character as indicated below:

21. Zoom in marked.png

So what we’re going to do here is grab the selector Squarespace already used to set that icon so we can replace it with our own.

22. Grabbing selector.png

We’ll do the same thing for the other arrow, located further down the code.

23. Grabbing second selector.png

Perfect!

We can group these two to set the general styles they’ll both have, and then use them separately to add each corresponding arrow image.

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before,
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  
}
24. Custom CSS window in Squarespace.png

For both arrows, we’ll set the content property as an empty container and set the width and height of the image we’re going to be using.

In this case, my arrows are 32x32 so that’s the size I’ll be working with.

Since we’re not using the background size property in this tutorial, make sure to use a width and height based on the size of the image you’re using, aka check that your image is as big or as small as you want it to display from the get-go.

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before,
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  content: '';
  width: 32px;
  height: 32px;
}
26. Increasing size.png

See how the space grew a bit? Awesome!

Now it’s time to add our new arrows separately under its corresponding selector.

I already uploaded both images to my Custom CSS window by clicking on “Manage Custom Files“.

Let’s start with the right one.

Here’s the selector for that one (that we previously used inside a group with the left arrow):

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  
}

We only need to add the image as a background by using the url that we get from Squarespace when clicking over the uploaded file:

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  background: url('https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bbf71fd652deaa7fea2bb29/1539273213466/right-arrow.png');
}
27. Adding image through CSS in Squarespace.png
28. Different arrow summary block carousel Squarespace.png

Look at that! One arrow down!

Let’s do the other one exactly the same way, but by using the corresponding selector and image.

.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  background: url('https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bbf7067f4e1fca6b358bb02/1539272807468/left-arrow.png');
}
29. Switching the left arrow.png

And let’s remove that black box highlight we had before to check…

30. Removing black highlight.png

Alright!

We have custom arrows!

Now, let’s get rid of the awful red background as well.

31. Removing red highlight.png

Beautiful!

We now have custom arrows for our testimonial carousel in Squarespace!

32. Changing arrows in carousel summary block Squarespace.png

Let’s check this on smaller screens…

33. Result in tablet.png
34. Result in phone.png

I don’t know about you but it feels the arrows are a tad too close to the edges of the browser screen, so let’s go back to where we removed the margin on all sides, and set some margin all around to give that extra spacing there that we’re missing!

.sqs-gallery-design-carousel .sqs-gallery-controls .previous,
.sqs-gallery-design-carousel .sqs-gallery-controls .next {
  margin: 10px;
}
35. Adding margin back.png
36. Result in tablet.png

Much better!

But I think it will be a good idea to reduce the width of the testimonial itself so the arrows don’t overlap it.

Let’s take a look at how to target it.

37. Targeting summary excerpt.png
38. Inspect element.png

We can see the container is called .summary-excerpt, and that the actual text is a p element inside it.

Let’s target that paragraph element to add some padding and separate it from the arrows.

39. P element.png

We should also target the carousel block directly to avoid making changes to any other summary excerpts we may have on our site.

Scrolling up a bit through the parent containers we have one that explicitly indicates we’re dealing with a carousel slide, so we can use that.

40. Targeting container for carousel summary block.png

Putting it together we get:

.sqs-gallery-design-carousel-slide .summary-excerpt p {
  
}
41. Constructing selector.png

So, let’s make some changes!

I’m going to be taking advantage of this to style the font a bit as well as giving it the padding I want to add some whitespace around the text.

.sqs-gallery-design-carousel-slide .summary-excerpt p {
  font-size: 25px;
  font-family: minion;
  font-style: italic;
  padding: 10px 80px;
}
45. Fixing padding.png

Nice! Let’s take a look at this on tablets and phones:

46. Result in tablet.png
47. Result in phone.png

Great! This is turning out fantastic!

Now, I want the name of the testimonial giver to be different from the actual testimonial.

Therefore, I’m going to be taking advantage of the fact that I made the name bold – completely on purpose – to be able to target it separately from the rest of the text and give it its own styles!

48. Targeting bold font in summary excerpt.png

See how the person’s name is wrapped around a strong tag inside the p element we targeted before?

We can use that extra element selector in our code to change the font of the name.

I’m also setting it as block so it sits entirely in a new line below the rest of the testimonial.

.sqs-gallery-design-carousel-slide .summary-excerpt p strong {
  font-size: 14px;
  color: #898989;
  font-family: montserrat;
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  display: block;
}
49. Styling summary block carousel excerpt Squarespace.png

Beautiful!

Styling the carousel Summary Block

You can stop here if you like and enjoy the absolutely gorgeous customized arrows you added to your carousel Summary Block along with the new font style!

However, if you want to take this customization one step further and make your testimonial carousel block more visible, keep going because we’re going to be giving it a nice branded background!

I don’t want my background to move with each slide, so I’m going to be adding it to the bigger container holding all of my slides instead.

50. Selecting entire background of summary block carousel.png

Zooming in we can see A BUNCH of classes…

51. Zooming in.png


But we don’t need all of them, so I’m going to go with .sqs-gallery-design-carousel since it doesn’t seem to depend on any of the settings of the block itself.

.sqs-gallery-design-carousel {
  
}

And I’ll just give it a nice green background.

.sqs-gallery-design-carousel {
  background: #CCD1C9;
}
52. Adding a background color to carousel summary block.png

Next, let’s reduce the overall size of the container and set it to a max-width of about 800px and center it:

.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
}
53. Reducing the size of the carousel summary  block.png

Alright, now how about we place the arrows inside the green background?

To do it, we simply need to set this container as relative, so it acts as the parent container of reference for the arrow container.

.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
54. Keeping arrows inside.png

Ok! Let’s add some additional padding for the green background.

.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 80px;
}
55. Adding padding.png

Nice! Let’s check mobile devices

56. Result in tablet.png
57. Result in phone.png

It looks good in tablet but we have to do something about the padding and font size on phone screens, so let’s set up a media query to fix it!

@media screen and (max-width: 640px) {
  .sqs-gallery-design-carousel {
    padding: 30px 10px;
  }
  .sqs-gallery-design-carousel-slide .summary-excerpt p {
    font-size: 20px;
    padding: 10px 50px;
  }
}
60. Fixing padding.png

Awesome!

I want to do ooooone last customization to this.

I’ll be placing the arrows outside of the block again, by removing the position relative we gave to our green container:

.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px;
}
63. Another result with arrows outside.png

And then adding the bottom border:

.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px;
  border-bottom: 3px solid black;
}
64. Adding a border bottom.png

We got two lines popping up instead of one, which means that the selector we’re using for our green container might not be specific enough. We just couldn’t tell solely by the background color.

Let’s head back to our Inspect Element window to look for another class name that we can bundle up with our current one to make it clear we’re just targeting the big container, and not the one that seems to be for our individual slides.

65. Inspect element.png

Alright, we can use .summary-block-wrapper as well, so now our previous selector:

.sqs-gallery-design-carousel {
  
}

Becomes this instead:

.summary-block-wrapper.sqs-gallery-design-carousel {
  
}

And now we can simply replace this inside our code…

.summary-block-wrapper.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px;
  border-bottom: 3px solid black;
}
66. Border at the bottom.png

And voilá!

That’s what it looks like with the arrows on the outside.

And this is what it looks like with the arrows on the inside:

.summary-block-wrapper.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 80px;
  border-bottom: 3px solid black;
}
67. Arrows back inside.png
68. Result on tablet.png
69. Result on phone.png

Neat right?!

So there you have it, that’s how you can replace the carousel Summary Block arrows for your custom arrows and also style the heck out of your testimonials!

Until next time,

B.

 

Full code

/*Customizing the controls*/
.summary-carousel-pager {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100% !important;
  z-index: 1;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
  float: left;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous,
.sqs-gallery-design-carousel .sqs-gallery-controls .next {
  margin: 10px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before,
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  content: '';
  width: 32px;
  height: 32px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
  background: url('image-url-goes-here');
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
  background: url('image-url-goes-here');
}

/*Styling the fonts*/
.sqs-gallery-design-carousel-slide .summary-excerpt p {
  font-size: 25px;
  font-family: minion;
  font-style: italic;
  padding: 10px 80px;
}
.sqs-gallery-design-carousel-slide .summary-excerpt p strong {
  font-size: 14px;
  color: #898989;
  font-family: montserrat;
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  display: block;
}

/*Styling the background*/
.summary-block-wrapper.sqs-gallery-design-carousel {
  background: #CCD1C9;
  max-width: 800px;
  margin: 0 auto;
  position: relative; /*remove to keep arrows outside of the box*/
  padding: 80px;
  border-bottom: 3px solid black;
}