Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


michaelhull

Question

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!

Edited by michaelhull

Filmmaker currently living in Portland, OR. wesleepatnight.com

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 4

@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)

Link to post
  • 0

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.

Edited by brandon
Initial Revision

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

Link to post
  • 0

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
Link to post
  • 0

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)

Link to post
  • 0

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

Link to post
  • 0

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)

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...