Note: The following customization guide calls for a basic knowledge of CSS and HTML
You can customize the UI of Manja by using your own CSS or LESS files, text files (language specific) and HTML templates.
Use FTP or SCP (e.g. "WinSCP") to access the files. All further paths refer to the root directory of the web application, e.g. "/opt/xyz-manja/htdocs/".
Please adjust only files in the directory "custom" to ensure your customizations will remain after software updates.
custom/ and its subdirectories contain all files for a customized UI
custom/files/ contains your custom files (e.g. your logo image)
custom/locale/ contains files for text (general and language specific)
custom/templates/ contains HTML templates
When a page is loaded Manja checks the directory "custom/" and uses certain files, if they exist. Just reload the page in the browser to see your changes. The first reload might take a few seconds (templates and text files get recompiled after changes).
Text and CSS files are getting compiled from the most generic to the most specific version.
Example 1: The text for "en_US" consists of the following files: locale/common.txt + locale/en.txt + locale/en_US.txt + custom/locale/common.txt + custom/locale/en.txt + custom/locale/en_US.txt.
Example 2: The CSS file for "de_DE" consists of the following files: s/d/f/styles.css + s/d/f/styles.de_DE.css + custom/styles.css + custom/styles.de.css + custom/styles.de_DE.css.
For templates the custom version is used, when the file exists in "custom/templates".
You can localize every text in the Manja UI by using simple text files. Each line of the text file consists of" key=text". The "key" is predefined by the application, the "text" is - depending on the usage - a simple word, a text fragment, a phrase or even a full paragraph. LIne breaks are by "\n".
Within "custom/locale" you can add files with your own text:
common.txt - language independent text (e.g. title of the window)
<language>.txt - text in in particular language, e.g. en.txt or de.txt
<language>_<country>.txt - text in language specific notation, e.g. en_US.txt oder en_GB.txt
As reference (finding the particular "key") use the appropriate files in the directory "locale/".
All colors and pictures (with a few exceptions) are defined in CSS, so they can be replaced easily by using different CSS files.
You can add the following CSS files to the directory "custom/":
styles.css - basic CSS files
styles.<language>.css - language specific CSS files, e.g. styles.en.css - to add language specific graphics
styles.<language>_<country>.css - country specific CSS files, e.g. styles.en_GB.css
styles-print.css - CSS for print view
Tip: The best way to find elements is using the browser extension firebug (http://getfirebug.com/) - right click the element and then choose "Inspect Element with Firebug". Bottom right the corresponding styles will appear. Chrome, IE11 and Safari have their own similar tools: You can open them using your F12 key.
The customized CSS files should only contain additions, e.g. changing a logo or colors. Please do not use a full copy of "s/d/f/styles.css".
Every CSS file mentioned in the previous chapter can also be replaced by LESS files.
If a particular .less file exists, Manja automatically generate a proper .css file out of it.
LESS is a dynamic stylesheet language, extending CSS.
HTML templates define the basic page layout and elements (e.g. tables or forms) defined by the application.
The page layout is defined within the template "page.html". This file includes more templates for the different views.
On this account you should only use the templates "page-meta.html" and "page-header.html" for customizations. If you want to adjust other templates please get in contact with us to avoid conflicts in upcoming software updates.