View source | Discuss this page | Page history | Printable version   

ERP 2.50:Developers Guide/How to customize the Openbravo look and feel

ERP 2.50:Developers Guide

Index


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

  1. Log into Openbravo ERP as System Administrator.
  2. From the Application dictionary, select Application Dictionary > Module.
  3. Click New
  4. 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
  5. 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
  6. Click Save.
  7. Select the Dependency tab.
  8. Click New
  9. Fill at least the following essential fields as follows:
    • Select the Active checkbox.
    • Dependent Module = core
    • First Version = 2.50.10440
  10. Click Save
  11. From the Application menu, select "Application Dictionary > Reference".
  12. In grid view, select the Skin List record.
  13. Select the List Reference tab.
  14. Click New.
  15. 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
  16. You can also complete other optional fields, such as:
    • Description = Example skin within a module
  17. 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

  1. Log into Openbravo ERP as System Administrator.
  2. From the Application menu, select General Setup > Application > Language.
  3. Select the language you require (en_US English (USA) by default).
  4. Select the RTL Language checkbox.
  5. Click Save.

Your changes will be visible the next time you log into Openbravo ERP.

Customizing the application menu

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.

Changing application menu tree

  1. Login as System Administrator
  2. Go to window "General Setup > Application > Menu".
  3. Click the "Tree" icon of the toolbar (No matter in which register are you staying)
  4. The "drag and drop" pop-up appears
  5. 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.

Create an individual menu tree for a specific role

  1. Login as System Administrator
  2. Create a new Role
  3. check the manual check box when creating a role.
  4. Add access manually or using the insert access process to add those forms, processes, etc you want to have shown to this role users.
  5. 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



ERP 2.50:Developers Guide/How To Create an Industry Template | ERP 2.50:Developers Guide/How To Create a Table 

Retrieved from "http://wiki.openbravo.com/wiki/ERP_2.50:Developers_Guide/How_to_customize_the_Openbravo_look_and_feel"

This page has been accessed 34,670 times. This page was last modified on 14 June 2011, at 11:04. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.