Colour of stars?

1. To change the stars, please see, “How do I customise the stars” section on the Site Reviews > Documentation > FAQ page.

To change the colour of the summary bars, use this custom CSS in your theme:

.glsr-default .glsr-bar-background-percent {
    background-color: #30baa3 !important;
}

2. I can see that you are using the WPForms plugin and have selected the “Plugin: WPForms Lite (v1)” Plugin Style option in the Site Reviews settings.

In order for this option to work, you will also need to enable the “Load Assets Globally” option in the WPForms settings so that Site Reviews can use the WPForms stylesheet.

If you prefer not to do this, then I recommend you change the Site Reviews “Plugin Style” option back to “Site Reviews (default).

Thanks for the rapid support, impressed. ??

Done as you said, but the colour has only changed on the bar (on excellent) and not the stars…

https://www.newhousefishery.co.uk/about-us/

Cleared my cache as well,any thoughts?

Lenny

EDIT: hiold on, misread your reply, that CSS is just for the bar, let me read the FAQ. ??

• This reply was modified 5 years, 8 months ago by Lenny Warren.

If you would like to use the official stars with a different colour, you may download the SVG files from here:

https://github.com/pryley/site-reviews/blob/master/assets/images/star-empty.svg
https://github.com/pryley/site-reviews/blob/master/assets/images/star-full.svg

Once downloaded, open them in a text editor and change the fill attribute to your desired CSS colour.

Finally, upload them to your website and follow the instructions in the FAQ.

Thank you, I downloaded the stars, edited the colour and just overwrote your stars, that ok? Rather than edit the functions.php file. ??

I noticed I now have a submit button, presuming that came from the edit to the WP Forms settings?

VERY impressed with support… ??

1. It is not recommended to edit the plugin directly as you will lose all changes on the next plugin update.

2. Yes, the button styling is controlled by CSS. When you enable the WPForms option as suggested above, it loads the WPForms CSS file on the page with your Site Reviews form which adds the correct styling to the button.

I try adding the following to my theme’s function.php manually and using the Code Snippets plugin and neither work. The stars don’t show up. If I remove the code the stars come back…

/**
* Customises the stars used by Site Reviews.
* Simply change and edit the URLs to match those of your custom images.
* Paste this in your active theme’s functions.php file.
* @return array
*/
add_filter( ‘site-reviews/config/inline-styles’, function( array $config ) {
$config[‘:star-empty’] = get_stylesheet_directory_uri().’/assets/images/star-emptyNF.svg’;
$config[‘:star-error’] = get_stylesheet_directory_uri().’/assets/images/star-error.svg’;
$config[‘:star-full’] = get_stylesheet_directory_uri().’/assets/images/star-fullNF.svg’;
$config[‘:star-half’] = get_stylesheet_directory_uri().’/assets/images/star-halfNF.svg’;
return $config;
});

@lenny-warren

1. When pasting code in the topic, please use the “code” button in the editor toolbar to format it correctly.

2. Where have you uploaded the new images?

The get_stylesheet_directory_uri function retrieves the stylesheet directory URL for the current theme/child theme.

So this:

get_stylesheet_directory_uri().'/assets/images/star-emptyNF.svg'

Is the same as this:

'/wp-content/themes/generatepress/assets/images/star-emptyNF.svg'

Which means that if you uploaded the images to that location, the following link (replacing the domain with your own of course) should work (which it doesn’t):

https://your-website.com/wp-content/themes/generatepress/assets/images/star-emptyNF.svg

• This reply was modified 5 years, 8 months ago by Gemini Labs.
• This reply was modified 5 years, 8 months ago by Gemini Labs.
• This reply was modified 5 years, 8 months ago by Gemini Labs.

I put the images in here, as that’s where yours were…

`wp-content/plugins/site-reviews/assets/images

as there is no

/wp-content/themes/generatepress/assets/images/

directory on my server

• This reply was modified 5 years, 8 months ago by Lenny Warren.

If you put your custom images in the plugin folder, they will be removed the next time the plugin is updated.

I suggest you do one of the following:

Use the Media Library

1. Install the Safe SVG plugin
2. Upload the custom stars into your Media Library
3. Copy the image URLs to use in the code snippet.

Copy the images to your theme

1. Create a folder called “site-reviews” in your active theme
2. Upload the images in the “site-reviews” folder you created
3. Then, use the following links:

get_stylesheet_directory_uri().'/site-reviews/star-emptyNF.svg'

The only thing to keep in mind if you are using a theme that has regular updates, is that you may lose the stars when the theme is updated.

• This reply was modified 5 years, 8 months ago by Gemini Labs.

Thanks, so the SVG Support PLugin may be the best option to avoid losing things?

What would the syntax be in the functions.php file be then?

`$config[‘:star-empty’] = get_stylesheet_directory_uri().’/assets/images/star-emptyNF.svg‘;

1. Install the Safe SVG plugin (use this one, not the SVG Support plugin)

2. Upload your custom SVG stars using the Media Uploader

3. Get the File URL for each of your images from here:

4. Use the File URLs in the code snippet:

$config[':star-full'] = 'https://...';

Ok, have added a directory to the theme and used this line, that works ok..

get_stylesheet_directory_uri().'/site-reviews/star-emptyNF.svg'

However, as you say that may be lost when theme updates, maybe I should use the SVG Support PLugin, alhtough I normally try to keep plugins at a minimum. I’m already using Code Snippets.

If you don’t get theme updates then it should be no problem.

Generally, the correct way to do this is to create and use a child theme. That way, you don’t have to worry about theme updates removing your theme customisations.

If you are more adventurous, you can also copy/paste the code snippet directly into the child theme’s functions.php file at the end. That way, you can also remove the Code Snippets plugin.

• This reply was modified 5 years, 8 months ago by Gemini Labs.

I really appreciate all the help on this…

I have added the Safe SVG plugin, uploaded my images, copied the url’s and all is working fine.

I’ll still use Code Snippets as don’t want to muck around with my theme. ??

Many thanks, all working well. Just excited about upcoming images. ??