Documentation

Version 4.45

older versions
Die Dokumentation auf
lesen

Customization

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.

Directories

Back 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:

  • locale/common.txt
  • locale/en.txt
  • locale/en_US.txt
  • public/custom/locale/common.txt
  • public/custom/locale/en.txt
  • public/custom/locale/en_US.txt

 

The CSS file for “de_DE” consists of the following files:

  • public/skin/d/f/styles.less
  • public/skin/d/f/styles.de_DE.less
  • public/custom/styles.less
  • public/custom/styles.de.less
  • public/custom/styles.de_DE.less

For templates the custom version is used, when the file exists in “public/custom/templates/”.

Text

Back 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”.

Target: public/custom/locale/*.txt
Reference: locale/*.txt

 

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.

Target: public/custom/*.less
Reference: public/skin/d/f/*.less

 

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 templates

Back 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.

In every new version of the application single templates can be changed or new ones might get added. A few templates contain also javascript code, that can also get adjusted in a new software version.

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.

Target: public/custom/templates/*.html
Reference: public/skin/d/t/*.html

Customizable templates:

  • 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.