View source | Discuss this page | Page history | Printable version   
Toolbox
Main Page
Upload file
What links here
Recent changes
Help

PDF Books
Show collection (0 pages)
Collections help

Search

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

ERP 2.50:Developers Guide

Index


Contents

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:

There are also four '.css' files:

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.

To register a new skin you must:

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

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.

Effect.PNG

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.

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:

LoginLogos.png

The CSS that allows to change any of this logos is /web/images/Logos.css:

Where xxxxxxx is Company, Support or Sourceforge-

By default:

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:

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.

Menu1.png

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.

Menu2.png



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

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

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