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
The CM Reviews 2.0 introduced the new Tiles 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:
- Color of response to a review - Choose one color for the review responses from the admin
- Color of the bars in the rating panel - Choose one color for the rating bar
- Ratings color theme - You can change that orange color from here to any color of your preference. A live preview (for visuals) is provided for your convenience.
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.
- 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. A live preview (for visuals) is provided for your convenience.
- Form text color theme - Will be applied to all form text (such as "Review title" and "Review content")
- The color of the stars after in form after selecting/hovering - Will be applied to the stars which the mouse is hovering or selecting.
- 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!