Customizing Openbravo ERP look and feel

This document describes how to customize different aspects of Openbravo ERP look and feel.

Skins

Openbravo user interface supports skins that make it possible to create a new look and feel beyond the skin that is provided by default. Openbravo skins are groups of images and Cascading Style Sheets (CCS) that can define the look of Openbravo per installation.

Directory layout

Openbravo skins are located in the directory web/skins/. Inside every directory skin there are four subdirectories:

• Login contains styles used by the login window.
• Main contains styles used by the main application window.
• Menu contains styles used by menu windows.
• Popup contains styles used by popup windows.

CSS element names describe the location of the objects named. For example, the label Login_ContentPane_ToolBar references the Toolbar object contained in the ContentPane for the Login Window.

Installation

• Put the skin inside the AppsOpenbravo/web/skins folder.
  • To design a new one, copy-paste Default one into a new one inside the folder above and give that folder a name (eg. BlackSkin)
  • To install an existing one, unzip the file (you can download from our sourceforge area) into the folder above.

• Within the command line, move to AppsOpenbravo folder and execute the 'ant compile -Dtab=xxx' and then 'ant war' and 'ant deploy' commands to deploy the new skin into your Tomcat installation.

To register a new skin you must:

• Login as System Administrator.
• Go to Application Dictionary || Reference
  • Look for the Skin_list reference.
  • Go to the List Reference tab and then click on the New record icon on the toolbar.
  • The name field contains the name of the skin and the search key field contains the name of the directory (eg. BlackSkin according to the folder name you used above) where the skin is located.

Once the skin has been registered you need select (apply) it:

• Go to General Setup || Application || Session Information and select the proper skin name within the Theme listbox and press the Save preferences button.
• Clear your browser cache and you should see the new skin.

Additional skins

At SourceForge download area there is a an openbravo-add-on section that contain some additional samples.

How to easily create a new skin

It is possible to easily create a different skin in 5 minutes.

Lets forget about changing icons and little images, this is a How-to change the main colours of the application as you can see in these screenshots.

The files that you must change are:

\web\skins\Blue\Popup\Client\Workflow\button.rollover.png
\web\skins\Blue\Popup\Client\Workflow\button.normal.png
\web\skins\Blue\Popup\Client\Workflow\button.pressed.png
\web\skins\Blue\Popup\NavBar\backgroundCenter.png
\web\skins\Blue\Popup\NavBar\backgroundLeft.png
\web\skins\Blue\Popup\NavBar\backgroundRight.png
\web\skins\Blue\Popup\NavBar\logoLeft.png
\web\skins\Blue\Popup\NavBar\logoRight.png
\web\skins\Blue\Menu\NavBar\backgroundCenter.png
\web\skins\Blue\Menu\NavBar\backgroundLeft.png
\web\skins\Blue\Menu\NavBar\backgroundRight.png
\web\skins\Blue\Menu\NavBar\logoLeft.png
\web\skins\Blue\Menu\NavBar\logoRight.png
\web\skins\Blue\Menu\ToolBar\backgroundCenter.png
\web\skins\Blue\Menu\ToolBar\backgroundLeft.png
\web\skins\Blue\Menu\ToolBar\backgroundRight.png
\web\skins\Blue\Main\Client\Button\iconOk.png
\web\skins\Blue\Main\Client\Button\buttonBody.disabled.png
\web\skins\Blue\Main\Client\Button\buttonBody.normal.png
\web\skins\Blue\Main\Client\Button\buttonBody.pressed.png
\web\skins\Blue\Main\Client\Button\buttonBody.rollover.png
\web\skins\Blue\Main\Client\Button\buttonLeft.disabled.png
\web\skins\Blue\Main\Client\Button\buttonLeft.normal.png
\web\skins\Blue\Main\Client\Button\buttonLeft.pressed.png
\web\skins\Blue\Main\Client\Button\buttonLeft.rollover.png
\web\skins\Blue\Main\Client\Button\buttonRight.disabled.png
\web\skins\Blue\Main\Client\Button\buttonRight.normal.png
\web\skins\Blue\Main\Client\Button\buttonRight.pressed.png
\web\skins\Blue\Main\Client\Button\buttonRight.rollover.png
\web\skins\Blue\Main\Client\FieldButton\fieldButton.normal.png
\web\skins\Blue\Main\Client\FieldButton\fieldButton.pressed.png
\web\skins\Blue\Main\Client\FieldButton\fieldButton.rollover.png
\web\skins\Blue\Main\LeftTabsBar\rightbutton.pressed.png
\web\skins\Blue\Main\LeftTabsBar\rightbutton.rollover.png
\web\skins\Blue\Main\LeftTabsBar\background.png
\web\skins\Blue\Main\LeftTabsBar\backgroundBody.png
\web\skins\Blue\Main\LeftTabsBar\backgroundBorder.png
\web\skins\Blue\Main\LeftTabsBar\backgroundTop.png
\web\skins\Blue\Main\LeftTabsBar\iconEditView.normal.png
\web\skins\Blue\Main\LeftTabsBar\iconEditView.rollover.png
\web\skins\Blue\Main\LeftTabsBar\leftbutton.normal.png
\web\skins\Blue\Main\LeftTabsBar\leftbutton.pressed.png
\web\skins\Blue\Main\LeftTabsBar\leftbutton.rollover.png
\web\skins\Blue\Main\LeftTabsBar\rightbutton.normal.png
\web\skins\Blue\Main\NavBar\backgroundCenter.png
\web\skins\Blue\Main\NavBar\backgroundLeft.png
\web\skins\Blue\Main\NavBar\backgroundRight.png
\web\skins\Blue\Main\NavBar\buttonRight.disabled.png
\web\skins\Blue\Main\NavBar\buttonRight.normal.png
\web\skins\Blue\Main\NavBar\buttonRight.pressed.png
\web\skins\Blue\Main\NavBar\buttonRight.rollover.png
\web\skins\Blue\Main\NavBar\iconAbout.disabled.png
\web\skins\Blue\Main\NavBar\iconAbout.normal.png
\web\skins\Blue\Main\NavBar\iconAbout.pressed.png
\web\skins\Blue\Main\NavBar\iconAbout.rollover.png
\web\skins\Blue\Main\NavBar\iconBack.disabled.png
\web\skins\Blue\Main\NavBar\iconBack.normal.png
\web\skins\Blue\Main\NavBar\iconBack.pressed.png
\web\skins\Blue\Main\NavBar\iconBack.rollover.png
\web\skins\Blue\Main\NavBar\iconHelp.disables.png
\web\skins\Blue\Main\NavBar\iconHelp.normal.png
\web\skins\Blue\Main\NavBar\iconHelp.pressed.png
\web\skins\Blue\Main\NavBar\iconHelp.rollover.png
\web\skins\Blue\Main\NavBar\iconRefresh.disabled.png
\web\skins\Blue\Main\NavBar\iconRefresh.normal.png
\web\skins\Blue\Main\NavBar\iconRefresh.pressed.png
\web\skins\Blue\Main\NavBar\iconRefresh.rollover.png
\web\skins\Blue\Main\NavBar\logoLeft.png
\web\skins\Blue\Main\NavBar\logoRight.png
\web\skins\Blue\Main\NavBar\popupSeparatorBar.png
\web\skins\Blue\Main\ToolBar\backgroundRight.png
\web\skins\Blue\Main\ToolBar\backgroundCenter.png
\web\skins\Blue\Main\ToolBar\backgroundLeft.png

The thing is that you have to apply a color effect (red/blue/green effect) to ALL of the files in that list.

The process is easy but long.

But if you use a batch converter (like advanced batch converter www.batchconverter.com) you can do all the changes automatically. You choose all the images, make the effect, and run the process. In a couple of seconds you will have your images in the desired colour.

Then make a copy of the /web/skin/Default folder and rename it to the name you want for the skin.

Put the modified images on this folder and just add the skin to Openbravo as explained before, in this page.

There are 3 colored skins ready for download at http://sourceforge.net/project/showfiles.php?group_id=162271&package_id=250125&release_id=549425

Customizing the logo

The instructions are only valid for the release 2.35 or higher. These instructions explain how to customize the "yourcompany", "yourit-service" and "sourceforge" logos which are in the login screen.

In the Login Screen there are three customizable logos:

• Company
• Support
• SourceForge

The CSS that permits the change of any of this logo is /web/images/Logos.css

• Login_Logo_SourceForge_Field: It permits to hide the SourceForge whole box uncommenting the property "display: none"
• Login_Logo_xxxxxxx_Container_Cell: It permits the customization of the red bordered TD
• Login_Logo_xxxxxxx_Container: It permits the customization of the blue bordered DIV
• Login_Logo_xxxxxxx: It permits the customization of the yellow bordered IMG

Where xxxxxxx is Company, Support or Sourceforge

By default:

• The Company Logo in the Login Screen is obtained from /web/images/CompanyLogo_big.png. It is managed by "Login_Logo_Company" of Logos.css. You can replace it with any other by directly replacing the file CompanyLogo_big.png or changing the "background: url()" property, but you have to take into account that the properties "width" and "height" need to be modified according to the new image.
• The small Company Logo in the top of the menu is obtained from /web/images/CompanyLogo_small.png. It is managed by "Menu_NavBar_logo" of Logos.css. You can replace it with any other by directly replacing the file CompanyLogo_small.png or changing the "background: url()" property, but you have to take into account that the properties "width" and "height" need to be modified according to the new image. Here it is highly recommended that the target image height be 34px because a higher value will create an undesired effect on the other elements of the navigation bar.
• The Support Logo in the Login Screen is obtained from /web/images/SupportLogo_big.png. It is managed by "Login_Logo_Support" of Logos.css. You can replace it with any other by directly replacing the file SupportLogo_big.png or changing the "background: url()" property, but you have to take into account that the properties "width" and "height" need to be modified according to the new image.
• The SourceForge Logo in the Login Screen is obtained from http://sflogo.sourceforge.net/sflogo.php?group_id=162271&type=5. It is managed by "Login_Logo_Support" of Logos.css. You can replace it changing the "background: url()" property, but you have to take into account that the properties "width" and "height" need to be modified according to the new image. If your client does not have an Internet connection, you can replace the property to "background: url(SFLogo.png) no-repeat center center;" because SFLogo.png also exist in the distribution

There are two ways to change the logos.

1. Modify the existing files keeping the original filename.
   • Save the existing logo files.
   • Modify the existing files without changing the dimensions. (However this can be a little restrictive)
   • Use the same file names as the original logos.
2. Creating your own files and telling Openbravo to use them.
   • Look at the existing files to find out the height.
   • Create you own logo using the same height, but your own width. (Providing you use the same height the logo will fit into the existing layout)
   • Edit /web/images/Logos.css defining your filenames and adjust the dimensions.

Note: In a standard installation this file is: /opt/OpenbravoERP/AppsOpenbravo/web/images/Logos.css

Extract for Company logo on the login screen:

.Login_Logo_Company {
 width: 273px;
 height: 55px;
 margin-top: 3px;
 margin-bottom: 3px;
 background: url(AshleyLogo273x55.png) no-repeat center center;
}

Extract for the support logo on the login screen:

.Login_Logo_Support {
 width: 197px;
 height: 55px;
 margin-top: 3px;
 margin-bottom: 3px;
 background: url(ErinstarLogo197x55.png) no-repeat center center;
}

Extract for the nav bar logo that appears on every screen

.Menu_NavBar_logo {
 width: 190px;
 height: 34px;
 background: url(AshleyLogo190x34.png) no-repeat center center;
}

For both methods:

• • Recompile Openbravo and re-start tomcat to see the changes.

Customizing search and data entry windows