Jump to content

How to customize button colors on only single website page with all button sections using the same site style

Go to solution Solved by Web_Solutions,

Recommended Posts

Site: https://ballroombluesfest.squarespace.com/package-options-2022

Password: BLUES

Hoping to make the buttons listed ONLY on this page to correspond to the coloring of the designated "seat section" it will link to for purchase (colors on seating chart). The (3) sections use same site style; however, I want to customize them to be unique colors on this page of site only. 

Thanks in advance!

Link to comment
21 minutes ago, ColeH_design said:

also… how to change the navigation link "packages" red (to be different from other items in nav). THANK YOU!!

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

// For button color
// 1st-button
#block-yui_3_17_2_1_1695145597179_13059 .sqs-block-button-element--medium {
  background: green !important;
  color: white !important;
}
// 2nd-button
#block-yui_3_17_2_1_1695145597179_33729 .sqs-block-button-element--medium {
  background: blue !important;
  color: white !important;
}
// 3rd-button
#block-yui_3_17_2_1_1695145597179_39175 .sqs-block-button-element--medium {
  background: darkblue !important;
  color: white !important;
}

// For PACKAGES navigation link color
[href="/package-options-2022"] {
  color: red !important;
}

 

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
5 minutes ago, ColeH_design said:

@Web_Solutions thank you so much! I inserted code and everything was successful. I'm hoping that the (3) buttons on the page can each be a different color (code above does successfully change color, but changes all the same). 

Is it possible to write code that will allow me to designate a unique color code for each of the (3) buttons on this page only?

Yes, I have updated the code. Please try with the code

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
10 minutes ago, ColeH_design said:

Is it possible to write code that would allow a line of copy to be click-able – linking to a section at the bottom of the same page?

Page: https://ballroombluesfest.squarespace.com/package-options-2022
Wanting a line of copy to link and jump to last section on page (package payment options)

 

Yes, where do you want to add the link and where do you want to link?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.