Star Ratings not displaying

Front Support Plugins Support WP Rich Snippets Plugin Star Ratings not displaying

This topic contains 2 replies, has 2 voices, and was last updated by  Alex . 2 years, 8 months ago.

  • Author
    Posts
  • #7032

    Alex .
    Member

    Hi there,

    I switched my site to a new theme and for some reason the star ratings are now no longer being displayed. The text does get displayed. The stars are missing on both posts and the top reviews widget. Example link: http://digiconomist.net/exchange-review-coinsetter

    When I test the page with the Google tool it does show the correct ratingValue (3 out of 5) for this one, so it seems it’s purely a matter of getting it displayed as well.

    Regards,

    Alex

  • #7033

    Hesham
    Keymaster

    From the first look, I can see that the Theme you are using has styles for rating in its styles.css file, once you removed these styles everything should be fine!

    Here is the styles you should remove or comment:

    
    /*-[ Review Box ]---------------------------*/
    .rating {
        margin-top: -45px;
        float: left;
        width: 100%;
        max-width: 214px;
        text-align: center;
        background: #222;
        max-height: 45px;
    }
    .rating img {
        margin: 0 auto;
        width: 68%;
        padding: 5% 0;
        border: 0;
    }
    .reviewbox {
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed #EEE;
        margin-bottom: 15px;
        clear: both;
    }
    .pdetails { float: left }
    .reviewmeta {
        padding: 5px 0 0 0;
        border: 1px solid black;
        box-shadow: 0px 3px #000;
        border-radius: 0 0 3px 3px;
        float: left;
        margin-bottom: 20px;
        margin-right: 20px;
        background: #3D3D3D;
        color: #DDD;
        border-top: 1px solid #444444;
        width: 220px;
    }
    .reviewbox h3 {
        padding: 5px 0 0 0;
        margin: 0;
        background: #212121;
        border-radius: 3px 3px 0 0;
        color: #DDD;
        margin-right: 20px;
        text-align: center;
    }
    .reviewmeta .clearfix {
        border-bottom: 1px solid #333;
        padding: 7px 20px;
    }
    .releasedate { margin-bottom: 5px }
    .proscons {
        float: left;
        width: 46%;
        margin-bottom: 20px;
    }
    .pros { margin-bottom: 10px }
    .pros b { color: #66AB10 }
    .cons b { color: #E83216 }
    .rating2 img {
        width: 129px;
        margin-bottom: -5px;
        margin-left: 5px;
    }
    .rating4 img {
        width: 100px;
        margin-top: 5px;
    }
    .score {
        max-width: 90px;
        float: right;
    }
    #user-rating { background: #4B4B4B }
    .user-rating { float: right }
    .user-rating img { width: 18px }
    .rating3 {
        margin-top: 5px;
        float: left;
        max-width: 100px;
    }
    .single-reviews .review-wrapper { clear: none }
    #review .review-result-wrapper > i, #review .review-result-wrapper > a i, .commentmetadata .review-result-wrapper > a i, .wp-review-comment-field .review-result-wrapper > a i {
        color: #8F8F8F;
        opacity: 0.30;
        filter: alpha(opacity=30);
    }
    .review-total-wrapper .review-result-wrapper i { font-size: 22px }
    .rating .review-total-star {
        margin: 10px 0 10px;
        position: relative;
        float: none;
        display: inline-block;
        right: 0;
        top: 0;
    }
    .rating .review-result-wrapper i { font-size: 26px }
    .rating .review-result-wrapper div i, .recent-reviews .review-result-wrapper div i { color: #FFC200 }
    .rating .review-result-wrapper > i { color: rgba(128, 128, 128, 0.7) }
    .review-type-circle.rating {
        margin-top: -46px;
        height: 40px !important;
    }
    .review-type-percentage.rating, .review-type-point.rating {
        color: #FFC200;
        font-size: 22px;
        font-weight: bold;
        padding: 10px 0;
        margin-top: -43px;
    }
    .rating .percentage-icon {
        top: 0;
        font-style: normal;
    }
    .latestPost .rating .percentage-icon { left: -5px }
    .recent-reviews .review-total-star {
        position: relative;
        right: 0;
        top: 0;
    }
    .recent-reviews .review-type-star { padding-left: 0 }
    .grid .rating .review-result-wrapper i { font-size: 22px }
    .wp-review-comment-field {
        float: left;
        margin: 1px 0 18px;
        padding: 6px 10px 9px 12px;
        max-width: 85%;
        margin-right: 10px;
        border: 3px solid #eee;
        font-size: 14px;
        width: 380px;
    }
    

    I hope this solve the issue.

  • #7043

    Alex .
    Member

    Apparently this theme has some kind of in-built review system. I just don’t want to use it because it works terrible with Google. I tried to remove the styles you pointed out, but it is not possible to adjust the CSS like that. I fixed it by overriding (just a small part) with a custom CSS:

    .rating {
        margin-top: inherit;
        float: inherit;
        width: inherit;
        max-width: inherit;
        text-align: inherit;
        background: inherit;
        max-height: inherit;
    }

    Thanks! 🙂

The forum ‘WP Rich Snippets Plugin’ is closed to new topics and replies.