Projects:CSS Sprites/Technical Documentation
Contents |
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