Customize Style Editor Elements

The Style Editor allows customization of the visual design across Bazaarvoice hosted display features. Use these settings to apply your brand guidelines for fonts, page headers, backgrounds, borders, and spacing. Changes configured in the Style Editor will apply to the display modules, such as Ratings & Reviews, Questions & Answers, and Inline Ratings.

Customize fonts

Before beginning:

Use the Style Detector to discover the fonts and colors used on your website and apply them to your Bazaarvoice hosted display implementation.

When you use the Style Detector and apply the detected styles to your configuration, you’ll override and permanently lose the current style configuration. Before you use the Style Detector, view the Style Editor page and make note of your current style configuration.
Verify the list of fonts and colors available for selection in the Style Editor. Select Manage Styles above Style Editor, and then add or remove fonts and colors.

Before you change a style setting, make a note of it. Changes made on the Style Editor page are automatically saved and cannot be reverted, though you may be able to use the Ctrl+Z or Command+Z keyboard shortcuts to undo your last change.

You can customize the following font settings used for text.

Font family
Font color
Font size (in pixels)

Line height (in pixels)
Character style
Capitalization

For links, under Fonts, select Links from the dropdown menu. You can customize the font settings for these link states:

All—Font changes are applied to all link states
Link—Font changes are applied to the default state only
Active—Font changes are applied to the active state only

Hover—Font changes are applied to the hover state only
Visited—Font changes are applied to the visited state only

For buttons, under Fonts, select Buttons from the dropdown menu. You can customize font settings for these button states:

All—Font changes are applied to all button states
Button—Font changes are applied to the default state only

Active—Font changes are applied to the active state only
Hover—Font changes are applied to the hover state only

To customize font styles:

On the Style Editor page, expand the Fonts section of the Style Editor to customize how fonts are displayed for labels, links, buttons, and other elements.
Select the element you want to customize from the drop-down list.

If you select All, your font selections will be applied to all elements. If you select a link or button, you can further refine the element you are customizing by its state, by selecting options such hover, active, or visited.
Customize the font details, such as font family, color, and style, to your liking.
Select to preview your changes. Be sure to preview style changes for all features (Rating Summary, Reviews, Questions & Answers, Inline Rating, and Review Highlights) to make sure you are satisfied with how and where your style changes appear.

Note: If you used Manage Styles to add a new font, you could select the new font within your style configuration, but you cannot preview the font on the Style Editor page. If you proceed to deploy the configuration, the new font should be displayed successfully on your site, if the correct font files were uploaded to your server before you implemented the BV loader file.

To customize the font size of text within the submission form fields (reviews, comments, and questions & answers submissions):

On the Style Editor page, expand the Fonts section.
Select Field placeholder text from the drop-down list.
Customize the font details, such as font size, font family, color, and style.

Note: To prevent auto-zoom issues on mobile applications, we recommend selecting a font size of 16 pixels or above.
Select to preview your style changes for reviews, comments, and questions & answers.

Related style pages:

Customize page headers

Note: The following font settings are applicable only if you are using the latest V2display.

Before beginning:

Use the Style Detector to discover the fonts and colors used on your website and apply them to your Bazaarvoice hosted display implementation.

When you make changes using the Style Detector you’ll permanently replace the current style configuration, though you may be able to use the Ctrl+Z or Command+Z keyboard shortcuts to undo your last change. Before customizing your style configuration, view the Style Editor page and make note of your current style configuration.
Verify the list of fonts and colors available for selection in the Style Editor. Select Manage Styles, and then add or remove fonts and colors.

You can customize the font settings used for page headers (for example, My Review) in the single-product submission form:

Font size
Font color

Font family
Character style

To style the page header:

On the Style Editor page, expand the Fonts section to customize how the page header is displayed in Ratings & Reviews and Questions & Answers.
Select Form Fieldset Label from the drop-down list.
Customize other font details, such as font size, color, family, and character style.
Select to preview your changes. Be sure to preview style changes for all features (Rating Summary, Reviews, and Questions & Answers) to make sure you are satisfied with how and where your style changes appear.

Related style pages:

Customize stars and bars

Before beginning:

Use the Style Detector to discover the fonts and colors used on your website and apply them to your Bazaarvoice hosted display implementation.

When you use the Style Detector and apply the detected styles to your configuration, you’ll override and permanently lose the current style configuration. Before you use the Style Detector, view the Style Editor page and make note of your current style configuration.
Verify the list of fonts and colors available for selection in the Style Editor. Select Manage Styles, and then add or remove fonts and colors.

Before you change a style setting, make note of it. Changes made on the Style Editor page are automatically saved and cannot be reverted, though you may be able to use the Ctrl+Z or Command+Z keyboard shortcuts to undo your last change.

You can customize the following settings used for all star states (full and empty):

Icon image (rounded or pointed)
Icon size

Then, you can customize the color used by each state.

For bars, you can customize the color used by each bar state (full or empty).

To style the icons used in the hosted display:

On the Style Editor page, expand the Icons section of the Style Editor to customize how stars and bars are displayed for ratings.
Select the element you want to customize from the drop-down list.
Select the icon status you want to customize.
- full applies to filled-in icons, such as the first three stars in a 3 out of 5 rating.
- empty applies to empty icons, such as the last two stars in a 3 out of 5 rating.
- all applies to both full and empty icons.
Customize the icon details, such as the image, color, and size.
Select to preview your changes. Be sure to preview style changes for all features (Rating Summary, Reviews, Questions & Answers, Inline Rating, and Review Highlights) to make sure you are satisfied with how and where your style changes appear.

Note: If you used Manage Styles to add a new font, you can select the new font within your style configuration, but you cannot preview the font on the Style Editor page. If you proceed to deploy the configuration, the new font should be displayed successfully on your site, providing the correct font files were uploaded to your server before you implemented the BV loader file.

To prevent auto-zoom issues on iOS or Android mobile applications, disable viewport zooming or set the font size (in pixels).

Disable viewport zooming on your mobile devices by adding the maximum-scale value as follows:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
</html>

Parameter	Description
`width-device-width`	Adapts the device width.
`initial-scale`	Defines the scale of the website. This parameter sets the initial zoom level (1 CSS pixel = 1 viewport pixel).
`maximum-scale`	Defines the maximum zoom level.

Customize the font size on the Style Editor page. Expand the Fonts section and select the font size. You must set the font size to 16 pixels or above for IOS or Android mobile applications.

Related style pages:

Customize backgrounds

Before beginning:

Use the Style Detector to discover the fonts and colors used on your website and apply them to your Bazaarvoice hosted display implementation.

When you use the Style Detector and apply the detected styles to your configuration, you’ll override and permanently lose the current style configuration. Before you use the Style Detector, view the Style Editor page and make note of your current style configuration.
Verify the list of colors available for selection in the Style Editor. Select Manage Styles and then add or remove colors.

You can customize the following background settings used for sections, headers, lightboxes, buttons, and sidebars:

Background color
Gradient

Gradient color
Gradient opacity

To style the background settings:

On the Style Editor page, expand the Backgrounds section of the Style Editor to customize how background colors are displayed for ratings, reviews, questions, and answers.
Select the element you want to customize from the drop-down list.

If you select a form or button, you can further refine the element you are customizing by its state, by selecting options such as normal or selected.
Customize the background for the element.
Select to preview your changes. Be sure to preview style changes for all features (Rating Summary, Reviews, and Questions & Answers) to make sure you are satisfied with how and where your style changes appear.

Note: If you used Manage Styles to add a new font, you can select the new font within your style configuration, but you cannot preview the font on the Style Editor page. If you proceed to deploy the configuration, the new font should be displayed successfully on your site, providing the correct font files were uploaded to your server before you implemented the BV loader file.

Related style pages:

Customize borders

Before beginning:

Use the Style Detector to discover the fonts and colors used on your website and apply them to your Bazaarvoice hosted display implementation.

When you use the Style Detector and apply the detected styles to your configuration, you’ll override and permanently lose the current style configuration. Before you use the Style Detector, view the Style Editor page and make note of your current style configuration.
Verify the list of colors available for selection in the Style Editor. Select Manage Styles and then add or remove colors.

You can customize the following border settings used around sections and headings:

Selection (top, bottom, right, left)
Color
Width (in pixels)

Style
Radius of corners

To style the border settings:

On the Style Editor page, expand the Borders section of the Style Editor to customize how borders are displayed for rating summaries, section headers, buttons, and other elements.
Select the element you want to customize from the drop-down list.
Select the border you want to edit, such as the top border or left border. You can select multiple borders at a time.
Customize the border details, such as the color, width, and radius to your liking.
Select to preview your changes. Be sure to preview style changes for all features (Rating Summary, Reviews, and Questions & Answers) to make sure you are satisfied with how and where your style changes appear.

Related style pages:

Customize margins and padding

To style the background settings:

On the Style Editor page, expand the Margin & Padding section of the Style Editor to customize how margins and paddings are displayed for rating summaries and content elements.
Select the element you want to customize from the drop-down list.
Enable Uniform margins or Uniform padding to automatically apply the latest value you enter into a margin or padding field to the remaining fields.
Specify the top, bottom, left, and right margin and padding values (in pixels) within the appropriate field.
Select to preview your changes. Be sure to preview style changes for all features (Rating Summary, Reviews, and Questions & Answers) to make sure you are satisfied with how and where your style changes appear.

Related style pages: