Jump to content

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

Recommended Posts

Posted

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!

Filmmaker currently living in Portland, OR. wesleepatnight.com

  • Replies 7
  • Views 14.4k
  • Created
  • Last Reply
Posted

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Posted

@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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

  • 1 month later...
Posted

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
Posted

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Posted

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

Posted

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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

  • 3 years later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.