Canvas Support

v7 Readonly Rating stars remove clear circle

10 replies · opened Mar 15, 2023

BbagginsMar 15, 2023

For v7, I'm using the readonly rating code. Any way to not display the clear circle image?

BbagginsMar 15, 2023

Also, how to make stars smaller in size? I'm currently using class="rating" data-size="xs"

SSemicolon WebSTAFFMar 16, 2023

Hello,

  1. Use the following HTML Code:
    [ch_pre][/ch_pre]

  2. Use the following CSS Code:
    [ch_pre type="css"].rating-xs{font-size:16px!important}[/ch_pre]

  3. Use the following JS Code:
    [ch_pre type="js"]jQuery("#input-15").rating({displayOnly: true});[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbagginsMar 17, 2023

I put the css code in the custom.css file and works great. I now know how to adjust sizes.

For the JS code, I tried putting on the page but not working. I'm using the demo-shop set. I'll continue working on it.

For your next update, can you please include the option to not display the grey left clear circle? And then update the new feature on the star components page https://canvastemplate.com/component-ratings.html?

SSemicolon WebSTAFFMar 17, 2023

Hello,

We have just checked out the codes and works great for us. Can you please provide us with a Live URL so that we can check you are placing the JS in the correct place and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbagginsMar 17, 2023

Development website password protected so I'll need to create credentials for you. In the meantime, I put the JS code in the footer:


    jQuery("#input-15").rating({displayOnly: true});
SSemicolon WebSTAFFMar 17, 2023

Hello,

This code should work perfectly fine. We have just rechecked this and works for us perfectly.

Additionally, just a heads up, plugins.min.js is not required with v7 anymore.

We will wait for a Live URL and then check the issue for you. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbagginsMar 22, 2023

Here are your login credentials to emilysanchez.com
canvassupport
Ms8ktD8Sjt7iV7J

scroll down to the reviews section to view the stars with grey cancel circle

SSemicolon WebSTAFFMar 22, 2023

Hello,

This does not work as the HTML Codes you are using are incorrect. You cannot have more than one unique ID Attribute on the Page in this case: id="ratingsm". We recommend using the following code instead:
[ch_pre][/ch_pre]

and then the following JS Code:
[ch_pre]jQuery(".rating-readonly").rating({displayOnly: true});[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSemicolon WebSTAFFMar 23, 2023

Hello,

Glad the issue was resolved.

Since these are Generic HTML/JS Codes, you will need to manually code these keeping in mind the General HTML/JS Selector rules. We apologies but currently this will not be added to the Default Demo Pages. We recommend adding a note about this for future updates.

We will continue improving and add more documentations on this with future updates.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard