ERP 2.50:Developers Guide/Concepts/Skins look and feel

ERP 2.50:Developers Guide

ERP 2.50:Developers Guide/Fundamentals and Concepts ERP 2.50:Developers Guide/Concepts/Common Fundamentals ERP 2.50:Developers Guide/Concepts/Modularity ERP 2.50:Developers Guide/Concepts/Publishing Modules ERP 2.50:Developers Guide/Concepts/Merging Modules ERP 2.50:Developers Guide/Concepts/How to Migrate 2.50 Modules to 3.0 ERP 2.50:ModularityVideos ERP 2.50:Extension Module Demonstrations Videos ERP 2.50:Developers Guide/Concepts/Security Model ERP 2.50:Developers Guide/Concepts/Multi-Client and Multi-Org ERP 2.50:Developers Guide/Concepts/Multi-Language and Translations ERP 2.50:Developers Guide/Concepts/Multi-Currency ERP 2.50:Developers Guide/Concepts/Messages ERP 2.50:Developers Guide/Concepts/Skins look and feel ERP 2.50:Developers Guide/Concepts/Model Object Mapping ERP 2.50:Developers Guide/Concepts/Deep linking

Index

Contents 1 Introduction 2 Skins 2.1 Directory layout 2.2 Installation 2.3 How to easily create a new skin 3 Customizing the logo 3.1 There are two ways to change the logos 4 Customizing search and data entry windows 4.1 Right To Left languages 5 Customizing the application menu

Introduction

This document describes the structure and organization of different aspects of the Openbravo skin.

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 ERP per installation.

Directory layout

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

• Common contains images spread through the application.
• Login contains images used only by the login window.
• Main contains images used only by the main application window.
• Menu contains images used only by menu windows.
• Popup contains images used only by popup windows.

There are also four '.css' files:

• Openbravo_ERP.css pointed by WAD windows. It just load the latest css available. Openbravo_ERP_250.css in this case.
• Openbravo_ERP_240.css pointed by 2.40 MP1 manual windows. It is for backward compatibility. If you have a manual window created in 2.40 MP1 calling this file, you can use it in 2.50 without changing the css reference.
• Openbravo_ERP_250.css This is the main css file and it is pointed by 2.50 manual windows. It is for future compatibility. If you have a manual window created in 2.50 calling this file, you will be able to use in future versions.
• RTLFlippedImages.txt list of images that should be flipped (automatically in compilation time) to be used in RTL mode.

Other '.css' files inside the subfolders are not needed since Openbravo ERP 2.40 MP1 anymore. They are there for compatibility issues, but they will be removed in 2.60.

Installation

IMPORTANT NOTE: Due that Openbravo ERP expands its functions after each revision, a custom skin created in a particular main revision it won't run in the next main one. To avoid spend a lot of time re-making a skin after upgrading Openbravo ERP, use comparing utilities (such as Meld) to upgrade your skin. Openbravo ERP only support 'Default' skin.

• Put the skin inside the #openbravo#/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. BlueSkin)
  • To install an existing one, unzip the file into the folder above.

• Within the command line, move to #openbravo# 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. If you are an experimented Openbravo ERP user and if you don't use a war file, you can run just one of these commands: 'ant compile.web' (not deploy) or 'ant compile.web.development' (with deploy).

To register a new skin you must:

• Login as System Administrator.
• Set 'core' module as 'In development'.
• 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. BlueSkin according to the folder name you used above) where the skin is located.

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

• Go to General Setup || Application || Session Preferences 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.

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 colors of the application as you can see in these screenshots.

The files that you must change are:

Greenish elements of 'Default' skin:

\web\skins\Blue\Popup\_ParticularItems\Workflow\button.rollover.png
\web\skins\Blue\Popup\_ParticularItems\Workflow\button.normal.png
\web\skins\Blue\Popup\_ParticularItems\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\Common\Button\buttonBody.disabled.png
\web\skins\Blue\Common\Button\buttonBody.normal.png
\web\skins\Blue\Common\Button\buttonBody.pressed.png
\web\skins\Blue\Common\Button\buttonBody.rollover.png
\web\skins\Blue\Common\Button\buttonLeft.disabled.png
\web\skins\Blue\Common\Button\buttonLeft.normal.png
\web\skins\Blue\Common\Button\buttonLeft.pressed.png
\web\skins\Blue\Common\Button\buttonLeft.rollover.png
\web\skins\Blue\Common\Button\buttonRight.disabled.png
\web\skins\Blue\Common\Button\buttonRight.normal.png
\web\skins\Blue\Common\Button\buttonRight.pressed.png
\web\skins\Blue\Common\Button\buttonRight.rollover.png
\web\skins\Blue\Common\FieldButton\fieldButton.normal.png
\web\skins\Blue\Common\FieldButton\fieldButton.pressed.png
\web\skins\Blue\Common\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

Bluish elements of 'Default' skin (focus elements):

\web\skins\Blue\Popup\_ParticularItems\Workflow\button.focused.png
\web\skins\Blue\Common\FieldButton\fieldButton.focused.png
\web\skins\Blue\Common\Button\buttonBody.focused.png
\web\skins\Blue\Common\Button\buttonLeft.focused.png
\web\skins\Blue\Common\Button\buttonRight.focused.png

Elements with mixed colors (green default buttons with blue frame)

\web\skins\Blue\Common\Button\buttonBody.default.png
\web\skins\Blue\Common\Button\buttonLeft.default.png
\web\skins\Blue\Common\Button\buttonRight.default.png

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

For example, you can apply a blue pattern to the first list, a yellow patter to the second list and a manual color correction of the third list. With this you get a bluish Openbravo ERP with yellow focused items.

NOTE: If you apply the same pattern to the first and to the second list, you won't be able to differentiate focused elements.

The process is easy but long.

But if you use a batch converter (like advanced batch converter http://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 color.

Create a copy of the /web/skin/Default folder and rename it to the name you want for the skin before applying any change (in order to not to change the 'Default' skin).

The last step is register the skin in Openbravo ERP as explained before.

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 allows to change any of this logos is /web/images/Logos.css:

• Login_Logo_SourceForge_Field: It allows to hide the SourceForge whole box uncommenting the property "display: none".
• Login_Logo_xxxxxxx_Container_Cell: It allows to customize the red bordered TD.
• Login_Logo_xxxxxxx_Container: It allows to customize the blue bordered DIV.
• Login_Logo_xxxxxxx: It allows to customize 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: #openbravo#/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 ERP 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

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 logout and then login and there you go. You don not need to compile anything.

---

ERP 2.50:Developers Guide/Concepts/Messages | ERP 2.50:Developers Guide/Concepts/Model Object Mapping 

Categories: Templates | Configuration ERP