Plugin is ignoring light background?

To follow up, if I force a white background to the section I’m displaying the widget in, it turns out that there is white text hard coded into this layout, so the light background has white text on a white background anyway? something seems very wrong here, please help.

Yeah something really wrong here. In preview the business name shows in black text on white background, but on the page, it’s showing white text on a clear background?

And the user icons are not displaying when I load style sheets, but when I deselect “load style sheets”, they appear but they are enormous and the rest of the formatting is complete garbage, the text isn’t truncating the business name and logo are in giant font size, the background is still clear, etc.

Same deal if I choose dark background. It displays with clear background and doesn’t show the user icons.

PLEASE HELP!

Also if i try shortcode
[reviews_rating avatar=”true”]
It still doesn’t show the avatars.

ok I see now the badged version doesn’t have the avatars, and I don’t seem to be able to force them to show by setting avatar=”true”?

OK well you can have a look at it on my site, it’s in a condition just not awful enough that I’m able to take it live so you can have a look.

https://clydevet.com.au/directions/finding-veterinary-cranbourne/

But I think I need to flag that I’ve been playing with inspector and managed to force the background to white if I add the relevant bit in the CSS bit (O’m not a web designer, I only have a vague understanding of how CSS works) …
.google-business-reviews-rating.dark, .google-business-reviews-rating.dark .heading, .google-business-reviews-rating.dark .business-name, .google-business-reviews-rating.dark .listing .author-name, .google-business-reviews-rating.dark .listing .author-name a, .google-business-reviews-rating.dark .listing .text {

That works, but it is now displaying the top few pixels of the icon outside the white section – so this is going to be the next problem I suspect.

I have a screenshot that I would love to attach here, but there is no way to attache screenshots. No idea why wordpress would design a support forum you can’t attach screenshots to? How useless is that?

@adamford Answering your first post, the plugin defaults to a clear background – simply because it is impossible to select one colour that would be right for everyone. The Custom Styles – or the theme’s CSS may be a good place to set your choice of background colour.

Alternatively, I have set a solid background colour if you prefer something a little more out-of-the-box. Go to the HTML Classes section in then Shortcodes tab- here is a list of some useful class names that you can ass as a shortcode parameter – there’s plenty of choice and it includes solid light and solid dark backgrounds.

I’ll go through the other points in a subsequent response.

@adamford Please can you send me a URL of the page that you’re having issues styling? Sometimes existing themes/plugins will interfere with this plugin’s styling.

Thanks!

– Noah

@adamford I’ll go through the remaining points:

• White text/white background: Likely to be another theme/plugin issue as the plugin is quite “light” with applying styles to allow for the theme to apply its own design properly. Personally, I much prefer my plugins to have the light touch because the overall design is better being consistent and not at the whims of any given plugin.
• Load style sheet: If this is off, you’ll need to add quite a lot of your own styling to compensate. The fewer visible elements, the less you’ll need to add.
• Badge Theme/Avatars: This is an intentional design feature. I recommend using something other than Tiny/Badge if you want to list reviews. You can always apply a border to the containing element to a style of your choosing.

I’m getting somewhere in that I’ve worked out if I add class=”fill” to the shortcode it does hard force the background. BUT they layout is all messed up. There is no padding – the text is all going right to the edges of the background. And the business icon extends above the top of the background. Again I’d love to supply a screenshot but this stupid system won’t let me attach anything.

Stripe doesn’t seem to work, it just puts shaded backgrounds on the top and bottom bits, not the reviews section.

And where you say contrast “Used with stripe to offer a more contrasting version of the alternating backgrounds with dark/light text.” it doesn’t explain how to “use with stipe”?? setting the style to “contrast” doesn’t do anything and it can only have one style, so I don’t understand how to use two different styles together?

Thanks for the reply –
Sorry I think all these messages are crossing, apologies for all the separate messages.
Hopefully you can see I’ve now supplied the URL above. Here again >>
https://clydevet.com.au/directions/finding-veterinary-cranbourne/

And I’ve been able to force either a black or white background, but
1. the white background still has white text so is not usuable?

2. And the icon is positioned so part of it extends outside the background

3. There is no padding relative to the background (text extends fully to edge of area)

4. I’d really like to add a border in as you say, but I need help with the CSS for doing this (and the above). IN that I can code the design elements myself no problem, but I don’t know what CSS selector I should be telling WordPress to apply it to. Can you help with just some sample CSS code to style the entire area. If I can see some sample code I will be able to work it out in there.
I may also need some sample code to set the text colour against the white background.

Many thanks again for the support.

@adamford I’ll have a look at this tomorrow (I’m in the UK). Just before I sign off, I’m pretty sure there’s a solution to all your queries with the current version of the plugin and a few custom styles.

@adamford Here are my suggestions to improve the design of the Google rating/reviews for your website with a dark background and a narrow column…

Theme choice/HTML class:

Please add “narrow” to the existing list of classes (or as its own parameter) so it fits better into the space:

[review_rating class="narrow"]

Or, just select “Narrow, Centered, Dark Background with Fonts” from the list of themes.

Custom Styles:

The dark theme is good if you want a dark background with light text. I recommend avoiding the badge theme. Start with applying your own container styling as follows, either in the Custom Styles or in your Child theme’s CSS:

.google-business-reviews-rating.dark {
	background-color: rgba(0, 0, 0, 0.8);
	padding: 1rem;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
	border-radius: 3px;
	margin-bottom: 1rem;
}

The plugin is working as intended. Naturally, everyone will want to have their own designs implemented so I’ve included plenty of shortcode parameters and custom styling within the plugin to give you plenty of customization.

And yes, I find it annoying that this forum doesn’t properly support images. It would be very helpful in many instances. Fortunately, you have sent through your URL and that makes it easy to offer suggestions that will resolve your design issues.

Please get in touch if you have any further queries.

• This reply was modified 4 years, 4 months ago by Design Extreme.

Hi thanks I’ll give that a go, but just quickly, when I selected the narrow format, it wasn’t behaving responsively when viewed on tablet in particular – should that be the case?

Its not working.

If I use either
.google-business-reviews-rating.dark.center.fonts
(which is the template I’m actually using) or
.google-business-reviews-rating.dark
as the css selector, nothing happens. None of the styles are applied.

I’ve also tried using
#google-business-reviews-rating
as the selector, but none of the css is showing up when I look at this div in inspector.
Everything is completely ignoring the custom css whatever I do?