ERP 2.50:Developers Guide/How to customize the Openbravo look and feel
Languages: |
Contents |
Introduction
This how-to explains how to create a module that contains a skin. We will create an example module called Example Skin, with the Java package name org.openbravo.examples.skinexample.
For more extensive documentation about Openbravo ERP skins, consult Skins look and feel article.
For more extensive documentation about Openbravo ERP UI artifacts, consult the Look and feel article.
Prerequisites
Creating module and files structure
Create the following folder structure
#openbravo#/modules/org.openbravo.examples.skinexample/web/org.openbravo.examples.skinexample/skins/ExampleSkin
Create at this location
#openbravo#/modules/org.openbravo.examples.skinexample/web/org.openbravo.examples.skinexample/skins/ExampleSkin/*
These files (with the content):
Openbravo_ERP.css:
@import url(Openbravo_ERP_250.css);
Openbravo_ERP_240.css
@import url(Openbravo_ERP_250.css);
Openbravo_ERP_250.css
@import url(../../Default/Openbravo_ERP_250.css);
Openbravo_ERP_250_print.css
@import url(../../Default/Openbravo_ERP_250_print.css);
Openbravo_ERP_print.css
@import url(Openbravo_ERP_250_print.css);
Now you have to add each class you need to change from the "Default" skin in your Openbravo_ERP_250.css file or in Openbravo_ERP_250_print.css file
You have to include also in these added classes ONLY the attributes you want to change. Thanks to that if new (or changed) material is added to the "Default" skin, it will be also be inherited in your custom skin since you are importing the original "Default" skin and just changing these things you want to.
If you add/change any image that needs to be flipped to RTL (if it is selected), you have to add also a file "RTLFlippedImages.txt" with the path of these images
Here is a real example of how to manage these files: https://code.openbravo.com/erp/mods/org.openbravo.examples.skinexample/file/tip/web/org.openbravo.examples.skinexample/skins/ExampleSkin
PD: Remember that you should make changes only in files inside "ExampleSkin" folder.
Inside Openbravo ERP
- Log into Openbravo ERP as System Administrator.
- From the Application dictionary, select Application Dictionary > Module.
- Click New
- Select the Module tab and fill in the following essential fields:
- Name = Skin Module Example
- Version = 1.0.0
- Java Package = org.openbravo.examples.skinexample
- Type = Module
- In Development = checked
- Description = Example module to demonstrate how to include a skin within a module
- You can also fill in the following additional information:
- Help/Comment = When you install this module a new skin called 'Example Skin' is added. To enable it go to "Session Preferences" window.
- License Type = Openbravo Public License
- License text = The Openbravo Public License Version 1.1 ("OBPL") consists of the Mozilla Public License Version 1.1, modified to be specific to Openbravo, with the Additional Terms in Exhibit B. The original Mozilla Public License 1.1 can be found at: http://www.mozilla.org/MPL/MPL-1.1.html
- Author = Openbravo S.L.U. (John Doe)
- URL = http://www.openbravo.com
- Click Save.
- Select the Dependency tab.
- Click New
- Fill at least the following essential fields as follows:
- Select the Active checkbox.
- Dependent Module = core
- First Version = 2.50.10440
- Click Save
- From the Application menu, select "Application Dictionary > Reference".
- In grid view, select the Skin List record.
- Select the List Reference tab.
- Click New.
- Complete at least the following essential fields:
- Select the Active checkbox.
- Module = Skin Module Example - 1.0.0 - English (USA).
- Search Key = org.openbravo.examples.skinexample/ExampleSkin
- Name = Example Skin
- You can also complete other optional fields, such as:
- Description = Example skin within a module
- Click Save.
Customizing the logos
This how-to explains how to customize the logos that your installation of Openbravo ERP displays. We will customize the "yourcompany" and "yourit-service" logos which are in the login screen and in the top of the Application menu.
You can find how to change the logos that appear in the login window and in the Openbravo application itself by following this link.
For more extensive documentation about this topic, consult the skins look and feel article.
Right To Left languages
Introduction
In this "How to" we are going to put the application in RTL mode.
For more extensive documentation about RTL mode, consult Skins look and feel article.
Setting the language as RTL
- Log into Openbravo ERP as System Administrator.
- From the Application menu, select General Setup > Application > Language.
- Select the language you require (en_US English (USA) by default).
- Select the RTL Language checkbox.
- Click Save.
Your changes will be visible the next time you log into Openbravo ERP.
Introduction
In this "How to" we are going to change the disposition of the application menu items.
If you want an extensive documentation about this topic, go to Skins look and feel article.
- Login as System Administrator
- Go to window "General Setup > Application > Menu".
- Click the "Tree" icon of the toolbar (No matter in which register are you staying)
- The "drag and drop" pop-up appears
- Now in this pop-up, just drag the menu item you want to move, and drop it anywhere. You will see instantly the new position of the menu in that window.
Close the pop-up, logout and then login again. The changes have been applied.
- Login as System Administrator
- Create a new Role
- check the manual check box when creating a role.
- Add access manually or using the insert access process to add those forms, processes, etc you want to have shown to this role users.
- The elements added this way will be shown in the menun even if later on you set them as inactive. In this case you will get the message "With your current role and settings, you cannot view this information" when trying to access it. If you want to hide a specific element you must completly remove it from the role access
Languages: |
ERP 2.50:Developers Guide/How To Create an Industry Template | ERP 2.50:Developers Guide/How To Create a Table