Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Modify the Star Rating Color Scheme

As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

The default stars with Acabado are in jet black, while this works many would like to have gold stars or use a color scheme which matches their site scheme.

Our Example Review With Gold Stars

This uses a Custom CSS to override the default black value given to stars which will allow you to have them show as gold (whats in the code below) or you can replace the color code with a color which matches your website scheme!

HOW TO ADD CUSTOM CSS IN ACABADO

div.star-rating .star {
     color: #d4af37;
}

If you wanted to target only a specific post id you could change this value on any one specific review by using the below and replacing the (postid-xxx) value.

.postid-902 div.star-rating .star {
     color: #d4af37;
}

Hopefully this helps people to start customizing their review sections to make their website stand out! Please leave a note if this helps or share it, as always a donation is awesome but never required!

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

7 thoughts on “Modify the Star Rating Color Scheme

  1. Not directly about star ratings but about the review pages. How do we edit the social icons that display by default at the bottom of the review pages? Strange there is no place to edit or remove them.

    1. Because they send the link to that persons account to share your review. You wouldn’t need to change them as they point back at your URL.

      1. That means the FB share should send my review post to my account but it doesn’t work. The window comes up like normal and it shows the pic of a wrench and says developer tools. Here is the link that shows instead of my post: https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&display=popup&ref=plugin&src=share_button

        I made a ticket to Acabado support just haven’t heard back. It seems Twitter and Pinterest work.

        I don’t remember a token or script to be set up in Acabado from Facebook.
        Thanks for the reply.

        1. Then maybe they messed the code up and aren’t pulling the page URL which would be a code fix for the devs. You did the right thing, I havent tested them before!

          1. Here is their reply.
            Under “Acabado Settings”–>”Social Media” you can select which share buttons should appear on your posts.

            My theme doesn’t have this feature. I’m running latest version on 3 sites. None have this feature.

          2. You should make sure to tell them this has never existed in any version I or anyone has seen. Who replied with that part?

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content