Star rating helper function css broken

  • Resolved johny-dotpad

    (@johny-dotpad)


    6 years, 10 months ago

    Hi,

    Looks like the star rating helper function needs updating to reflect changes to star rating css classes, at the moment no stars are displayed when using this function.

    Thanks
    Johny

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Gemini Labs

    (@geminilabs)

    6 years, 10 months ago

    Thanks Johny!

    For now, you can fix this by wrapping the stars in a div that has a .glsr-default class.

    For example:

    <div class="glsr-default">
    <?= apply_filters( 'glsr_star_rating', null, $rating ); ?>
</div>
    Thread Starter johny-dotpad

    (@johny-dotpad)

    6 years, 10 months ago

    Hi,

    Thanks for the reply. Wrapping the function output didn’t fix the issue for me unfortunately. I had to do a bit more work to get these to show.

    In the end, I needed to override all the classes concerned by removing the glsr- / gl- prefixes, a bit of a fudge but it seems to be working.

    Until a fix is available, for anyone else in this position here is the css I used, you will need to add relative paths to the star svgs. I copied them to my themes images folder for convenience.

    .star {
	width: 20px;
	height: 20px;
	font-size: inherit;
	background-size: 20px;
        display: inline-block;
}

.star-rating>div,
.star-empty {
	background-image: url([path to]/star-empty.svg)!important
}

.has-error .star-rating>div {
	background-image: url([path to]/star-error.svg)!important
}

.star-half {
	background-image: url([path to]/star-half.svg)!important
}

.star-rating.s10>div:first-child,
.star-rating.s20>div:nth-child(-1n+2),
.star-rating.s30>div:nth-child(-1n+3),
.star-rating.s40>div:nth-child(-1n+4),
.star-rating.s50>div:nth-child(-1n+5),
.star-rating.s60>div:nth-child(-1n+6),
.star-rating.s70>div:nth-child(-1n+7),
.star-rating.s80>div:nth-child(-1n+8),
.star-rating.s90>div:nth-child(-1n+9),
.star-rating.s100>div,
.star-rating>.star-full {
	background-image: url([path to]/star-full.svg)!important
}
    • This reply was modified 6 years, 10 months ago by johny-dotpad.
    Plugin Author Gemini Labs

    (@geminilabs)

    6 years, 10 months ago

    This works for me:

    This should work for you too, as the CSS rule looks for .glsr-default .glsr-star { ... } etc.

    However, it looks like you are using the star-rating helper with an ajax request…

    There is a bug in the current version that affects the star-rating helper if used with an ajax request. This is fixed in v3.6, but you can temporarily fix this yourself if you cannot wait for v3.6 to be released by making a small edit to a file in the plugin:

    The file to edit is found here:

    /wp-content/plugins/site-reviews/plugin/Modules/Html/Partials/StarRating.php

    And you would change line 19 from this:

            return !is_admin()

    To this:

            return !glsr()->isAdmin()

    Once you have made this small edit, the helper should work correctly as shown in my first reply to the topic.

    • This reply was modified 6 years, 10 months ago by Gemini Labs.
    • This reply was modified 6 years, 10 months ago by Gemini Labs.
    Thread Starter johny-dotpad

    (@johny-dotpad)

    6 years, 10 months ago

    Delving deeper the problem is that I have the star helper function in an AJAX request handler.

    The StarRating partial in the plugin checks if is_admin() is false to apply the .glsr- prefix. As an AJAX handler always returns TRUE for is_admin() it won’t add the prefix.

    If I alter the conditional after the return statement in the StarRating class to !is_admin() || wp_doing_ajax() it then will add the .glsr- prefixes.

    Thread Starter johny-dotpad

    (@johny-dotpad)

    6 years, 10 months ago

    LOL! Think we must have posted replies at the same time! No probs that fixes it for now. Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Star rating helper function css broken’ is closed to new replies.