Each image you add to a Spriter project has a unique class name, initially based on the source filename, but configurable. When an effect is used to create a copy of an image, the class name is concatenated with additional prefixes and suffixes defined on the effect to keep class names unique.

In addition to this, you can also customize additional components for the final CSS class names. All of the values below are optional, and would normally be left empty.

PrefixApplied before the sprite class name. This should be the name of an existing class or HTML tag.
Class PrefixJoined to the start of the sprite class name.
Class SuffixAppended to the end of the sprite class name
SuffixApplied after the sprite class name
Class QualifierThe qualifier added to the start of class names

Each sprite in the output project has position and size attributes. By default, position information is inverted as this is simply the way CSS background properties work. If you are generating non-CSS templates, or simply wish to have the original positions in your CSS, disable the Invert Positions option in the CSS Options dialog.

Configuring CSS properties

To configure the CSS properties:

  1. Click the CSS settings tab
  2. Enter values into the Class prefix and Class suffix fields.
  3. The **Example **control shows a sample of the generated CSS

Configuring additional CSS properties

To configure additional CSS properties:

  1. Click the CSS settings tab
  2. Click the More Settings link
  3. Enter values into the Prefix, Suffix, Class qualifierClass prefix and Class suffix fields.
  4. Select if locations should be normal or inverted via the Invert Positions flag.
  5. Click OK to save the new values