Customize the Manja user interface
With appropriate knowledge, the appearance of Manja can be customized according to your own corporate identity/corporate design.
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 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/web/”.
Please adjust only files in the directory “public/custom” to ensure your customizations will remain after software updates.
DirectoriesBack to top
- public/custom/ and its subdirectories contain all files for a customized UI
- public/custom/files/ contains your custom files (e.g. your logo image)
- public/custom/locale/ contains files for text (general and language specific)
- public/custom/templates/ contains HTML templates
- public/custom/publication_templates/ contains individual publication templates
When a page is loaded Manja checks the directory “public/custom/” and uses certain files, if they exist.
Text and CSS files are getting compiled from the most generic to the most specific version.
The text for “en_US” consists of the following files:
The CSS file for “de_DE” consists of the following files:
For templates the custom version is used, when the file exists in “public/custom/templates/”.
TextBack to top
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”.
In the directory “public/custom/locale/” you can create files with your own texts:
- common.txt – language independent text (e.g. title of the window)
- <language>.txt – text 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/”.
Stylesheets (CSS / LESS)Back to top
All colors and pictures (with a few exceptions) are defined in CSS, so they can be replaced easily by using different LESS files.
LESS is a dynamic stylesheet language that complements CSS with various practical functions: » more information about LESS.
Manja automatically compiles .less files to .css files.
You can add the following LESS files to the directory “public/custom/”:
- styles.less – basic styles
- styles.<language>.less – language specific styles, e.g. styles.en.css – to add language specific graphics
- styles.<language>_<country>.less – country specific styles, e.g. styles.en_GB.less
- styles-print.less – style for print view
Tip: Style definitions can be easily determined in modern browsers with the help of the web developer tools: In Firefox, for example, by right-clicking on the element, then “Examine element”. The web developer tools appear with a focus on the element and associated style rules. Chrome, IE11 and Safari have their own similar tools: You can open them using your F12 key.
Complement styles, not replace them
The customized LESS files should only contain additions, e.g. changing a logo or colors.
Please do not use a full copy of public/skin/d/f/styles.less!
HTML templatesBack to top
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.
- page-meta.html (e.g. to define your own shortcut icon or to integrate an external tracking service)
- page-header.html (e.g. to add customized navigation elements to the header).
You can find more information on the HTML template syntax here.