CSS styling for GoodReviews widget

Hello, waitfortheword.

Thanks for using GoodReviews.

You can control some of the CSS that is generated directly by the GoodReviews plugin by turning off the default CSS in the shortcode. However, any CSS or code that is delivered directly by the Goodreads API cannot be modified. For example, this shortcode would disable CSS styles for the bookinfo and buyinfo panes of the plugin:

[goodreviews isbn=”0123456789ABC” grstyles=”off”]

However, it does not turn off the CSS for the reviews element because those styles are generated and embedded by the Goodreads API, not by the plugin directly. Therefore, the plugin can exert no control over the styling of the contents of that particular component.

Unfortunately, the answer above also applies to the title for the reviews frame. That’s delivered by the Goodreads API and not generated directly by the plugin. Although the plugin could, technically, parse the data returned for the reviews widget and modify it, it is possible that doing so could be considered a violation of the Goodreads API Terms of Service, which states that data delivered by the API should not be modified in any way. Rather than risk that, the plugin simply delivers the reviews widget code as-is.

Thanks again for using GoodReviews and let me know if I can be of further assistance.

James

James,

Thanks for getting back to me so promptly. I did turn off css styling for the author and info box, but that’s not the central issue.

Is there any plan to allow for slightly more control over the css for the reviews portion of the widget? Because against a shaded sidebar, the white box — with no padding for the reviews within — looks pretty jarring.

I’d love to help out somehow if I can. And I suspect this is a feature other users would also appreciate.

Thanks!
Justin

Hi, Justin.

I didn’t have any plans to include modification of the reviews pane styles. It looks like adding that feature would be relatively painless. However, I’m wary of modifying that data because of some vagueness in the API terms. Here are the terms:

https://www.goodreads.com/api/terms

Here’s the problematic area:

7. Not modify or change Goodreads data, including reviews, in any way. Reviews may be truncated for display purposes, but must link to the full review on Goodreads.

Although it says you can truncate reviews, it doesn’t say you can modify anything else about them. The API actually returns the CSS for the reviews pane, so I’m wary of enabling modification of that. It’s not a big deal for the book info and book buy panes because the API does not provide any CSS for those.

https://www.goodreads.com/api#book.show

The reviews-widget section of the API output is what the API returns for the reviews frame. Assuming the API terms allow it, it might be possible to parse and modify the CSS that styles the iframe itself. It also looks like the styles associated with the content of the iframe could be manipulated by modifying the iframe SRC parameters (such as text=000, link=000, and review_back=fff) to something else.

So, it IS possible to add the ability to do what you want. I’d just want to be sure that modifying that information isn’t in violation of the API terms before I implement a feature like that.

So, the next step for me would be a little research or contacting Goodreads to see what they say about it. Give me a little time to do some digging. If it’s not a terms violation, perhaps I can add that feature to 1.0.9.

Thanks again for using GoodReviews.

James

Update: I edited one of the links in the above post to point to the API function Goodreads uses instead of actual API output. You can see actual API output by logging into Goodreads and clicking “Sample URL” in that link.

James, thanks so much.

I hope GR will be open to permitting a little more agile styling of the CSS. I don’t think this is really a modification of the “data” per se — i.e., doesn’t change the content of the reviews themselves, only the way they look.

I’m using this widget in a custom field in the sidebar of a nonprofit publisher website — so on each book’s post, the GR reviews for that title show up in the sidebar. If I can style the GR reviews pane to match the background of the sidebar, it will look fantastic.

I’ll look forward to hearing from you!
Justin

Hi, Justin.

As of GoodReviews 1.1.0, which is now available for download at www.remarpro.com, I have implemented more granular control over the appearance of the reviews frame by using either an alternate style sheet, the new shortcode parameters, or both.

I hope to expand further on these new features in later versions.

I’m marking this topic as resolved as a result of having implemented the new features of 1.1.0.

Thanks again for using GoodReviews.

James

I am having problems implementing the following shortcode parameter:

* grbackground: defines the hexadecimal background color of the plugin elements. Do not include the “#” symbol.

on:
https://www.thejourneyhomebook.net

This is my shortcode:
‘[goodreviews isbn=”1601090447″ bookinfo=”off” buyinfo=”off” cover=”off” width=”900″ grbackground=”fff8e5″ grstars=”fd8c3b”]’

Interesting that “grstars” is working.

Hi, stupaul22.

Interestingly, this appears to be a change in the Goodreads API or an issue with the Goodreads API rather than an issue with the plugin.

I bypassed WordPress and the plugin and tested several background codes directly against the API by copying and pasting the reviews widget source URL that Goodreads returns and modifying the HTML color code for the “review_back” value in that URL. Each time, the reviews widget returned the default background color instead of the color I specified.

I will follow up with Goodreads on this and see if “review_back” is being removed or replaced. If the widget does not support it any longer, I will need to remove it as an option from the plugin.

Thanks for using Goodreviews.

James

Thank you. Standing by.

Hello, stupaul22.

By way of update, I received a response from a Goodreads support person yesterday. The missing background color is a bug in the reviews widget and they are working on a solution. Hopefully it will be fixed within a few days. I will let you know if I hear anything different.

Thanks again for using GoodReviews.

James

Hi James,

It appears the GoodReviews widget (v1.1.1) is overriding my page’s CSS and changing the link color to #660. Any ideas? The website is https://www.publishinggenius.com.

Hi, Adam.

Looks like you found a bug in the version 1.1.1 GoodReviews stylesheet that is included with the plugin. Around line 182, the following appears:

a {
color: #660;
}

Because the above is not contained within a specific class or container, it will apply to all links. I will modify the default style sheet and post an update. Meanwhile, you can fix it on your site by editing the file named “goodreviews.css” in the plugin directory and removing lines 182, 183, and 184 (as noted above).

Thanks for using GoodReviews!

James

Success! Thanks James. This is a great plugin for independent publishers!

By way of update for stupaul22 (and anyone else who experienced the reviews widget background color issue), GoodReads appears to have rolled out a fix for the problem. You should now be able to change the background color for the reviews widget.

Thanks all.

James