Tweaking components layout

You can edit the look and the layout of review boxes as you need by tweaking settings inside templates or preferences page.
Your WordPress theme could override some plugins CSS style, or you need more advanced customization so you can edit the design of reviews box by adding your custom CSS rules inside related text area of Reviewer > Preferences page

How can I find the CSS rules to tweak?

Finding the CSS rules is an easy operation. Let's check a real example for describing the process.

We would like to change the social icons colors of user reviews from grey color to a nicer blue. 

Open the page in a modern browser - in this example, we use Google Chrome. Right-click with the mouse on one of the icons and choose Inspect from the drop-down menu (the menu item name should be different from browser to browser). 

The Developer Tools will be opened. You will find the CSS Style tab and then look for the CSS rule identifier for the desired element - the social icon one in our case.

The CSS rule identifier is .rwp-u-review__sharing-icon so we can use it to build our custom CSS rules. Here is the new custom rule that contains the color customization.

.rwp-u-review__sharing-icon {
    color: #0057D8 !important;
}

We have added the tag !important because we will be sure that the rule will be applied.

Now paste your custom CSS rules inside related text area of Reviewer > Preferences page

That's it! Now you will be able to add advanced customization to the Reviewer plugin components.

Still need help? Contact Us Contact Us