This guide explores how to apply custom CSS to the Review Widget on your website to enhance its appearance and better integrate it with your site's design.
Applying Custom CSS:
To customize the Review Widget using CSS, you'll need to identify the widget's CSS classes or IDs. You can inspect these elements using your browser's developer tools.
Examples of Custom CSS Customizations:
Changing the Background Color:
.review-widget-container {
background-color: #f4f4f4; /* Light grey background */
}
Customizing Review Text Style:
#review-widget .review-text {
font-family: Arial, sans-serif;
color: #333333; /* Dark grey text */
}
Instructions:
1- Inspect the Widget: Right-click on the Review Widget and select "Inspect" to open the developer tools. Identify the classes or IDs associated with the elements you want to style.
2- Write CSS Rules: Using the identified selectors, write CSS rules that specify the styles you want to apply.
3- Apply CSS: Go to TrustReviews app >> Settings >> Custom CSS. Add these styles to the custom css field in the app.
Customizing your Review Widget with CSS allows for seamless integration into the design of your site, improving both aesthetics and user experience. Experiment with different styles to find what best matches your branding.
Note: Always test your changes on multiple devices and browsers to ensure compatibility and responsiveness.
If you have any questions or need help with customizing widgets, contact us.