How to change Services background colour

Hi,

Could you please tell me how to change the background colour of the Services Style 2. I have used the code I found in the support posts to change the hover colour (see below) but I want to change the background colour also.

.services-a-section.style2 .roll-icon-box:hover {
background-color: #fcb421;
}

Thanks.

Hi,

Can you share your site URL here?

Regards,
Awan

Hi. Sorry for delay. Its not live but here is the URL: https://www.delawarenorthaustraliajobs.com/

Hi,

Have you tried to change the background color of the rows from the page builder settings? Please try to follow this steps:
Edit page > Edit row > row styles > Design > Background color

So, after you set the background color from there, you do not need to use the custom CSS code again.

Regards,
Awan

Thanks Awan but that changes the row colour and I have a background image on the row with a Heading widget and a Services widget. It’s the background on the Services widget I need to change.

Referring to this demo page http://demo.athemes.com/sydney-pro/
Did you mean this box http://prntscr.com/iefj6p? If yes, use this CSS code instead:

.services-a-section.style2 .roll-icon-box {
    background-color: green;
}

Your CSS code in above used to change the background when the box has hovered.

Regards,
Awan

Yes that is it. Thanks for your help Awan!

1 Like