Sydney Pro Services Widget

Hello Support,

I am using the Services Type A, Style 2 widget.

I can’t seem to find a way to change the colors of the Services interior boxes.

The standard colors are a light grey background, with a hover over color of red.

I’d like to change the light grey background to tan (#dd9933), with a hover color of black (#000000).

Will you please advise me on how to make the changes?

Thanks! Bo


You can use this CSS code below to change the hover color:

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


Thanks!, That worked great for the hover over.

What is the code to change the light grey background?

Also, the text within the same box is remaining white, regardless of what color I change it to.

Will you please provide the code to change the letter coloring inside the widget box (to black)?

Thank you, Bo

Sure, here you go:

.services-a-section.style2 .roll-icon-box {
    background-color: yellow;
    color: red;
.services-a-section.style2 .roll-icon-box:hover h3 {
    color: yellow !important;
.services-a-section.style2 .roll-icon-box:hover p {
    color: yellow !important;

Thank you very much, Awan.

1 Like

So I am still having a challenge with this. The coding you provided changed the hover over background to yellow, with the text in the Sydney Services A widget remaining white.

Will you please provide the coding to change the text from white to black?

What’s interesting is that I used the same widget on a secondary page, and the text came up black. So it’s working properly on the secondary page, but not on the home page!?!?

If you prefer to see for yourself, please visit my site:

Thank you!


Try this:

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

If the code still not working, please change the black value to black !important

Still not working, both black and black !important. It is changing the background to black, leaving the text as white. I prefer the opposite - white background, black text.

Thanks much Awan.


Try this:

.services-a-section.style2 .roll-icon-box {
    background-color: white;
    color: black;

Same with the previously, if its not working, try to add !important after the color name.