Customize CSS in Wordpress plugin Widgets für Google Reviews from Trustindex.io

Question

I would like to customize the background of the Google reviews from the plugin Widgets für Google Reviews from Trustindex.io.

I can apply custom CSS changes in the developer console directly in the browser as follows:

.ti-widget.ti-goog .ti-review-item >.ti-inner {
    border-top-width: 2px !important;
    border-bottom-width: 2px !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
    background-color: #bbbbbb !important; /*put here whatever I want*/
    color: green; /*test selector, which works*/
}

Strangely if I put that in the custom CSS of my theme OceanWP the color works, but the background won't.

Any idea what that could be?

Answer 1

Add an extra class to target that div. The original css of the widget already uses the !important tag and has an extra class so it trumps yours. Try targeting like this:

.ti-widget.ti-goog .ti-widget-container .ti-review-item >.ti-inner {
    border-top-width: 2px !important;
    border-bottom-width: 2px !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
    background-color: #bbbbbb !important; /*put here whatever I want*/
    color: green; /*test selector, which works*/
}