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

Slideshow navigation custom CSS


joanapaprika

Question

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

To replace the arrows, use this. To make the floating prev/next cursors would be more involved.

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: 'Prev';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: 'Next';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control .gallery-reel-control-btn-icon svg {
  visibility: hidden;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
On 8/8/2020 at 12:51 PM, rwp said:

To replace the arrows, use this. To make the floating prev/next cursors would be more involved.


[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: 'Prev';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: 'Next';
  word-wrap: normal;
  top: 2px;
  position: absolute;
  left: -1px;
}

[data-section-id="5f0c8246f812da717b1a434c"] .gallery-reel-control .gallery-reel-control-btn-icon svg {
  visibility: hidden;
}

Thank you so much for this. A couple of final things: how can I change the type to a specific heading style stipulated on Squarespace? And finally how can I remove those white boxes? Thanks!

 

 

Link to post
  • 0

You have to add the font family, size, etc to the css for the button.

For the white box

.gallery-reel-control-btn::before {
  background: transparent !important;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
On 8/10/2020 at 3:04 AM, rwp said:

You have to add the font family, size, etc to the css for the button.

For the white box


.gallery-reel-control-btn::before {
  background: transparent !important;
}

Perfect, many thanks!

 

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