View source | View content page | Page history | Printable version   

Projects:CSS Sprites/Technical Documentation


CSS Sprites - Technical Documentation

Previous Steps

Choosing a tool for automatize the sprite generation

There are a lot of on-line sprite generators, but the best tool that fits with Openbravo ERP is SmartSprites 2.1-alpha due to its java code integrated with ant and its license.


New files added

lib/build/commons-io-1.4.jar lib/build/commons-lang-2.4.jar lib/build/commons-math-1.2.jar lib/build/google-collections.jar lib/build/smartsprites-0.2.1-alpha.jar

Modified files


Choosing if the CSS sprite will be generated or not

Maybe the user doesn't want the generation of the CSS sprite, so a new variable in is defined:


Changes in Openbravo_ERP_250.css

Previous Steps

Structures type:

 background: url(image.png) no-repeat center center;

Should be replaced with something like this (the row order is very important):

 background-repeat: no-repeat;
 background-position: center center;
 background-image: url(image.png);
Adding the sprite reference

A comment must be added in order that the SmartSprites parser read it and adds the image to the sprite.

The comment should be something like:

 /** sprite-ref: xxspritexx_V; sprite-alignment-ltr: left; */

So the result should be something like:

 background-image: url(image.png); /** sprite-ref: xxspritexx_V; sprite-alignment-ltr: left; */

More parameters should be added, but the basic rules are:

Result after building context

/web/skins/*Skin-name*/*LTR or RTL*/ if generateSprites=yes

 /** sprite-ref: xxspritexx_V; sprite-alignment-ltr: left; */

inside /web/skins/Default/Openbravo_ERP_250.css will be replaced to

 /** sprite-ref: Openbravo_ERP_250_Default_LTR_Sprite_V; sprite-alignment: left; */

and will be allocated in /web/skins/Default/ltr/Openbravo_ERP_250.css

Retrieved from ""

This page has been accessed 4,904 times. This page was last modified on 8 June 2012, at 05:26. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.