CSS WebSprites: Arrange layers and create a CSS file

Scripts to help you create CSS web sprites to reduce your website's HTTP Requests.

Script-fu package with three scripts, including:

• CSS file exporting to use the web sprite;
• Horizontal layers arrangement, side by side;
• Vertical layers arrangement, one on top of the other.

The access menus for the scripts are the following:

• Image/Web Sprites/Arrange layers horizontally
• Image/Web Sprites/Arrange layers vertically
• Image/Web Sprites/Export CSS file

Arranging layers:

The arrangement scripts only reposition the layers and fit canvas to layers.

* Always as possible prefer to use horizontal arrangement because it will result in smaller image files.

Exporting the CSS:

CSS selectors: Each layer name will be used as CSS selector.

Options: By executing the script, a dialog box will be open with all available options for the file creation. The options are:

• CSS file (output file): Type here the CSS file name.
• CSS file directory: Directory to save the CSS file.
• Image file (bkg-image): Image/sprite name which will be used on CSS (eg.: the own image exported to PNG).
• Selectors prefix: Prefix to add to each CSS selector. Eg.: You are making a menu where each item is a "li" and its identified by an CSS class, then set it as "li.". By doing so, a layer named "home" will result on a selector "li.home".
• Selectors postfix: Postfix to add to each CSS selector. Eg.: Following the above example, set it as " > span" to have as result "li.home > span".
• Bkg Repeat: Value of "background-repeat" to include. In case of you don't want it to be setted, chose the option "Leave it Blank!".
• Abstraction selector: Use it to reduce redundancy in the CSS file. Eg.: You are making a menu where each item is a "li", then set is as "li.". By doing so, properties like "background-image" will be setted only in this abstraction instead of in each selector.
• Group up selectors: Enable it to group up selectors in one unique rule to set things like "background-image" just once, and reduce CSS redundancy. Use it when it's not possible to use the abstraction selector.
• Include layer width: Include each layer's width in the CSS.
• Include layer height: Include each layer's height in the CSS.
• Set scale in group/abstraction: Use this to have width and height setted only on the selectors grouping and/or on the abstraction selector. In this case, it will be used the scale of the first layer in the list.
• Keep white spaces: Disable it to remove all non mandatory white spaces.
• Keep line breaks: Disable it to remove all non mandatory line breaks (all of them).
• Remove file extension: Disable it if you don't want that the files extensions, in the layers names get removed. Just remember that dots in CSS have and specific mean and can't be part of a selector's identifier.

More info on my personal page http://hmagalhaes.eti.br/?p=27 (written in portuguese)

* The following packs are in english and portuguese.