Some Short Code Not Working for Me
-
Hi,
So short code does not work for me.
First example, would be only on the latest plugin version, where “date” stopped showing relative dates of reviews, regardless of choice from options mentioned.
Also, the color of the so called “yellow” stars, which I find kind of orangish, could not be manipulated. Stars in plugin code, are data-svg, something which is very difficult to manually manuplate.
Can you please check, and fix if needed?
-
The two different time formats, is something wrong, and the different fetching technique has no justification for it. All elements should be of the same data structure regardless how they were fetched. Also, I could not get the plugin to delete the 5 reviews fetch and have all be imported by the outer-html copy and import. I can’t recall, but that caused some programming trouble.
The [reviews_rating theme=”bubble columns two center fill” color_scheme=”cranberry” summary=”name, rating, stars, count” avatar=false review_item_order=”text first”] which makes stars RED, is not showing how to change the colors of stars, and it looks like either magic or a mistake, seeing them in red.
Can you please share a very simple presentation of how stars should be set in the short code, so their color can easily be changed?
@ziegel There is nothing is wrong with the dates/times. All times are stored using a standard UNIX timestamp, that’s it, nothing else. You can see the different date formats as their output, but the source data is always a timestamp. If you check the data (serialized data) in the options table, it is very consistent.
You cannot remove the 5 most recent reviews retrieved by the Places API. This is intentional functionality because the next retrieval will undo the deletion. You can choose to hide these instead. All other reviews may be removed.
Please refer to the previous reply for the example of the star colouring as I think you’re missing the CSS for the colours. However, if you have the colour in mind – please let me know and I’ll reply with a very specific example for you to use. It will require a little CSS (you can enter this into the Custom Styles box in the Advanced section).
I don’t think I’m missing anything regarding the stars.
Can you please be kind and place a simple explanation of the exact short code to make the stars color modifiable, and the html/css to change its color?
@ziegel I found something that interrupts the colour change caused by the introduction of an inline SVG version.
Please keep the current Shortcode and its parameters and I’ll add a fix in the next version so it supports colours as hex once again. I’ll message you when this is available.
Alternatively, you can use the CSS version for now that will refer back to the colour of the element, so, set the parameter to just
stars="css"
and add the following CSS to the style sheet (you can choose to add this to Custom Styles in Advanced)..google-business-reviews-rating .rating,
.google-business-reviews-rating .rating .star {
color: #FF0000;
}
.google-business-reviews-rating .rating .star.gray {
color: #CCCCCC;
}With the missing relative dates, please can you share a URL for this as I’d like to see this to replicate this issue. Just drop this into a message through the direct support link if you prefer.
Thanks. I’ll soon check the colored stars.
I have rolled back. What appeared instead of the fetched date for “time-ago…” was null. The HTML elements were in place and and had a <span></span> but there was no content within it. I’m using WPML and PHP header files to control the language presented.
I don’t think issue is related to language, as for both languages on website, I present the time-ago reference in English. However, it became missing on plugin version update.
You might not be aware of the underline code, however element you use is DATA-SVG and you TRY to have a transpose effect on it, not directly setting the color… which is IMHO a horrible approach.
The results are a RED color, not a Yellow one.
I suggest you fix this issue.
@ziegel I don’t understand the “transpose effect”. If you mean using a CSS filter such as:
filter: hue-rotate(300deg)
, then this has not been implemented in this plugin.Talking through the code: JavaScript will see the preference in the data-stars attribute and apply this using the CSS values set out by the style sheet, switch out the colour and apply this as an inline CSS background image.
I have already introduced an inline SVG (i.e. placed in the HTML) that can be manipulated directly, but this isn’t documented as I haven’t settled on its final iteration. It is unlikely to change much if at all, so feel free to use this:
[reviews_rating stars="inline svg"]
With this inline SVG, the background image is not used and you can simply set the colour in the CSS (e.g.
fill: #F00
) – it will affect the fill without any JavaScript.There are two CSS rules here that will control the active and inactive parts of the star:
.gmbrr .inline-svg .star .yellow
and.gmbrr .inline-svg .star .gray
CSS animations are not available for this yet, but you’re welcome to implement your own. Within the SVG there are other elements that will add more depth to the animation possibilities. Once I’ve perfected this new version, I’ll add this for everyone to use.
In the meantime, I will be adding a new release shortly (version 5.8) that resolves both issues mentioned by you: the missing relative dates and the unresponsive star colour.
Hi,
A few weeks ago I have played a lot with the code, looking for a way to change the color. I’m pretty sure you are wrong. There is NO HTML element that can be edited with css setting its color. The only element I have seen is a DATA-SVG where its color is set directly via its code, and where it is “as if” background image for the SVG generated by the data-svg.
The only way to change its color was manipulating it via filters guessing what would be the results. The yellow hexa code you sent me, some how activated a manipulation, you have pre-set in the code to my assumption, you thought would lead to Yellow by a change to original data-svg, however it reaches red… it’s not a simple setting of an HTML element color as most people here would think. It’s not.
Please do check the code, and test a way to change the stars color. The implementation with SVG IMHO is wrong, and should be done via HTML+CSS.
@ziegel Please try the inline SVG version for yourself as you’ll be able to manipulate its styling through the DOM. The example I provided in the previous post will work.
I don’t wish to continue this debate as the original issues are now resolved. Feel free to create a new post with this as its subject if you wish,
- You must be logged in to reply to this topic.