Create custom "Next" and "Previous" buttons for slideshow gallery in a page in Wells template.

This may sound like a fairly straight-forward question, but upon spending hours searching for the answer and eventually coming up blank, I've decided to post it here.

I am trying to add "Next" and "Previous" links beneath a slideshow gallery on one of my pages in the Wells template.

It may be important to note that the page is not a "gallery" page but rather a regular page with a slideshow gallery inserted. It may sound like there is not much difference, but ultimately there is, as the "Gallery Design" options cannot be accessed in the "Design" section of SquareSpace. Thus the only option I am given for "Next" and "Previous" buttons are two translucent arrows on either side of the frame. (I am not super crazy about this)

Here is what the page currently looks like:

http://www.michaelhull.co/team302/

Here is what I want the page to look like:

http://www.michaelhull.co/team302-2/

Can anybody help me? Thanks in advance!

Hi @michaelhull

FYI: I posted an answer, but it's apparently awaiting moderator approval before it's visible. I don't know what priority SS puts on this moderation process. If you don't see the answer after awhile, you might have to bug them.

@michaelhull

Hi. This should be do-able. The following CSS restyles the default next/previous arrows. Insert this using the style editor.

.sqs-gallery-controls {
   background-color: white;
   padding-top: 25px
}

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
   background-color: transparent;
   margin-top: 0;
 padding: 0 !important;
 line-height: inherit;
   position: static;
}

.sqs-gallery-controls .previous:hover, .sqs-gallery-controls .next:hover {
   background-color: transparent;
}

.sqs-gallery-controls .previous::before, .sqs-gallery-controls .next::before {
   color: #2E2E2E;
   width: inherit;
   font-size: 10px;
   font-family: inherit;
}

.sqs-gallery-controls .previous::before {
   content: "PREV";
}

.sqs-gallery-controls .next::before {
   content: "NEXT";
}

.previous::after {
 content: "/";
 color: #2E2E2E;
 margin-left: 5px
}

Do keep in mind that code like this can break if SQSP changes the template code. Also, I didn't test this across your site. If you're using galleries in other places, it might negatively affect them. So you'll need to test and tweak as necessary. Also, a disclaimer that I can't guarantee or warranty the results of using this code (use at your own risk).

Finally, if this code helps you out, consider marking this answer as accepted. Or, inquire further or wait and see what others here have to offer.

-Brandon

Hi Brandon

I have a similar problem. I want to change the "prev / next" controls to arrows or "<" and ">".

When I paste this into the Custom CSS editor nothing happens at all.

I have a very rudimentary understanding of CSS/code. Can you help with this issue or let me know what I might be doing wrong???? We are desperate to fix this issue.

• Caroline

Hi Caroline. I would post a new question with your description and a link to the page in question. Then you can comment on your question with @BrandonW (case sensitive) and I'll be notified and will try to take a look. It could be that your template requires slightly modified code.

Fantastic - thank you to BrandonW, I have been searching for this for months and, being a CSS novice could not get it working myself. I don't have enough points to vote for it....the CSS below did the trick

On second thought, Caroline, simply try using the code I provided but instead of "content: NEXT" and "content: PREV" use "content: >" and "content: <".

BrandonW, this is super helpful. I have a small adjustment that I would like to make and was wondering if you or someone else might have an answer. How could I separate the texts "next" and "previous" and align them to the left and right sides of the slideshow gallery? See the image for reference. http://www.davidjaubert.com/copan-archaeology-museum

Thanks a lot!