Versions Compared

Old Version 28

changes.mady.by.user Jacques Le Roux

Saved on

compared with

New Version 29

changes.mady.by.user Jacques Le Roux

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updates the page, notably for new releases but not only

Visual Themes in Releases

Starting with R13.07 only 2 themes are available in releases:

  • Flat Grey
  • Tomahawk

The main reasons we kept only them are

  • Less maintance burden
  • Flat Grey is the only theme capable of handling RTL (Right To Left) languagues like Arabic, Hebrew, etc.
  • Tomahawk is the last evolution of a family of themes (others are in order of appeareance: BlueLight, Dropping Crumbs)

There are 5 themes available in trunk (order of appeareance)

  • Flat Grey
  • BizznessTime
  • BlueLight
  • Dropping Crumbs
  • BizznessTime

Visual Themes - How To

How to install a Visual Theme

...

A Visual Theme is distributed as a single .zip file like for example chrome.zip.

...

not present in a release but available in trunk?

Simply checkout the theme you want from the trunk in Subversion repository. If you need more information about this ask on user ML

Then place it under the themes directory in your OFBiz instance.

...

From this moment your added Visual Theme is installed and available in the OFBiz framework at next restart.

How to change the backoffice default Visual Theme

The default theme can be set by using the Entity Reference tool in the Web Tools application. Alternatively, this setting can be changed in the seed data files that are loaded during the database setup.

The seed data for this setting is: /framework/common/data/CommonTypeData.xml

For example, to set the chrome theme as default, replace the line:

...


<UserPreference userLoginId="_NA_" userPrefTypeId="VISUAL_THEME"
userPrefGroupTypeId="GLOBAL_PREFERENCES" userPrefValue="DEFAULT"/>

Simply change the VISUAL_THEME property in general properties

 

with the following one:

...


<UserPreference userLoginId="_NA_" userPrefTypeId="VISUAL_THEME"
userPrefGroupTypeId="GLOBAL_PREFERENCES" userPrefValue="CHROME"/>

How to create a Visual Theme

...

The simplest way to create a Visual Theme is starting from one of the already available themes in the OFBiz themes folder.
Panel NOTE:
You can also start from a theme that is not included in OFBiz but is available in the Gallery. This is not reccomended because there is no garantee that themes out of the OFBiz distribution are regularly updated to be compatible with the latest OFBiz. In this case just download the theme file, unzip it in the / themes /mytheme folder and apply the same procedure below skipping the very first step.

Note

https://issues.apache.org/jira/browse/OFBIZ-3490 has a script to copy one theme to a new one.
for instance if you want an new ecommerce theme, copy the multiflex theme to your new one.

...

  • Create a new /themes/mytheme folder and copy there all files from the /themes/bluelight folder.
  • Rename the folder /themes/mytheme/webapp/bluelight to /themes/mytheme/webapp/mytheme
  • Delete all files from the /themes/mytheme/includes folder and add your own header and/of footer files if needed
  • Delete all files from the /themes/mytheme/webapp/mytheme folder and add your own css files and images
Panel

NOTE:
Please consider that all images references in your css file must be linked using the "/mytheme" path.
For example if you have a background.jpg image, you should use the following address: url(/mytheme/background.jpg)

  • Edit the file /themes/mytheme/data/ThemeData.xml as follows:
    • change the visualThemeId from "BLUELIGHT" to "MYTHEME"
    • if your theme is intended to be used for the Ecommerce application set the visualThemeTypeId="ECOMMERCE"
    • if your theme is intended to be used for the backoffice applications set the visualThemeTypeId="BACKOFFICE"
    • Change all VisualThemeResource lines to include references to you theme files
    • You can add more references like styies but using the sequence. this will determine how they are places in the web pages.
    • You can also add Variables that you can use in the includes/* files. For instance ROBOTTEXT.

...