Jump to content

Custom Color Multiple Buttons - 1 Page

Recommended Posts

Need help on this!  Worked with SquareSpace a few years and familiar with inspecting to find custom Block ID's for CSS.  However this is proving more difficult than anticipated!   I have to access the cached result on many Google listings because SS-Answers no longer hosts those answers. (frustrating) 

So I'm trying to custom color all 4 buttons on this page. (https://www.fruniti.com/products) Step-2 will be messing with hover and other features, but at this point I can't get past Step-1.  Was able to custom color ALL the buttons with last line of code, but cannot target specific button even after trying various #block IDs! Just hitting walls!   Saw other posts where users suggested targeting "collections", but I don't see those listed near my button in code.  I would prefer to avoid using the code block, as this seems like it should be achievable through CSS alone.  (i think) 

/* MANGO MOOD */
#block-yui_3_17_2_1_1566923613385_11113 h2 a { color:#ea9d39 }
#block-yui_3_17_2_1_1566923613385_11113 h3 { color:#ea9d39 }

/*  BUTTON  */
.small-button-shape-pill .sqs-block-button-element--small { background-color: #ea9d39 }

 

Link to comment
  • Replies 3
  • Created
  • Last Reply
6 hours ago, Summit227 said:

@tuanphan you rock, TY so much!   I didn't realize you could target links in that manner.   Was curious if it was going to affect anything else, as I also made the bottles clickable, but so far so good!   Now need to learn other ways I can use that same technique! 

You can wrap the code and insert to Page Header, It will affect on only 1 page

<style>
  /* 1. Mango */
.sqs-block-button-element[href="/mango-mood"] {
    background: red;
}
/* 2. Gathered Green */
.sqs-block-button-element[href="/gathered-greens"] {
    background: green;
}
</style>

 

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

Archived

This topic is now archived and is closed to further replies.

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