Jump to content

Summary Block Navigation Arrows positioning

Recommended Posts

Hi there,

I am drafting a site with my portfolio and I would like to know if it would be possible to inject some CSS code onto the back-end to move the navigation arrows (< and >) below the image of my carousel here (carousel created with summary blocks). 
https://chicory-dodecahedron-3tgm.squarespace.com
Password: Square2024

Ideally I would also like to customise these arrows to the below:
Left  arrow-left-testimonials-6.png
Right arrow-right-testimonials-6.png

See attached the mockup of the final design.

Hopefully someone might be able to help me here.
Thank you!

Navigation Arrows.jpg

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

You can use this code to Website > Website Tools > Custom CSS
 

div.summary-v2-block .sqs-gallery-controls .next, div.summary-v2-block .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
    width: 50px !important;
}
div.summary-v2-block .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png) !important;
}
div.summary-v2-block .sqs-gallery-controls .next:before, div.summary-v2-block .sqs-gallery-controls .previous:before {
    visibility: hidden;
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: 200px !important;
}

image.thumb.png.8f7560d3e5c0a11b2320ebaa0d5041bb.png

 

To move position, use this CSS code

header.summary-block-header {
    position: absolute;
    bottom: 0;
    right: 0;
}

.summary-item-list {
    position: relative;
}

.sqs-gallery-design-carousel .sqs-gallery-container {
    position: relative;
}

image.thumb.png.7cab083c28b6e71134015d4ead406fe9.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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


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