Customizing button styling on one page in an index

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
}

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;
}
}

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!

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? 

14 hours ago, tuanphan said:

You mean this button? 

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

On 4/24/2021 at 5:27 AM, tuanphan said:

Did you add code to Index Item Header?

if yes, you can move code into Index Page Header

 

Yes, I've tried adding to the individual page header injection, as well as to the index item header. It's the strangest thing!

On 4/26/2021 at 6:52 PM, whitneyleebuckley said:

Yes, I've tried adding to the individual page header injection, as well as to the index item header. It's the strangest thing!

Hi. Do you still need help on this?

On 5/2/2021 at 10:41 PM, tuanphan said:

Hi. Do you still need help on this?

Yes, it's still eluding me. The strangest thing!

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

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

 

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

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