Jump to content

Customizing button styling on one page in an index

Recommended Posts

Site URL: http://www.studio-poise.com/new

I believe I've identified the right code to alter the button to the color/style I would like. When I add it to the CSS editor, it changes it the right way on the WHOLE site. The problem I'm having is targeting ONE page of the index. I've tried using collection ID, I've tried using the URL slug #the-space-intro-section (using pacific template), I've tried even using the specific box identifier - nothing seems to work! I've successfully changed the heading colors for each section using the URL slug, but can't seem to get this to work... I'm trying to get the button color to match the h1 color for each section (3 different sub-brands on one page). Any help/guidance would be GREATLY appreciated.

.medium-button-style-outline .sqs-block-button .sqs-block-button-element--medium {border-color: #b4c0b6; color: #b4c0b6
  }
.medium-button-style-outline .sqs-block-button .sqs-block-button-element--medium:hover {border-color: #b4c0b6; background-color: #b4c0b6
}

Link to comment
  • Replies 10
  • Views 534
  • Created
  • Last Reply

Hi. Try this code

/* New page - buttons */
body#collection-605bce2a54d3fe3f12287f67 {
.sqs-block-button-element--medium {
border-color: #b4c0b6; color: #b4c0b6;
  }
.sqs-block-button .sqs-block-button-element--medium:hover {
border-color: #b4c0b6; background-color: #b4c0b6;
}
}

 

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
4 hours ago, tuanphan said:

Hi. Try this code


/* New page - buttons */
body#collection-605bce2a54d3fe3f12287f67 {
.sqs-block-button-element--medium {
border-color: #b4c0b6; color: #b4c0b6;
  }
.sqs-block-button .sqs-block-button-element--medium:hover {
border-color: #b4c0b6; background-color: #b4c0b6;
}
}

 

Thank you! Sadly, not working for me. 

It's the strangest thing. The CSS I wrote does exactly what I need it to do style-wise, I just can't seem to apply it to individual pages in an index!

Link to comment
On 4/19/2021 at 8:04 PM, whitneyleebuckley said:

Thank you! Sadly, not working for me. 

It's the strangest thing. The CSS I wrote does exactly what I need it to do style-wise, I just can't seem to apply it to individual pages in an index!

You mean this button? image.thumb.png.cb0c0a75012e683dad96dc88738b989f.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
14 hours ago, tuanphan said:

You mean this button? image.thumb.png.cb0c0a75012e683dad96dc88738b989f.png

Yes. Well, technically, there are three buttons like that in that index page. The first one (you pictured) can stay as is, it's the second two sections that I'm looking to match the button color to the little icon color. I've got it on the individual landing pages (see here and here), but for some reason isolating these buttons on the index page is proving tricky!

 
Link to comment
On 4/22/2021 at 7:31 AM, whitneyleebuckley said:

Yes. Well, technically, there are three buttons like that in that index page. The first one (you pictured) can stay as is, it's the second two sections that I'm looking to match the button color to the little icon color. I've got it on the individual landing pages (see here and here), but for some reason isolating these buttons on the index page is proving tricky!

 
  •  

Did you add code to Index Item Header?

if yes, you can move code into Index Page Header

 

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
On 5/10/2021 at 8:52 PM, whitneyleebuckley said:

This is what it does when I add it to the index page in the header. All the items turn red when I add the individual section. If I leave the code without the section it works, but applies it to every button on the page...

 

Screen Shot 2021-05-10 at 9.50.16 AM.png

I didn't send <style> & </style>

Also, add code to DESIGN > CUSTOM CSS, without <style> tag

 

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.