All non-numeric rating scales use image sprites, which are single image files that contain other images that are accessed by referencing their xy coordinates and dimensions. Rating scales have the following dimensions:

• Height — 120px
• Width— 180px
• Each sprite is 30px by 30px
• 30 padding on left
• Transparent background

• Initial / Unselected — Initial state before customer interaction; or unselected.

• On — Color of all numbers not selected once a selection is made.

• Hover — All numbers left of the mouse pointer are the same color.

• Selected — Number selected by the user.

As with numeric rating scales, each row is used for animation during the customer selection. If the dimensions of an image and sprites follow the standard dimensions, then replace the CSS reference to the image file as follows (making sure that the HTTPS reference is correct and on a publicly accessible server; remember, your Medallia expert can arrange for hosting on the Digital content delivery network (CDN)):

The following example shows an emoji file and its location in a CSS file:

neb-rating .neb-rating.emoticons label {
  background: url("https://yourserver.com/emoji.png") no-repeat: } 

The following example shows a smiley file and its location in a CSS file:

neb-rating .neb-rating.smilies label {
  background: url("https://yourserver.com/smiley.png") no-repeat: } 

The following example shows a stars file and its location in a CSS file:

neb-rating .necb-rating.stars label {
  background: url("https://yourserver.com/stars.png") no-repeat: }

The following example shows a bars file and its location in a CSS file:

neb-rating .neb-rating.bars label {
  background: url("https://yourserver.com/stripes.png") no-repeat: }