CTA button color per background color

Hello,

I am moving along quite well in customizing my Sydney theme site thanks to this forum help. I have read many topics but none regarding this particular question.

On my front page, some rows have the dark overlay background and others do not (light). Most of the rows have a call to action button. How can I make the button color change per background color? Meaning: on light background rows the button would appear dark (hex color #1) with a light hover color (hex color #2), the opposite would happen on dark background rows.

Is this even possible?

If not, I will simply choose a contrast color, though I would prefer to keep the color scheme monochrome.

Lilou

I found this thread this morning. Is changing the color per row my best option?

https://athemes.com/forums/topic/changing-background-colour-of-specific-cta-buttons/

Hi,

To cusotmize your CTA buttons, we need to get the element ID of the rows manually. We can get it by inspect the element using browser dev tools. To help you further, can you share your site URL here?

Regards,
Awan

Hello Awan,

Unfortunately my site is no where near ready for publication. I found the a browser dev tool in the browser I typically use for viewing my site while I work. I found all kinds of information such as the tag in the index for one of the buttons. I found no specific ID for the element.

All in the same area of the code, I found the following ID information:
page-row is 535-0

 There is this I am not sure what it refers to:<div id="pgc-535-0-0"  class="panel-grid-cell" >

 There is also this: <div id="panel-535-0-0-0" class="so-panel widget widget_sydney_services_type_a sydney_services_widget panel-first-child panel-last-child" data-index="0" >

It is my first time in a browser dev tool. I coded my previous site manually with Notepad++ (very basic stuff), so I am fumbling my way around. I right clicked on my button and choose the “Inspect” menu item. In the various “element ID” properties I found, I see this: [Exception: TypeError: Illegal invocation at Element.remoteFunction (<anonymous>:2:14)]

Is 2:14 the ID I am looking for?

Thanks,

Lilou

Hi Lilou,

I am sorry, I can’t give you any advice if I can’t check your site directly :slight_smile:

Regards,
Awan