CM Reviews and Ratings - Customization - Design and Interface
Customization: Design and Interface
If you wish to customize the design and interface for your Reviews, Ratings and Review form on the front-end:
Make sure you are logged in to your Admin dashboard, and navigate to the CM Reviews Settings page → Style tab.
In this tab, you have two big options:
- Changing the View
- Changing the colors
1) Changing the View
- Rating View - Choose between Classic View or Tile View. Both options carry over the colors settings.
a) Classic View
b) Tile View
From the Tooltip Glossary Reviews page.
2) Changing the Colors
You can customize the overall aesthetic of your front-end Reviews, Ratings and Review form. Get familiar with the styling options provided by going through our detailed list below:
- Ratings color theme - You can change it to any color of your preference. The color text field will accept any valid HTML/HEX/RGB color code. Of course, you have the option to switch back to the default color (should you wish) by clicking the "Default" button found right under the color text field.
- The color of the response for the review - Choose the color for the review responses from the admin
- The color of the bars in the rating panel - Choose the color for the rating bar.
- Likes /dislikes color theme - Choose the color theme for the likes/dislikes feature.
- The emotion rating color theme - Choose the color theme for the emotion rating feature.
- Reviews rating color - Choose the color theme for the ratings on the front-end (
- Reviews author color - Choose color theme for the author on the front-end (
- Reviews author background color - Choose the background color for the author on the front-end (
- Form color theme - You have full control over the color theme for your front-end Review form. The color text field will accept any valid HTML/HEX/RGB color code, and of course, you have the option to switch back to the default color (should you wish) by clicking the "Default" button found right under the color text field.
- Form text color theme - Will be applied to all form text (such as "Review title" and "Review content").
- Form submit button background color - Choose the background color for Review form submit button on the front-end.
- The color of the stars after in form after selecting/hovering - Will be applied to the stars which the mouse is hovering or selecting.
- The color of unselected stars in review form - Choose the color of the stars when they are unselected in the Review Form.
- Disable Form style - Of course, we expect some users might not want to use the current form design our plugin provides for many reasons, like it might not go well with their current template or they have a specific form design in mind. Although we have created a standard and generic design for the form to try and cater to every website look, we're aware that some users might want to change this form design. And it is not our intention to limit our users at all, so this is what this option is for.
Disabling our form style will remove all CSS properties from the Review form and will leave you with a skeleton form which you can leave as is (to inherit your theme's form styles), or style yourself using the CSS class .cmr_form_custom (which is automatically added to the <form> element so you can easily target it and its child elements when styling the form).
Below are a few form color theme ideas:
3) Make the changes and modifications to your front-end aesthetics.
4) Now of course, don't forget to save your changes!
Your changes should now be applied to your front-end Reviews, Ratings and Review form. Congratulations!