Customizing Openbravo ERP look and feel
Customizing Openbravo ERP look and feel
| Languages: |
English | Español | Translate this article... |
This document describes how to customize different aspects of Openbravo ERP look and feel.
Contents[hide] |
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 (CSS) 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.
- 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.
- 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
Right To Left languages
If a css line must be different when the language of the application is written from right to left (RTL languages), a tag like this must be added:
background-position: center right; /*~RTL background-position: center left; */
this way, the compilation process will write the line
background-position: center right;
in the ltr skin folder, and the line
background-position: center left;
in the rtl skin folder. This way, a fine tunning can be done in a skin to fit also the rtl languages.
If there exists already a comment related to Sprites in a css line of the class, then both rtl and ltr values must be defined. For example, for the original class
a.ButtonLink table.Button .Button_left, table.Button .Button_left {
width: 35px;
height: 26px;
background-repeat: no-repeat;
background-position: center right;
background-image: url(Common/Button/buttonLeft.normal.png); /** sprite-ref: xxspritexx_V; sprite-alignment: right; */
text-align: right;
vertical-align: top;
}
the rtl changes to apply will be:
a.ButtonLink table.Button .Button_left, table.Button .Button_left {
width: 35px;
height: 26px;
background-repeat: no-repeat;
background-position: center right; /*~RTL background-position: center left; */
background-image: url(Common/Button/buttonLeft.normal.png); /** sprite-ref: xxspritexx_V; sprite-alignment-ltr: right; sprite-alignment-rtl: left; */
text-align: right; /*~RTL text-align: left; */
vertical-align: top;
}
Customizing the application menu
Versions before 2.34
Log in the application and set your role to System Admin. Then go to General Setup > Application > Menu. Once you arrive to that window, you need to click on the "tree" button, and a new window with all the menus will pop up. Once there, you will notice 2 sides on the window. On the top side you will see the all the menus in a "tree" mode. On the down side you should see some checkboxes.
The first thing you should do is to click on "take element", on the down side of the window. Then click the menu you want to move (the application dictionary in the example). Then click in the "Assign to" checkbox in the down side, and after that select again another menu on the top side. The last thing you need to do is to specify if you want the first menu to be under the secondly selected menu (same level) or if you want it to be inside the secondly selected menu (inside) to become a son of the first menu. Click on OK to the changes to take effect.
In order to see the changes you just made, just log out-log in and there you go. You don not need to compile anything.
Versions 2.34 and above
Same as for previous versions, you must log in the application and set your role to System Admin. Then go to General Setup > Application > Menu. Once you arrive to that window, you need to click on the "tree" button, and a new window with all the menus will pop up.
Once there, with the drag and drop utility, just drag the menu you want to move, and drop it anywhere. You will see instantly the new position of the menu in that window.
In order to see the changes you just made, just log out-log in and there you go. You don not need to compile anything.
