Hi,
When a post is marked as a review, the mobile plugin automatically adds the Review Overview and Summary to the foot of each post.
How can I edit this to remove everything but the overall score?
On desktop I’m using a custom cloud template, but I’m hoping a bit of CSS will do the trick on mobile. All I want it to show is the star icons (i.e. three stars out of five). Better still, if I could the stars to the top of the post, rather than the footer, that would be ideal.
Thank you for your help.
Hi,
What you can do to remove the elements you can use this css
.td-review .td-review-header,
.td-review .td-review-row-stars,
.td-review-footer .td-review-summary{
display: none;
}
This code need to be set in the theme panel > mobile theme > custom code> css.
To move the review at the top of the post, you’ll need to edit the code, the file is this one wp-content/plugins/td-composer/mobile/single.php and you need to move this code -> https://i.imgur.com/atConWX.png you can set it before, between or after those elements -> https://i.imgur.com/p4WIf8I.png
Unfortunately, those changes can not be saved in a child theme so, when the plugins will be updated those will be removed.
Thank you for your understanding!
Calin, that’s excellent, exactly what I was looking for.
Would rather not edit files for the sake of long-term compatibility, so I’ll keep the review element at the bottom of the page for now.
In the interest of customising it further, what CSS code would I need to change the background and text colours?
Hi,
The stars colors can be changes with this css
.td-review .td-icon-star:before {
color: blue;
}
The score with this css:
.td-review .td-review-final-score {
font-size: 34px;
color: red;
}
and the text with this one
.td-review span {
font-size: 14px;
color: red;
}
If you want you can add more css on them, just let me know what you need, also, here is a guide that can help -> https://www.w3schools.com/css/css_text.asp
Thank you!
Perfect, thank you again.
Spoke too soon; not quite perfect.
The code to change the star colours only seems to change the first half. So if a score is 3.5, only the first three stars are in the defined colour.
How can I change the colour of all the stars? And would it be possible to make the stars bigger?
Hi,
Sorry, I forgot about the half star, for this, please replace this code
.td-review .td-icon-star:before {
color: blue;
}
with this one
.td-review .td-icon-star:before, .td-review .td-icon-star-half:before {
color: blue;
}
I hope this will help!
Thank you!
Calin, thank you again.
Two more requests:
1) Is it possible to change the wording of ‘Overall Score’ via CSS – i.e. could I change that to ‘Our Rating’ or something else?
2) The stars are shown beneath the number. Is there a way to remove the number entirely, and make the stars bigger instead?
Hello,
1. You can change the “Overall Score” from Theme Panel -> Translations -> Translations -> https://i.imgur.com/W7wUfP9.png -> https://i.imgur.com/RLrCvHv.png
2. To hide the number you need to use a custom code CSS
.td-review .td-review-final-score {
display: none;
}
.td-review .td-icon-star, .td-review .td-icon-star-empty, .td-review .td-icon-star-half {
font-size: 30px;
margin-right: 10px;
}
Hope this helps you!
Thank you!
Perfect, thank you Anamaria.
