Modena Documentation

Installation

Modena provides a main template.xhtml and additional layoutmenu.xhtml, topbar.xhtml files for the base layout. These 3 files must be placed under WEB-INF folder. Provided empty-page.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder. Other required resources are the css, js, image and font files that are located inside resources/modena-layout folder, simply copy the modena-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/modena-layout/. Please refer to demo app or maven project of the demo app as the reference.

Theme is a regular PrimeFaces theme and setup is simple as defining primefaces.THEME context parameter in web.xml as "modena", refer to themes page for more information.

Menu Direction Modes

Modena menus have two direction modes. Default is LTR and for RTL mode add "ui-modena-rtl" to the h:body component.

Migration Guide
2.1.2 to 2.1.3
  • - Replace theme jar with the new jar.
  • - Update layout.js
  • - Replace ModenaMenu.java with the new ModenaMenu.java.
2.1.1 to 2.1.2
  • - Update modena-layout.css, modena-layout.less, core-layout.css and layout.js
  • - Replace theme jar with the new jar.
  • - Replace ModenaMenuRenderer.java with the new ModenaMenuRenderer.java.
  • - Replace ModenaMenu.java with the new ModenaMenu.java.
2.1 to 2.1.1
  • - Replace theme jar with the new jar.
2.0.2 to 2.1
  • - Replace theme jar with the new jar.
2.0.1 to 2.0.2
  • - Update modena-layout.css, modena-layout.less, core-layout.css and template.xhtml
  • - Replace theme jar with the new jar.
2.0 to 2.0.1
  • - Update core-layout.css and modena-layout.css files.
  • - Update modena-layout/fonts/fontawesome-* and modena-layout/css/font-awesome.css.
  • - Add FontAwesome.otf file into modena-layout/fonts/ .
  • - Update layout.js.
  • - Replace theme jar with the new jar.
1.0.2 to 2.0
  • - Replace theme jar with the new jar.
1.0.1 to 1.0.2
  • - Update layout.js.
  • - Replace theme jar with the new jar.
1.0 to 1.0.1
  • - Update core-layout.css and modena-layout.css files.
  • - Update layout.js.
  • - Replace theme jar with the new jar.
Core Layout

Core Layout is a set of CSS classes used to create responsive grid layouts with additional utilities. Modena uses Core Layout internally, however for grid layout you may also choose another utility like Grid CSS or Bootstrap Grid.

+1 888 123 4567
info@modenamodena.com