Info | ||
---|---|---|
| ||
This page documents the usage with the Common Theme, the pre-Common-Theme documentation is here: Visual Themes - How to |
Warning | ||
---|---|---|
| ||
The documentation below is deprecated since R17.12 branch. It's better to refer to themes/README.adoc in source |
The documentation bloc below is the HTML import of the conversion of README.MD into HTML by Pandoc using this command line locally in root folder.
Code Block |
---|
pandoc themes/README.md -s -o tools/wiki-files/themes/README.md.html |
...
Table of Contents |
---|
HTML | ||
---|---|---|
|
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.
- Download the zip file from the Gallery
- Unzip it in the OFBiz themes folder
- Issue the "ant run-install" command in your OFBiz home folder
From this moment your added Visual Theme is installed and available in the OFBiz framework.
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"/>
with the following one:
...
<UserPreference userLoginId="_NA_" userPrefTypeId="VISUAL_THEME"
userPrefGroupTypeId="GLOBAL_PREFERENCES" userPrefValue="CHROME"/>
How to create a Visual Theme
An OFBiz Visual Theme consists of a simple OFBiz component installed, usually, in the themes folder. In the component, all the resources needed by the Visual Theme are defined.
When creating new themes for OFBiz, it is important to follow these guidelines
...
Panel |
---|
NOTE: |
Note |
---|
https://issues.apache.org/jira/browse/OFBIZ-3490 has a script to copy one theme to a new one. |
Let's say you want to create a new theme for the backoffice applications called mytheme and have selected bluelight as a starting template.
- 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: |
- 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.
- Edit the file /themes/mytheme/webapp/mytheme/WEB-INF/web.xml as follows:
- change the <display-name> and <description> with a description of your theme
- Edit the file /themes/mytheme/ofbiz-component.xml as follows:
- change all "bluelight" occurrences with "mytheme"
Your theme is now ready to be installed.
You have to either do a ant run-install-file or import the file your modified /themes/mytheme/data/ThemeData.xml through the webtools.
If you went the route of /framework/common/data/CommonTypeData.xml then you must do the same with that file as well.
How to use it
If you did a backend theme, then select it through the themes link at the top of any page (maybe in preferences for some themes)
If you did an eCommerce theme, then select it in the Product Store associated with the Website you want to use it on.
If you want to upload your theme to the Visual Theme Gallery, simply create a mytheme.zip file from the /themes/mytheme folder and upload to the gallery.
...