Project Properties: CSS

The CSS view allows you to configure how the CSS class names are generated for each image in the sprite sheet, and how Spriter handles working with existing style sheets.

Not all settings are displayed in this view, the More Settings link displays a dialog to allow the editing of remaining settings.

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.

By default, when you export CSS associated with a sprite, it will overwrite any existing file. However, you can set it to update an existing file by specifying an overwrite mode.

OverwriteAny existing file is deleted and recreated (default)
ReplaceMatching class names will be removed. The exported CSS will be inserted at the point where the first matching class was found. If no matches were found, the new CSS is appended to the end of the file
AppendMatching class names will be removed. The exported CSS will be appended to the end of the file

When using either the Replace or Append options, Spriter will search for CSS selectors where the qualifier matches either the name of a selector in the project, or the name of a selector for the previous export. If a selector name has been modified, or another qualifier added, Spriter will not remove the block.

Spriter currently does not support detection and removal of CSS comments. This may cause duplicate comments to appear in CSS documents when using the Replace or Append options. You should modify the CSS templates to either remove the comments, or place the comments inline in the selector CSS.

Never use an option other than Overwrite for non-CSS based templates. Spriter is unable to parse custom formats and so will be unable to process replace or append modes.

See Also

Getting Started

About Document Views

About Project Views

Working with CSS