Rapid Reviews / Star Rating Color - CSS
Star Rating Color - CSS
Change your star rating color using your own css and liquid code.
The ideal image size is 80x80 pixel PNG — transparent 8-bit is the best, or 24-bit transparent. You can also use JPG or GIF, it will not cause any issues — just make sure your image background color matches your page background color.
Example Template Files
PNG Example File - 8 Bit Transparent
PNG Example File - 24 Bit Transparent
The code example here is assuming that your image is in the Files
page of your Shopify admin. To use from the /assets
directory, use the filter asset_img_url
.
~CE
<style>
/* TOP COLOR */
.r_stars_on {
background-image: url("{{ 'my-image.png' | file_image_url: width: 200, height: 200 }}") !important;
}
/* BOTTOM COLOR */
.r_stars_inner {
background-image: url("{{ 'my-image.png' | file_image_url: width: 200, height: 200 }}") !important;
}
</style>