Layout

Apollo provides a main template.xhtml and additional topbar and footer fragments for the base layout. These xhtml files must be placed under WEB-INF folder and client pages should reference the template.xhtml as their template. 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 and images that are located inside resources/apollo-layout folder, simply copy the apollo-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/apollo-layout/. Please refer to demo app or maven project of the demo app as the reference.

Theme

Apollo provides 15 themes out of the box, setup of a theme simple as defining primefaces.THEME context parameter in web.xml such as "primefaces-apollo-orange". Full list of available themes are;

  • primefaces-apollo-blue
  • primefaces-apollo-light-blue
  • primefaces-apollo-green
  • primefaces-apollo-light-green
  • primefaces-apollo-lime
  • primefaces-apollo-red
  • primefaces-apollo-orange
  • primefaces-apollo-deep-orange
  • primefaces-apollo-purple
  • primefaces-apollo-deep-purple
  • primefaces-apollo-pink
  • primefaces-apollo-indigo
  • primefaces-apollo-cyan
  • primefaces-apollo-teal
  • primefaces-apollo-blue-grey

A custom theme can be developed by the following steps.

  • Choose a theme name such as primefaces-apollo-brown.
  • Create a folder name primefaces-apollo-brown and place an empty theme.scss inside
  • Import the _theme.scss and define a $primaryColor: variable.
  • Build the scss to generate css
  • Either serve the css from a jar file or under webapp/resources/primefaces-apollo-brown folder

Same can also be applied to layout itself;

  • Choose a layout name such as layout-brown.
  • Create an empty file named layout-brown.scss inside resources/apollo-layout/css folder.
  • Import the _layout.scss and define a $primaryColor: variable.
  • Build the scss to generate css
  • Serve the css by importing it using a link tag or h:outputStylesheet.

For both cases, several .scss files such as _layout.scss, _theme.scss or _variables.scss has to be present relative to your scss files, these are inside the sass folder in the distribution.

Any scss file can be processed by running the following command.

sass --update src/main/webapp/resources/ --sourcemap=none

Menu

Menu is a regular JSF component that supports PrimeFaces MenuModel API allowing both declarative and programmatic approaches. State is saved via a cookie and to remove it define a widgetVar to the menu and call PF('yourwidgetvar').clearMenuState(). To use the menu add the primefaces-apollo-{version}.jar to your classpath and import the http://primefaces.org/Apollo namespace.

xmlns:pa="http://primefaces.org/apollo">

<pa:menu>
</pa:menu>

Icons

Apollo Layout uses font awesome icons for layout so enable font awesome support in PrimeFaces by setting primefaces.FONT_AWESOME context parameter in web.xml as true. If your PrimeFaces version does not have the font awesome integration, include the font-awesome manually in your application.

Cards

Card is a section to group content and layout provides a built-in css for it. Apply .card style class to your container to use it.

<div class="card">
    Content here
</div>

Grid CSS

Apollo uses new PrimeFaces Grid CSS throughout the samples, we strongly suggest using Grid CSS as your layout framework as it is well tested and supported by PrimeFaces. Grid CSS is automatically included on newer versions however if your PrimeFaces version is older than 5.3.14, add the provided grid.css file under /apollo-layout/css/ folder to your template manually.

Sass Variables

Main colors used throughout the theme and layout are defined inside _variables.scss to allow easier customization. For example default font size is set to 14px for layout and theme components, this can be customized by changing the $fontSize variable value located inside _variables.scss file and compiling the layout.scss.

$fontSize: 15px;
$textColor: #d8d8d8;

/* Widgets */
$headerBgColor: #282929;
$headerTextColor: #d8d8d8;
$headerBorderColor: #4e5159;
$contentBgColor: #3b3e47;
$contentBorderColor: #4e5159;
$contentLightBorderColor: rgba(78,81,89,0.3);
$stateDefaultBgColor: #282929;
$stateDefaultBorderColor: #282929;
$stateHoverBgColor: #3c3d41;
$stateHoverBorderColor: #282829;
$listItemHoverBgColor: darken($primaryColor,10%);

//more variables

Migration Guide

1.0.1 to 1.0.2

  • Update layout css files
  • Replace theme jar with new jar

1.0 to 1.0.1

  • Update layout.js and layout css files
  • Include animate.css
  • Replace theme jar with new jar
  • Update landing page