Projects:CSS Sprites/Technical Documentation

Contents 1 CSS Sprites - Technical Documentation 1.1 Previous Steps 1.1.1 Choosing a tool for automatize the sprite generation 1.2 Implementation 1.2.1 New files added 1.2.2 Modified files 1.2.3 Choosing if the CSS sprite will be generated or not 1.2.4 Changes in Openbravo_ERP_250.css 1.2.4.1 Previous Steps 1.2.4.2 Adding the sprite reference 1.2.4.3 Result after building context

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.

Implementation

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

src/build.xml

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 Openbravo.properties is defined:

 generateSprites=no

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:

• If the image has repeat-x or no-repeat: sprite-ref: xxspritexx_V
• If the image has repeat-y: sprite-ref: xxspritexx_H
• For the inclusion of margins in the image like "sprite-margin-xxx" take a look to http://smartsprites.osinski.name/

Result after building context

• xxspritexx_H and xxspritexx_V will be replaced with something like *CSS-File*_*Skin-name*_*LTR or RTL*_Sprite_*V or H*.png depending of the situation

• sprite-alignment-ltr or sprite-alignment-rtl will be replaced with sprite-alignment depending if the skin is LTR or RTL

• The files: *CSS-File*_*Skin-name*_*LTR or RTL*_Sprite_H.png and *CSS-File*_*Skin-name*_*LTR or RTL*_Sprite_*V or H*.png will be created in

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

• Example:

 /** 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