Is there a way to turn the [blue]Show all text[/blue], into a button to make it much more prominent? See screenshot
[url]https://v45.co.uk/ect-forum/ect-reviews.jpg[/url]

Once on the review screen is it possible also to make the [blue]Back to product[/blue] and the [blue]Review this product[/blue] text into a button? See screenshot
[url]https://v45.co.uk/ect-forum/ect-reviews-1.jpg[/url] - Possibly on that screen the small product image be linked back to the product - people seem to expect images on an e-commerce site to always be linked

Can the product reviews actually be shown in a modal popup rather than taking the viewer away from the actual product screen?

Will - Bolton Manchester UK

Hi Will

There isn't a general feature to change those to buttons but you could put span tags around the text entry with a css class applied and see if it can be done that way.

The pop up isn't available.

Andy

Please feel free to review / rate our software

Hi Will and Andy,
Was interested in your idea, had a fiddle and came up with this CSS to generate buttons, including mouse hover effects ...

/* Add your review button (light green) */
span.review.clickreview a.ectlink {
display: inline-block;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
font-family: inherit;
-webkit-appearance: none;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: #009966;
color: #ffffff;
font-size: 0.8rem;
font-weight: 400;
border-radius: 4px;
padding: 0.4em 0.75em;
margin: 0;
}

span.review.clickreview a.ectlink:hover,
span.review.clickreview a.ectlink:focus {
background-color: #007a52;
color: #fffc11;
text-decoration: none;
}

/* Show All button and Back to product button (light blue) */
span.review.showallreview a.ectlink.showallreview,
span.review.reviewback a.ectlink {
display: inline-block;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 4px;
-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
font-family: inherit;
-webkit-appearance: none;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: #1779ba;
color: #ffffff;
font-size: 0.8rem;
font-weight: 400;
border-radius: 4px;
padding: 0.4em 0.75em;
margin: 0;
}

span.review.showallreview a.ectlink.showallreview:hover,
span.review.showallreview a.ectlink.showallreview:focus,
span.review.reviewback a.ectlink:hover,
span.review.reviewback a.ectlink:focus {
background-color: #126195;
color: #fffc11;
text-decoration: none;
}

The brackets remain around (Show All) and (Back to product) buttons however.
Edit #colors to your liking.

Gary

That looks like a neat solution, thanks for posting Gary.

Andy

Please feel free to review / rate our software

Hi Gary

Thanks for the solution, that looks a lot better! Only one slight issue I've not figured out; the Read All Reviews text doesn't appear as a button, it stays as a text link. Any ideas?

Will - Bolton Manchester UK

That would be span.showallreview and a.showallreview - can you check your settings for those two as they appear to work for me?

Andy

Please feel free to review / rate our software

span.review.showallreview a.ectlink.showallreview {}

is definitely the correct CSS element target for the (Show All) button.
But ... I am not using Tab Panels on the proddetail.php page ... so

In Firefox: Right click, Inspect Element.
In Google Chrome: Right click, Inspect.

And you will figure it out.

Gary

Hi Gary

The reviews are in a spry tabbed panel and the Review this product & the Back to product text links do show as CSS buttons, just the Read all reviews stays as a text link.

In Firefox the inspect element shows the following for the Read all reviews;
[size=1][blue]
<span class="review showallreview">
(
a class="ectlink" rel="nofollow" href="/product-name?review=all"<Read all reviews></a>
)
</span>[/blue][/size=1]

Will - Bolton Manchester UK

In case there is a conflict with the tab css can you add

!important

Just before the semi-colon in the entries for

span.review.showallreview a.ectlink.showallreview,
span.review.reviewback a.ectlink {

Andy

Please feel free to review / rate our software