Getting Started

First of all, you'd need SASS to compile CSS, proceed to SASS Installation before beginning if you do not have SASS available in your command line.

Demo project has an integrated jetty plugin so running the sample is easy as building the css first followed by the mvn jetty:run command.

sass --update src/main/webapp/resources:src/main/webapp/resources --no-source-map
mvn jetty:run

Navigate to http://localhost:8080/pandora to view the demos which is exactly same as the live version.

Layout

Pandora utilizes JSF templating APIs and provides a main template.xhtml along with additional topbar, menu, rightpanel, breadcrumb 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.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder. By default template defines 3 placeholders (page title, breadcrumb and actual content) and you many add more as per your requirements.

Sample page below uses the main template from pandora.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/WEB-INF/template.xhtml">
    
    <ui:define name="title">
        // Title text
    </ui:define>
    <ui:define name="viewname">
        // View content for breadcrumb
    </ui:define>

    <ui:define name="content">
        // Content
    </ui:define>
</ui:composition>

Other required assets are the css, javascript and images that are located inside resources/pandora-layout folder, simply copy the pandora-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/pandora-layout/. Please refer to demo app or maven project of the demo app as the reference.

GuestPreferences Bean

GuestPreferences is a simple session scoped bean to keep the user customizations of the layout, template xhtml files refer to this bean to dynamically change their behavior such as menu mode or theme. This bean is not necessary to run the pandora and only used for demo purposes. For example template.xhtml includes layout color depending on a user preference using an EL expression.

<h:outputStylesheet name="css/#{guestPreferences.layout}.css" library="pandora-layout" />

In your application, you may also need a similar bean to make the template dynamic so that your users will be able to change their preferred menu or theme.

Source code of GuestPreferences.

public class GuestPreferences implements Serializable {
    
    private String layoutPrimaryColor = "teallight";
    
    private String topbarTheme = "teallight";
    
    private String componentTheme = "bluegrey-light";
    
    private String menuMode = "layout-slim-plus";
    
    private String menuColor = "light";
    
    private String menuTheme = "teallight";

    private boolean groupedMenu = true;
    
    public String getLayout() {
        return "layout-" + this.layoutPrimaryColor;
    }

    public String getLayoutPrimaryColor() {
        return layoutPrimaryColor;
    }

    public void setLayoutPrimaryColor(String layoutPrimaryColor) {
        this.layoutPrimaryColor = layoutPrimaryColor;
    }

    public String getTopbarTheme() {
        return topbarTheme;
    }
    
    public void setTopbarTheme(String topbarTheme) {
        this.topbarTheme = topbarTheme;
    }

    public String getComponentTheme() {
        return componentTheme;
    }

    public void setComponentTheme(String componentTheme) {
        this.componentTheme = componentTheme;
    }

    public String getMenuMode() {
        return menuMode;
    }

    public void setMenuMode(String menuMode) {
        this.menuMode = menuMode;
    }

    public String getMenuColor() {
        return menuColor;
    }

    public void setMenuColor(String menuColor) {
        this.menuColor = menuColor;
        this.menuTheme = this.menuColors.get(menuColor).get(0).getFile();
    }

    public String getMenuTheme() {
        return menuTheme;
    }

    public void setMenuTheme(String menuTheme) {
        this.menuTheme = menuTheme;
        this.setSelectedPalette(null);
    }

    public boolean isGroupedMenu() {
        return this.groupedMenu;
    }

    public void setGroupedMenu(boolean value) {
        this.groupedMenu = value;
    }
}

Components Theme

Pandora provides 42 PrimeFaces theme colors out of the box. Setup of a theme simple as including the theme jar in your classpath and defining primefaces.THEME context parameter in web.xml such as "pandora-blue-accent". A theme color offers 3 alternatives, in "accent" mode a secondary color is used for highlighted elements and headers are displayed with the primary color. In "light" and "dark" alternatives, highlighted elements use the primary color and header elements are displayed as light or dark. Full list of available themes are;

• pandora-blue-accent
• pandora-blue-dark
• pandora-blue-light
• pandora-bluegrey-accent
• pandora-bluegrey-dark
• pandora-bluegrey-light
• pandora-cyan-accent
• pandora-cyan-dark
• pandora-cyan-light
• pandora-green-accent
• pandora-green-dark
• pandora-green-light
• pandora-indigo-accent
• pandora-indigo-dark
• pandora-indigo-light
• pandora-magenta-accent
• pandora-magenta-dark
• pandora-magenta-light
• pandora-orange-accent
• pandora-orange-dark
• pandora-orange-light
• pandora-purple-accent
• pandora-purple-dark
• pandora-purple-light
• pandora-purpledark-accent
• pandora-purpledark-dark
• pandora-purpledark-light
• pandora-purplelight-accent
• pandora-purplelight-dark
• pandora-purplelight-light
• pandora-red-accent
• pandora-red-dark
• pandora-red-light
• pandora-tealdark-accent
• pandora-tealdark-dark
• pandora-tealdark-light
• pandora-teallight-accent
• pandora-teallight-dark
• pandora-teallight-light
• pandora-yellow-accent
• pandora-yellow-dark
• pandora-yellow-light

A custom theme can be developed by the following steps.

• Create a custom theme folder such as primefaces-pandora-myown under webapp/resources and place an empty theme.scss inside.
• Copy the sass folder from the distribution to webapp/resources.
• Define the variables listed below along with the imports at the end.
• Build the scss to generate css.
• Set primefaces.THEME context parameter as pandora-myown
• Either bundle the css in a jar file for reuse between different projects or serve from webapp/resources/primefaces-pandora-myown folder using a h:outputStyleSheet.

Here are the variables required to create a theme.

$primaryLighterColor:#D5EEFF;
$primaryColor:#2E88FF;
$primaryDarkerColor:#2169DB;
$primaryDarkestColor:#174EB7;
$primaryColorText:#ffffff;

$accentColor:$primaryColor;
$accentDarkerColor:$primaryDarkerColor;
$accentColorText:$primaryColorText;

$containerHeaderBgColor:#eeeeee;
$containerHeaderBorder:1px solid #e0e0e0;
$containerHeaderTextColor:#212121;
$containerHeaderIconColor:#757575;
$containerHeaderIconHoverColor:#212121;

$clickableContainerHeaderBgColor:#eeeeee;
$clickableContainerHeaderBorder:1px solid #e0e0e0;
$clickableContainerHeaderTextColor:#212121;
$clickableContainerHeaderIconColor:#757575;

$clickableContainerHeaderHoverBgColor:#e0e0e0;
$clickableContainerHeaderHoverBorder:1px solid #bdbdbd;
$clickableContainerHeaderHoverTextColor:#212121;
$clickableContainerHeaderHoverIconColor:#757575;

$clickableContainerHeaderActiveBgColor:$primaryColor;
$clickableContainerHeaderActiveBorder:1px solid $primaryColor;
$clickableContainerHeaderActiveTextColor:$primaryColorText;
$clickableContainerHeaderActiveIconColor:$primaryColorText;

$clickableContainerHeaderActiveHoverBgColor:$primaryDarkerColor;
$clickableContainerHeaderActiveHoverHoverBorder:1px solid $primaryDarkerColor;
$clickableContainerHeaderActiveHoverTextColor:$primaryColorText;
$clickableContainerHeaderActiveHoverIconColor:$primaryColorText;

@import '../sass/theme/_core';

An example sass command to compile the css would be;

sass src/main/webapp/resources/primefaces-pandora-myown/theme.scss:src/main/webapp/resources/primefaces-pandora-myown/theme.css  --no-source-map

Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.

sass --watch src/main/webapp/resources:src/main/webapp/resources --no-source-map

Layout

Layout customization is similar to theme method.

• Choose a layout name such as layout-myown.
• Create an empty file named layout-myown.scss inside resources/pandora-layout/css folder.
• Copy the sass folder from the distribution to webapp/resources.
• Define the variables listed below along with the import at the end.
• Build the scss to generate css
• Serve the css by importing it using h:outputStylesheet.

Here are the variables required to create a layout.

$primaryColor:#2E88FF;
$primaryTextColor:#191a1c;

@import '../../sass/layout/_layout';

SASS Variables

In case you'd like to customize common variables such as font-size, the _variables.scss under the sass folder is where they are defined.

$fontFamily: 'IBM Plex Sans';
$fontSize:13px;
$textColor:#191a1c;
$textSecondaryColor:#525557;
$borderRadius:4px;
$transitionDuration:.2s;

_layout_variables.scss under sass/variables folder define the shared variables of the layout.

@import './_variables';

$bodyBgColor:#f8fafc;

$menuShadow: 0 2px 10px 0 rgba(25, 26, 28, 0.12);
$menuTooltipBgColor:#354045;
$menuTooltipTextColor:#ffffff;

@import '../overrides/layout_variables';

Similarly __theme_variables.scss files under sass/variables contains the whole set of variables to generate a PrimeFaces theme.

@import './variables';

//icons
$iconWidth:1em;
$iconHeight:1em;
$iconFontSize:1.143em;

//anchors
$linkColor:$primaryColor;
$linkHoverColor:$primaryDarkerColor;
$linkActiveColor:$primaryDarkestColor;

//highlight
$highlightBgColor:$accentColor;
$highlightColorText:$accentColorText;

//focus
$focusOutline:0 none;
$focusOutlineOffset:0;
$focusShadow:0 0 0 .2em lighten($primaryColor, 25%);

//input field
$inputPadding:.429em;
$inputBgColor:#f5f5f5;
$inputBorder:1px solid #E0E0E0;
$inputHoverBorderColor:#bdbdbd;
$inputFocusBorderColor:$primaryColor;
$inputErrorBorderColor:#EF5350;
$inputPlaceholderTextColor:#909090;
$inputFocusShadow:0 none;
$inputTransition:border-color $transitionDuration,box-shadow $transitionDuration;

//groups
$inputGroupBorderColor:#E0E0E0;
$inputGroupBgColor:#eeeeee;
$inputGroupTextColor:$textColor;
$inputGroupIconColor:$textSecondaryColor;
$inputGroupAddonMinWidth:2*$fontSize;

//input lists
$inputListMinWidth:12em;
$inputListBgColor:#ffffff;
$inputListBorder:0px none;
$inputListPadding:0;

$inputListItemPadding:.429em .857em;
$inputListItemBgColor:transparent;
$inputListItemTextColor:$textColor;
$inputListItemHoverBgColor:$primaryLighterColor;
$inputListItemHoverTextColor:$primaryDarkestColor;
$inputListItemHighlightBgColor:$highlightBgColor;
$inputListItemHighlightTextColor:$highlightColorText;
$inputListItemBorder:0 none;
$inputListItemBorderRadius:0;
$inputListItemMargin:0;

$inputListHeaderPaddingTop:.429em;
$inputListHeaderPaddingLeft:.857em;
$inputListHeaderPaddingRight:.857em;
$inputListHeaderPaddingBottom:.429em;
$inputListHeaderBgColor:#eeeeee;
$inputListHeaderTextColor:$textColor;
$inputListHeaderBorder:1px solid #E0E0E0;

$inputListHeaderSearchIconColor:$textSecondaryColor;
$inputListHeaderCloseIconColor:$primaryColor;
$inputListHeaderCloseIconHoverColor:$primaryDarkerColor;
$inputListHeaderCloseIconTransition:color $transitionDuration;

//inputs with panels (password, keyboard)
$inputContentPanelPadding:.857em;
$inputContentPanelBgColor:#ffffff;
$inputContentPanelTextColor:$textColor;

//inputs with overlays
$inputOverlayBorder:1px solid #E0E0E0;
$inputOverlayShadow:0 3px 6px 0 rgba(0, 0, 0, 0.16);

//input dropdowns
$inputDropdownIconColor:$textSecondaryColor;

//inputs with buttons
$inputButtonWidth:2.143em;

//button
$buttonTextOnlyPadding:.429em 1em;
$buttonWithLeftIconPadding:.429em 1em .429em 2em;
$buttonWithRightIconPadding:.429em 2em .429em 1em;
$buttonIconOnlyPadding:.429em;
$buttonIconOnlyWidth:2.143em;

$buttonBgColor:$primaryColor;
$buttonBorder:1px solid $primaryColor;
$buttonTextColor:$primaryColorText;

$buttonHoverBgColor:$primaryDarkerColor;
$buttonHoverTextColor:$primaryColorText;
$buttonHoverBorderColor:$primaryDarkerColor;

$buttonActiveBgColor:$primaryDarkestColor;
$buttonActiveTextColor:$primaryColorText;
$buttonActiveBorderColor:$primaryDarkestColor;

$buttonFocusOutline: 2px dotted $primaryColor;
$buttonFocusOutlineOffset:1px;
$buttonFocusShadow:0 none;
$buttonTransition:background-color $transitionDuration,box-shadow $transitionDuration;
$raisedButtonShadow:0 0 3px 2px rgba(0, 0, 0, 0.2);
$roundedButtonBorderRadius:1em;

//button severities
$secondaryButtonBgColor:#F5F5F5;
$secondaryButtonBorder:1px solid #F5F5F5;
$secondaryButtonTextColor:#212121;
$secondaryButtonHoverBgColor:#E0E0E0;
$secondaryButtonHoverTextColor:#212121;
$secondaryButtonHoverBorderColor:#E0E0E0;
$secondaryButtonActiveBgColor:#BDBDBD;
$secondaryButtonActiveTextColor:#212121;
$secondaryButtonActiveBorderColor:#BDBDBD;

$helpButtonBgColor:#009688;
$helpButtonTextColor:#ffffff;
$helpButtonBorder:1px solid #009688;
$helpButtonHoverBgColor:#00796B;
$helpButtonHoverTextColor:#ffffff;
$helpButtonHoverBorderColor:#00796B;
$helpButtonActiveBgColor:#00695C;
$helpButtonActiveTextColor:#ffffff;
$helpButtonActiveBorderColor:#00695C;

$warningButtonBgColor:#FFC107;
$warningButtonTextColor:#000000;
$warningButtonBorder:1px solid #FFC107;
$warningButtonHoverBgColor:#FFA000;
$warningButtonHoverTextColor:#000000;
$warningButtonHoverBorderColor:#FFA000;
$warningButtonActiveBgColor:#FF8F00;
$warningButtonActiveTextColor:#000000;
$warningButtonActiveBorderColor:#FF8F00;

$successButtonBgColor:#4CAF50;
$successButtonTextColor:#ffffff;
$successButtonBorder:1px solid #4CAF50;
$successButtonHoverBgColor:#388E3C;
$successButtonHoverTextColor:#ffffff;
$successButtonHoverBorderColor:#388E3C;
$successButtonActiveBgColor:#2E7D32;
$successButtonActiveTextColor:#ffffff;
$successButtonActiveBorderColor:#2E7D32;

$infoButtonBgColor:#2196F3;
$infoButtonTextColor:#ffffff;
$infoButtonBorder:1px solid #2196F3;
$infoButtonHoverBgColor:#1976D2;
$infoButtonHoverTextColor:#ffffff;
$infoButtonHoverBorderColor:#1976D2;
$infoButtonActiveBgColor:#1565C0;
$infoButtonActiveTextColor:#ffffff;
$infoButtonActiveBorderColor:#1565C0;

$dangerButtonBgColor:#FF5722;
$dangerButtonTextColor:#ffffff;
$dangerButtonBorder:1px solid #FF5722;
$dangerButtonHoverBgColor:#E64A19;
$dangerButtonHoverTextColor:#ffffff;
$dangerButtonHoverBorderColor:#E64A19;
$dangerButtonActiveBgColor:#D84315;
$dangerButtonActiveTextColor:#ffffff;
$dangerButtonActiveBorderColor:#D84315;

//checkbox
$checkboxWidth:20px;
$checkboxHeight:20px;
$checkboxActiveBorderColor:$primaryColor;
$checkboxActiveBgColor:$primaryColor;
$checkboxActiveHoverBgColor:$primaryDarkestColor;
$checkboxActiveTextColor:$primaryColorText;
$checkboxFocusBgColor:$inputBgColor;
$checkboxFocusTextColor:$primaryColor;
$checkboxFocusBorderColor:$primaryColor;
$checkboxFocusShadow:0 0 0 0.2em lighten($primaryColor, 25%);
$checkboxTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;

//radiobutton
$radioButtonWidth:20px;
$radioButtonHeight:20px;
$radioButtonActiveBorderColor:$primaryColor;
$radioButtonActiveBgColor:$primaryColor;
$radioButtonActiveHoverBgColor:$primaryDarkestColor;
$radioButtonActiveTextColor:$primaryColorText;
$radioButtonFocusBgColor:$inputBgColor;
$radioButtonFocusTextColor:$primaryColor;
$radioButtonFocusBorderColor:$primaryColor;
$radioButtonFocusShadow:0 0 0 0.2em lighten($primaryColor, 25%);
$radioButtonTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;

//togglebutton
$toggleButtonBgColor:#E0E0E0;
$toggleButtonBorder:1px solid #E0E0E0;
$toggleButtonTextColor:$textColor;
$toggleButtonIconColor:$textSecondaryColor;
$toggleButtonHoverBgColor:$primaryLighterColor;
$toggleButtonHoverBorderColor:$primaryLighterColor;
$toggleButtonHoverTextColor:$primaryDarkestColor;
$toggleButtonHoverIconColor:$primaryColor;
$toggleButtonActiveBgColor:$primaryColor;
$toggleButtonActiveBorderColor:$primaryColor;
$toggleButtonActiveTextColor:$primaryColorText;
$toggleButtonActiveIconColor:$primaryColorText;
$toggleButtonActiveHoverBgColor:$primaryDarkerColor;
$toggleButtonActiveHoverBorderColor:$primaryDarkerColor;
$toggleButtonActiveHoverTextColor:$primaryColorText;
$toggleButtonActiveHoverIconColor:$primaryColorText;
$toggleButtonFocusOutline:2px dotted $primaryColor;
$toggleButtonFocusBgColor:$primaryLighterColor;
$toggleButtonFocusBorderColor:$primaryLighterColor;
$toggleButtonFocusTextColor:$primaryDarkestColor;
$toggleButtonFocusIconColor:$primaryColor;

//inplace
$inplacePadding:.429em;
$inplaceHoverBgColor:$primaryLighterColor;
$inplaceHoverTextColor:$primaryDarkestColor;
$inplaceTransition:background-color $transitionDuration;

//rating
$ratingTransition:color $transitionDuration;
$ratingCancelIconColor:#E57373;
$ratingCancelHoverIconColor:#E57373;
$ratingIconWidth:1.429em;
$ratingIconHeight:1.429em;
$ratingIconFontSize:1.429em;
$ratingStarIconColor:$textColor;
$ratingStarIconHoverColor:$primaryDarkerColor;
$ratingStarActiveIconColor:$primaryColor;

//slider
$sliderBgColor:#e0e0e0;
$sliderHeight:.286em;
$sliderWidth:.286em;
$sliderHandleWidth:1.429em;
$sliderHandleHeight:1.429em;
$sliderHandleBgColor:#bdbdbd;
$sliderHandleBorder:2px solid #bdbdbd;
$sliderHandleHoverBorder:2px solid $primaryLighterColor;
$sliderHandleHoverBgColor:$primaryLighterColor;
$sliderHandleFocusBorder:2px solid $primaryColor;
$sliderHandleFocusBgColor:$primaryColor;
$sliderHandleBorderRadius:50%;
$sliderHandleTransition:background-color $transitionDuration;
$sliderRangeBgColor:$primaryColor;

//calendar
$calendarWidth:18.571em;
$calendarNavIconColor:$textSecondaryColor;
$calendarNavIconHoverColor:$primaryColor;
$calendarNavIconTransition:color $transitionDuration;
$calendarTitlePadding:0 .857em;
$calendarTitleBgColor:inherit;
$calendarTitleTextColor:$textColor;
$calendarTableMargin:.857em 0 0 0;
$calendarCellPadding:.286em;
$calendarCellDatePadding:.286em;
$calendarCellDateAnchorPadding:.286em;
$calendarCellDateHoverBgColor:$primaryLighterColor;
$calendarCellDateBorderRadius:$borderRadius;
$calendarCellDateSelectedBgColor:$highlightBgColor;
$calendarCellDateSelectedTextColor:$highlightColorText;
$calendarCellDateTodayBgColor:#ffffff;
$calendarCellDateTodayTextColor:$textColor;
$calendarOverlayBorder:0 none;
$calendarTimePickerMargin:.857em 0;
$calendarTimePickerLabelPadding:0;
$calendarTimePickerInputPadding:.429em 0;
$calendarTimePickerInputMargin:0 .714em .714em 40%;

//spinner
$spinnerButtonWidth:1.429em;
$spinnerButtonBorder:0 none;
$spinnerButtonBgColor:$primaryColor;
$spinnerButtonTextColor:$primaryColorText;
$spinnerButtonHoverBorder:0 none;
$spinnerButtonHoverBgColor:$primaryDarkerColor;
$spinnerButtonHoverTextColor:$primaryColorText;
$spinnerButtonActiveBorder:0 none;
$spinnerButtonActiveBgColor:$primaryDarkestColor;
$spinnerButtonActiveTextColor:$primaryColorText;
$spinnerButtonFocusBorder:0 none;
$spinnerButtonFocusBgColor:$primaryDarkerColor;
$spinnerButtonFocusTextColor:$primaryColorText;

//keyboard
$keyboardButtonPadding:.429em;
$keyboardButtonMargin:2px;
$keyboardButtonBorder:1px solid transparent;
$keyboardButtonBgColor:#f5f5f5;
$keyboardButtonTextColor:$textColor;
$keyboardButtonHoverBorder:1px solid transparent;
$keyboardButtonHoverBgColor:$primaryLighterColor;
$keyboardButtonHoverTextColor:$textColor;
$keyboardButtonActiveBorder:1px solid $primaryColor;
$keyboardButtonActiveBgColor:$primaryColor;
$keyboardButtonActiveTextColor:#ffffff;
$keyboardSpecialButtonBorder:1px solid transparent;
$keyboardSpecialButtonBgColor:$primaryColor;
$keyboardSpecialButtonTextColor:#ffffff;
$keyboardSpecialButtonHoverBorder:1px solid transparent;
$keyboardSpecialButtonHoverBgColor:$primaryDarkerColor;
$keyboardSpecialButtonHoverTextColor:#ffffff;

//panel common
$panelHeaderBorder:$containerHeaderBorder;
$panelHeaderBgColor:$containerHeaderBgColor;
$panelHeaderTextColor:$containerHeaderTextColor;
$panelHeaderIconColor:$containerHeaderIconColor;
$panelHeaderIconHoverColor:$containerHeaderIconHoverColor;
$panelHeaderIconTransition:color $transitionDuration;
$panelHeaderFontWeight:700;
$panelHeaderPadding:.857em 1em;
$panelContentBorder:1px solid #e0e0e0;
$panelContentBgColor:#ffffff;
$panelContentTextColor:$textColor;
$panelContentPadding:.571em 1em;
$panelContentLineHeight:1.5;
$panelFooterBorder:1px solid #e0e0e0;
$panelFooterBgColor:#ffffff;
$panelFooterTextColor:$textColor;
$panelFooterPadding:.571em 1em;
$clickablePanelHeaderBorder:$clickableContainerHeaderBorder;
$clickablePanelHeaderBgColor:$clickableContainerHeaderBgColor;
$clickablePanelHeaderTextColor:$clickableContainerHeaderTextColor;
$clickablePanelHeaderIconColor:$clickableContainerHeaderIconColor;
$clickablePanelHeaderIconTransition:color $transitionDuration;
$clickablePanelHeaderFontWeight:700;
$clickablePanelHeaderPadding:.857em 1em;
$clickablePanelHeaderHoverBgColor:$clickableContainerHeaderHoverBgColor;
$clickablePanelHeaderHoverBorder:$clickableContainerHeaderHoverBorder;
$clickablePanelHeaderHoverTextColor:$clickableContainerHeaderHoverTextColor;
$clickablePanelHeaderHoverIconColor:$clickableContainerHeaderHoverIconColor;
$clickablePanelHeaderActiveBgColor:$clickableContainerHeaderActiveBgColor;
$clickablePanelHeaderActiveBorder:$clickableContainerHeaderActiveBorder;
$clickablePanelHeaderActiveTextColor:$clickableContainerHeaderActiveTextColor;
$clickablePanelHeaderActiveIconColor:$clickableContainerHeaderActiveIconColor;
$clickablePanelHeaderActiveHoverBgColor:$clickableContainerHeaderActiveHoverBgColor;
$clickablePanelHeaderActiveHoverBorder:$clickableContainerHeaderActiveHoverHoverBorder;
$clickablePanelHeaderActiveHoverTextColor:$clickableContainerHeaderActiveHoverTextColor;
$clickablePanelHeaderActiveHoverIconColor:$clickableContainerHeaderActiveHoverIconColor;
$clickablePanelHeaderTransition:background-color $transitionDuration;

//accordion
$accordionHeaderMargin:2px;

//tabview
$tabsHeaderSpacing:.214em;
$tabsNavBorder:0 none;
$tabsNavBgColor:#ffffff;

//scrollpanel
$scrollPanelHandleBgColor:#bdbdbd;
$scrollPanelTrackBorder:0 none;
$scrollPanelTrackBgColor:#e0e0e0;

//panelgrid
$panelGridContentBgColor: #ffffff;

//paginator
$paginatorBgColor:#ffffff;
$paginatorBorder:$panelContentBorder;
$paginatorIconColor:$textSecondaryColor;
$paginatorPadding:0;
$paginatorElementWidth:2.286em;
$paginatorElementHeight:2.286em;
$paginatorElementHoverBgColor:$primaryLighterColor;
$paginatorElementHoverIconColor:$primaryDarkestColor;
$paginatorElementMargin:0;
$paginatorElementBorder:0 none;
$paginatorElementBorderRadius:0;

//datatable
$datatableHeaderCellPadding:.500em 1.214em;
$datatableHeaderCellBgColor:#ffffff;
$datatableHeaderCellTextColor:$textColor;
$datatableHeaderCellFontWeight:700;
$datatableHeaderCellBorder:$panelContentBorder;
$datatableHeaderCellHoverBgColor:$primaryLighterColor;
$datatableHeaderCellHoverTextColor:$primaryDarkestColor;
$datatableBodyRowBgColor:#ffffff;
$datatableBodyRowTextColor:$textColor;
$datatableBodyRowBorder:$panelContentBorder;
$datatableBodyRowEvenBgColor:#F5F5F5;
$datatableBodyRowHoverBgColor:$primaryLighterColor;
$datatableBodyRowHoverTextColor:$primaryDarkestColor;
$datatableBodyCellPadding:.500em 1.214em;
$datatableFooterCellPadding:.500em 1.214em;
$datatableFooterCellBgColor:#ffffff;
$datatableFooterCellTextColor:$textColor;
$datatableFooterCellFontWeight:500;
$datatableFooterCellBorder:$panelContentBorder;
$datatableResizerHelperBgColor:$primaryColor;
$datatableDataIconColor:$textSecondaryColor;

//schedule
$scheduleEventBgColor:$primaryColor;
$scheduleEventBorder:1px solid $primaryDarkerColor;
$scheduleEventTextColor:$primaryColorText;

//tree
$treeNodePadding:.143em 0;
$treeNodeLabelPadding:.286em;

//treetable
$treeTableEditingCellPaddingLeft:1.214em;

//messages
$messagesMargin:1em 0;
$messagesPadding:1em;
$messagesIconFontSize:1.714em;
$infoMessageBgColor:#64B5F6;
$infoMessageBorder:1px solid #64B5F6;
$infoMessageTextColor:#000000;
$infoMessageIconColor:#000000;
$warnMessageBgColor:#FFD54F;
$warnMessageBorder:1px solid #FFD54F;
$warnMessageTextColor:#000000;
$warnMessageIconColor:#000000;
$errorMessageBgColor:#EF5350;
$errorMessageBorder:1px solid #EF5350;
$errorMessageTextColor:#ffffff;
$errorMessageIconColor:#ffffff;
$fatalMessageBgColor:#757575;
$fatalMessageBorder:1px solid #757575;
$fatalMessageTextColor:#ffffff;
$fatalMessageIconColor:#ffffff;
$growlIconFontSize:3.429em;
$growlMargin:0 0 1em 0;
$growlPadding:1em;
$growlShadow:0 3px .429em 0 rgba(0, 0, 0, 0.16);
$messagePadding:$inputPadding;
$messageMargin:0;

//overlays
$overlayContentBorder:$panelContentBorder;
$overlayContainerShadow:0 3px 6px 0 rgba(0, 0, 0, 0.16);

//overlay panel
$overlayPanelCloseIconBgColor:$primaryDarkerColor;
$overlayPanelCloseIconColor:$primaryColorText;
$overlayPanelCloseIconHoverBgColor:$primaryDarkestColor;
$overlayPanelCloseIconHoverColor:$primaryColorText;

//tooltip
$tooltipBgColor:#212121;
$tooltipTextColor:#ffffff;

//steps
$stepsItemBgColor:#ffffff;
$stepsItemBorder:1px solid #e0e0e0;
$stepsItemBorderRadius:$borderRadius;
$stepsItemNumberColor:$textColor;
$stepsItemTextColor:$textSecondaryColor;
$stepsItemWidth:2em;
$stepsItemHeight:2em;

//progressbar
$progressBarHeight:1.714em;
$progressBarBorder:0 none;
$progressBarBgColor:#e0e0e0;
$progressBarValueBgColor:$primaryColor;

//menu
$menuitemSubMenuPadding:0;
$menuBgColor:$panelContentBgColor;
$menuBorder:$panelContentBorder;
$menuPadding:0;
$menuTextColor:$textColor;
$menuitemPadding:.571em .857em;
$menuitemTextColor:$textColor;
$menuitemIconColor:$textColor;
$menuitemHoverTextColor:$primaryDarkestColor;
$menuitemHoverIconColor:$primaryDarkestColor;
$menuitemHoverBgColor:$primaryLighterColor;
$toggleableMenuHeaderMargin:1px;
$overlayMenuBorder:1px solid #e0e0e0;
$overlayMenuShadow:0 3px 6px 0 rgba(0, 0, 0, 0.16);

//upload
$fileItemPadding:0.429em 0.857em;

//misc
$maskBgColor:rgba(139, 139, 144, 0.72);
$inlineSpacing:.429em;
$chipsItemMargin:0 .286em 0 0;
$dataIconColor:$textSecondaryColor;
$dataIconHoverColor:$textColor;

//general
$disabledOpacity:.5;

@import '../overrides/_theme_variables';  

Layout Theme

There are 24 layout colors in total with light and dark alternatives. The primary colors Configuring a layout color is easy as adding the css file to the template.xhtml where the choice can be left to the user with an EL expression.

<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="pandora-layout" />

Full list of available layout themes are.

• layout-blue
• layout-cyan
• layout-green
• layout-indigo
• layout-magenta
• layout-orange
• layout-purple
• layout-purpledark
• layout-purplelight
• layout-red
• layout-tealdark
• layout-teallight
• layout-yellow

Creating a custom layout with the color scheme of your choice is similar to creating a custom theme.

• Choose a layout name such as layout-myown.
• Create an empty file named layout-myown.scss inside resources/pandora-layout/css folder.
• Copy the sass folder from the distribution to webapp/resources.
• Define the variables listed below and import the /sass/layout/_layout.scss file.
• Build the scss to generate css
• Serve the css by importing it using a link tag or h:outputStylesheet.

Here are the variables required to create a layout.

$primaryColor:#2E88FF;
$primaryTextColor:#191a1c;

@import '../../sass/layout/_layout';

Menu

Menu is a regular JSF component that supports PrimeFaces MenuModel API, allowing both declarative and programmatic approaches.

xmlns:po="http://primefaces.org/pandora"

<po:menu>
</po:menu>

Menu has 5 types. Layout wrapper element in template.xhtml is used to define which mode to use by adding specific classes. Default is static and here is the list of classes for each mode.

• Static: "layout-static"
• Overlay: "layout-overlay"
• Horizontal: "layout-horizontal"
• Slim: "layout-slim"
• SlimPlus: "layout-slim-plus"

Example layout below always uses the horizontal mode.

<div class="layout-wrapper layout-horizontal">
...
</div>

Layout mode can be dynamic using an EL expression as well using an example bean like guestPreferences so that your users can choose the layout they prefer when using your application.

<div class="layout-wrapper #{guestPreferences.menuMode}">
...
</div>

Menu Themes

Menu theme is defined at the main container element, template below uses the default light menus. Full list of menu themes are the following, note that layout-menu- prefix needs to be added to apply the style such as layout-menu-dark.

<div class="layout-wrapper layout-menu-dark">
...
</div>

Light and Dark menus utilize the primary color of the chosen layout whereas custom menu themes listed below define their own style. Apply the following style classes for a custom menu theme.

• layout-menu-blue
• layout-menu-bluedark
• layout-menu-cyan
• layout-menu-green
• layout-menu-indigo
• layout-menu-magenta
• layout-menu-orange
• layout-menu-purple
• layout-menu-purpledark
• layout-menu-purplelight
• layout-menu-red
• layout-menu-tealdark
• layout-menu-teallight
• layout-menu-yellow

<div class="layout-wrapper layout-menu-blue">
...
</div>

Creating a custom menu theme with the color scheme of your choice required the following steps.

• Choose a menu theme such as myown.
• Create an empty file named myown.scss inside resources/sass/layout/menu/themes/ folder.
• Define the variables listed below and import the /sass/layout/_layout.scss file.
• Import _menu_theme.scss file.
• Import your file at resources/sass/layout/menu/_menu file.
.

Here are the variables required to create a layout.

.layout-menu-blue {
    $menuBgColor:#0F53AD;
    $menuBgGradient: linear-gradient(300deg, #2E88FF 0%,#0F53AD 100%);
    $rootMenuItemTextColor:rgba(255,255,255,0.8);
    $rootMenuTextColor:rgba(255,255,255,0.6);
    $rootMenuItemHoverBgColor:rgba(0,0,0,0.25);
    $activeRootMenuItemTextColor:white;

    $submenuItemTextColor:rgba(255,255,255,0.8);
    $submenuItemHoverBgColor:rgba(0,0,0,0.25);
    $activeSubmenuItemTextColor:white;

    $externalSubmenuBgColor:white;
    $externalSubmenuItemTextColor:#323537;
    $externalSubmenuItemHoverBgColor:#D8DADC;
    $externalActiveSubmenuItemTextColor:#0F53AD;

    $slimActiveRootMenuItemBgColor:white;
    $slimActiveRootMenuItemTextColor:#0F53AD;
    
    @import '../_menu_theme';
}   

Grouped and Ungrouped Menu

Root menuitems of the menu are displayed as readonly and expanded by default which are called grouped submenus. In case you need to make them expandable, wrap the menu structure within a submenu. See groupedMenu.xhtml and ungroupedMenu.xhtml for example.

Icons

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

<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

Card

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. If the card has a title defined with h1 tag, add card-w-title to adjust paddings.

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

<div class="card card-w-title">
    <h1>Card with Title<h1>
    Content here
</div>

PrimeFlex Grid System

Pandora uses PrimeFlex Grid System throughout the samples, although any Grid library can be used we suggest using PrimeFlex as your grid system as it is well tested and supported by PrimeFaces. PrimeFlex is included within the Pandora distribution.

Tips

• Familiarity with SASS is required to make customizations to the layout and theme.
• Demo application war and the maven project tag are included in distribution however you don't necessarily need them to install pandora, the actual artifacts required are the layout zip file and the theme jar.

Migration Guide

For seamless updates use the /sass/_layout_styles.scss for overriding the layout styles and /sass/_theme_styles.scss for customizing the theme styles instead of changing the scss files under layout and theme files to avoid maintenance issues. Updates usually require updating the layout and theme folders so your changes won't get effected during updates since they are kept in external files.