Jump to content

Customizing Navigation on Summary Blocks

Go to solution Solved by Ziggy,

Recommended Posts

https://thebougiebouquet.squarespace.com/

Password: bougie

Hoping someone can help.  I've created a sample site for me to design, practice, and learn more about adding code to the sites I design.  A few sections down, I've used a summary block using the blog collection with text only in order to have kind of a "here's how to work with me" informational carousel with placeholder copy.  And I customized the left and right arrows with my own images based on what I've learned on this forum.

Problem is, the old arrows are still showing above/behind my new, longer arrows and I can't figure out 1) why they're even there since I supposedly changed the icon out, and 2) how to remove them.  Thanks in advance for any help!

I attached an image, and here's the code I used:

//* Summary arrows *//
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    background-image: url("https://static1.squarespace.com/static/64d0653331f2a429157a7176/t/65451edf02b397329946337b/1699028703701/bb_arrows-left-redorg.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100px;
    height: 30px;
  	margin-left: 0px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    background-image: url("https://static1.squarespace.com/static/64d0653331f2a429157a7176/t/65451edf212a0c482a58880d/1699028703708/bb_arrows-right_redorg.png");
  	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100px;
    height: 30px;
   	margin-right: 0px;
}
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: 100%;
    justify-content: space-between;
    float: none !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:after {
    position: relative;
}
span.summary-carousel-pager-next.next:after {
    float: left;
}

 

Screenshot 2023-11-03 at 12.29.51 PM.png

Link to comment
  • Solution

Try this additional CSS targeting the colour of the old arrows:

.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    color: transparent !important;
}

You may need to get the placement of this in the correct in the order of the Custom CSS you have.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, Ziggy said:

Try this additional CSS targeting the colour of the old arrows:

.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    color: transparent !important;
}

You may need to get the placement of this in the correct in the order of the Custom CSS you have.

Thank you!  Is there no way to remove them entirely -- or is it built into Squarespace in such a way where the only option is to make them transparent?

Link to comment
15 minutes ago, AmyMcKinney said:

I can't figure out 1) why they're even there since I supposedly changed the icon out

This is because in the code, you haven't changed them out, you added your new arrows to the old arrows. It's probably best not to manually delete SS elements, as might have unintended consequences.

You could hide the old arrows, but not with the way the new arrows have been added. Ziggy's way is effective for what you need!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

Ziggy did all the leg work, but you are welcome and glad it is working for you now 🙂

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

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.