Styling Collect 3

Note: Display 3 documentation is provided as a courtesy for clients on this legacy version of PowerReviews. It is no longer supported. We recommend contacting your Account Manager to discuss upgrading to our newer Display 4.1 version as soon as possible.

 

Review Submission Form

The Review Submission Form is the main page of the Write-a-Review process. This is the first page of the submission process and contains fields that customers use to enter their review. This form can either be hosted by PowerReviews or natively within your website on a Write-a-Review wrapper page.

PowerReviews Hosted Write-a-Review form

Client Hosted and Styled Write-a-Review Form

 

Write-a-Review Parent Container Breakpoints

Element	480px and narrower	481px and wider
Review Submission Form	Stacked layout	2-column layout

 

Review Thank You Page

The final page of the Review Submission process is the Thank You page. This page confirms to the customer that they have successfully submitted their review to the system and directs them back to either the Home page the Product page.

 

Thank You Page Parent Container Breakpoints

Element	480px and narrower	481 and wider
Review Thank You Page	Stacked layout	3-column layout

 

Styling Write-a-Review Elements

To perform CSS styling of your Write-a-Review form, you create a CSS override file and host it on a publicly accessible Web server. Then in the source code of the Write-a-Review wrapper page, point to the fully qualified path of the CSS override file using the JavaScript variable pr_style_sheet. e.g.

var pr_style_sheet = "http://www.yoursite.com/css/my_styles.css"";

 

Sample CSS Override Template

PowerReviews provides a CSS Override Template for use on Write-a-Review and Thank You pages. This file is a great starting point to overriding many of our default styles.

Responsive Write-a-Review Form

The Write-a-Review form employs standard responsive design using CSS media queries. A breakpoint exists at 480px such that elements are displayed in a single column when the device screen is below 480px and two columns when the device screen is greater than 480px. To style elements at specific breakpoints, simply target those elements within @media queries at those breakpoints.

Element	480px and narrower	481 and wider
Pros/ Cons/ Best Uses	Stacked Layout	2-column layout

 

Star Image Requirements

Custom star images should conform to the following requirements:

PNG format; we recommend using transparency.

Star ratings are 20 pixels wide x 20 pixels tall.

The “off” state of the star image is set in the .pr-custom-star-image class.

The “on” state of the star image is set in the .pr-custom-star-image-hove class.

Example of how to set custom star images via CSS

.p-w-r .pr-custom-star-image {
    /* Custom Star Images */
    background: url(http://www.yoursite.com/images/stars.png';);
}
.p-w-r .pr-custom-star-image-hover {
    /* Hovered Custom Star Images */
    background: url(http://www.yoursite.com/images/stars_hover.png';);
}

 

Hiding Form Fields

Form fields can be hidden so as long they aren't required. Each form container element has a classname in the format 'pr-[fieldID]-form-group' - ex. 'pr-name-form-group'. Simply add the CSS 'display: none' CSS rule to your custom stylesheet for the appropriate field classname to hide it.

Example of how to hide form fields

.p-w-r .pr-bottomline-form-group {
    display: none
}