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/ --sourcemap=none
mvn jetty:run

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

Layout

Olympia utilizes JSF templating APIs and provides a main template.xhtml along with additional topbar, sidebar, rightpanel 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 olympia.

<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">Test Page</ui:define>

    <ui:define name="content">
        Content goes here
    </ui:define>

</ui:composition>

Other required assets are the css, javascript and images that are located inside resources/olympia-layout folder, simply copy the olympia-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/olympia-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 olympia 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/layout-#{guestPreferences.theme}.css" library="olympia-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 menuMode = "layout-static";

    private String theme = "green-yellow";

    private String menuColor = "layout-menu-light";

    private String topBarColor = "layout-topbar-light";

    private String logo = "logo-olympia";

    public String getTheme() {		
        return theme;
    }
    
    public void setTheme(String theme) {
        this.theme = theme;
    }

    public String getMenuMode() {
        return this.menuMode;
    }

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

    public void setMenuColor(String menuColor) {
        this.menuColor = menuColor;
    } 

    public String getTopBarColor() {
        return this.topBarColor;
    }

    public void setTopBarColor(String topBarColor, String logo) {
        this.topBarColor = topBarColor;
        this.logo = logo;
    }

    public String getLogo() {
        return this.logo;
    }
}

Theme

Olympia provides 10 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 "primefaces-olympia-amber". Full list of available themes are;

olympia-amber-teal
olympia-blue-orange
olympia-bluegrey-teal
olympia-brown-cyan
olympia-cyan-amber
olympia-deeporange-blue
olympia-green-yellow
olympia-indigo-yellow
olympia-lime-purple
olympia-purple-blue

A custom theme can be developed by the following steps.

Create a custom theme folder such as primefaces-olympia-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 olympia-myown
Either bundle the css in a jar file for reuse between different projects or serve from webapp/resources/primefaces-olympia-myown folder using a h:outputStyleSheet.

Here are the variables required to create a theme.

//shades
$primaryColor100:#e3f8f3;
$primaryColor200:#d8efe9;
$primaryColor300:#c0e2d9;
$primaryColor400:#6eceb7;
$primaryColor500:#61b5a1;
$primaryColor600:#23594c;

//main color
$primaryColor:$primaryColor500;

//highlight
$highlightBgColor:#feedbc;
$highlightBgColorDark:#ffde7a;
$highlightColorText:#666666;

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

An example sass command to compile the css would be;

sass src/main/webapp/resources/primefaces-olympia-myown/theme.scss src/main/webapp/resources/primefaces-olympia-myown/theme.css  --sourcemap=none

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 -w src/main/webapp/resources/ --sourcemap=none

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/olympia-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:#F6F0DB;
$primaryTextColor:#AA8415;

@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:'Lato',sans-serif;
$fontSize:14px;
$textColor:#666666;
$textSecondaryColor:#a6a6a6;
$borderRadius:2px;
$transitionDuration:.2s;

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

@import '../_variables';

//main
$bodyBgColor:#f4f4f4;

$footerBgColor:#ffffff;
$footerBorderColor:#dadada;

//light menu
$menuBgColor:#ffffff;
$menuitemTextColor:#666666;
$menuitemIconColor:#a6a6a6;
$menuitemHoverBgColor:#eaeaea;
$menuitemIconHoverColor:#666666;
$rootMenuitemActiveBgColor:$primaryColor;
$rootMenuitemActiveIconColor:$primaryTextColor;
$rootMenuitemActiveTextColor:$primaryTextColor;
$submenuItemActiveColor:$primaryTextColor;
$submenuitemBgColor:#f8f8f8;

//dark menu
$darkMenuBgColor:#333333;
$darkMenuitemTextColor:#c8c8c8;
$darkMenuitemIconColor:#a6a6a6;
$darkMenuitemHoverBgColor:#474747;
$darkMenuitemIconHoverColor:#dadada;
$darkRootMenuitemActiveBgColor:$primaryColor;
$darkRootMenuitemActiveIconColor:$primaryTextColor;
$darkRootMenuitemActiveTextColor:$primaryTextColor;
$darkSubmenuItemActiveColor:$primaryTextColor;
$darkSubmenuitemBgColor:#282828;

$slimMenuTooltipBgColor:#333333;
$slimMenuTooltipTextColor:#c8c8c8;

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

@import './variables';

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

//anchors
$linkColor:$primaryColor400;
$linkHoverColor:$primaryColor500;
$linkActiveColor:$primaryColor600;

//input field
$inputPadding:.429em;
$inputBgColor:#f4f4f4;
$inputBorder:1px solid #dadada;
$inputHoverBorderColor:#a6a6a6;
$inputFocusBorderColor:$primaryColor500;
$inputErrorBorderColor:#e7a3a3;
$inputPlaceholderTextColor:#a6a6a6;
$inputFocusShadow:0 0 4px 0 #d8efe9;
$inputTransition:border-color $transitionDuration,box-shadow $transitionDuration;

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

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

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

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

$inputListHeaderSearchIconColor:$textSecondaryColor;
$inputListHeaderCloseIconColor:$textColor;
$inputListHeaderCloseIconHoverColor:$primaryColor500;
$inputListHeaderCloseIconTransition:color $transitionDuration;

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

//inputs with overlays
$inputOverlayBorder:0 none;
$inputOverlayShadow:0 0 6px 0 rgba(0, 0, 0, 0.16);

//input dropdowns
$inputDropdownIconColor:$textColor;

//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:$primaryColor100;
$buttonBorder:1px solid $primaryColor200;
$buttonTextColor:$primaryColor600;

$buttonHoverBgColor:$primaryColor200;
$buttonHoverBorderColor:$primaryColor300;
$buttonHoverTextColor:$primaryColor600;

$buttonActiveBgColor:$primaryColor500;
$buttonActiveTextColor:#ffffff;
$buttonActiveBorderColor:$primaryColor300;

$buttonFocusOutline:0 none;
$buttonFocusOutlineOffset:0;
$buttonFocusShadow:none;
$buttonFocusBorderColor:$primaryColor500;;
$buttonTransition:background-color $transitionDuration;
$raisedButtonShadow:0 2px 4px 0 rgba(0, 0, 0, 0.10);
$roundedButtonBorderRadius:1em;

//button severities
$secondaryButtonBgColor:#f3f3f3;
$secondaryButtonBorder:1px solid #f3f3f3;
$secondaryButtonTextColor:#333333;
$secondaryButtonHoverBgColor:#d1d1d1;
$secondaryButtonHoverTextColor:#212121;
$secondaryButtonHoverBorderColor:#d1d1d1;
$secondaryButtonActiveBgColor:$primaryColor;
$secondaryButtonActiveTextColor:#ffffff;
$secondaryButtonActiveBorderColor:$primaryColor;
$secondaryButtonFocusBorderColor:#77CFBA;

$helpButtonBgColor:#A8ECEE;
$helpButtonTextColor:#282E2E;
$helpButtonBorder:1px solid #6BDCE0;
$helpButtonHoverBgColor:#90DEE0;
$helpButtonHoverTextColor:#282E2E;
$helpButtonHoverBorderColor:#5CD1D5;
$helpButtonActiveBgColor:#2BBCC1;
$helpButtonActiveTextColor:#ffffff;
$helpButtonActiveBorderColor:#1A9599;
$helpButtonFocusBorderColor:#2BBCC1;

$warningButtonBgColor:#FEEDBC;
$warningButtonTextColor:#333333;
$warningButtonBorder:1px solid #F7DB8A;
$warningButtonHoverBgColor:#FFDE87;
$warningButtonHoverTextColor:#333333;
$warningButtonHoverBorderColor:#F3CE61;
$warningButtonActiveBgColor:#FDC328;
$warningButtonActiveTextColor:#333333;
$warningButtonActiveBorderColor:#DEA818;
$warningButtonFocusBorderColor:#FDC328;

$successButtonBgColor:#A3E2C6;
$successButtonTextColor:#323E39;
$successButtonBorder:1px solid #80CAAA;
$successButtonHoverBgColor:#80CAAA;
$successButtonHoverTextColor:#323E39;
$successButtonHoverBorderColor:#5EA285;
$successButtonActiveBgColor:#31B57C;
$successButtonActiveTextColor:#ffffff;
$successButtonActiveBorderColor:#5EA285;
$successButtonFocusBorderColor:#31B57C;

$infoButtonBgColor:#A3DEF8;
$infoButtonTextColor:#3D4447;
$infoButtonBorder:1px solid #79C8EB;
$infoButtonHoverBgColor:#81CBEC;
$infoButtonHoverTextColor:#3D4447;
$infoButtonHoverBorderColor:#60B7DE;
$infoButtonActiveBgColor:#3ea9db;
$infoButtonActiveTextColor:#ffffff;
$infoButtonActiveBorderColor:#2987B1;
$infoButtonFocusBorderColor:#3ea9db;

$dangerButtonBgColor:#F4B6B6;
$dangerButtonTextColor:#262222;
$dangerButtonBorder:1px solid #E38787;
$dangerButtonHoverBgColor:#EF9999;
$dangerButtonHoverTextColor:#262222;
$dangerButtonHoverBorderColor:#CB5858;
$dangerButtonActiveBgColor:#EB5656;
$dangerButtonActiveTextColor:#ffffff;
$dangerButtonActiveBorderColor:#B73737;
$dangerButtonFocusBorderColor:#EB5656;

//checkbox
$checkboxWidth:20px;
$checkboxHeight:20px;
$checkboxActiveBorderColor:$primaryColor;
$checkboxActiveBgColor:$primaryColor;
$checkboxActiveHoverBgColor:$primaryColor400;
$checkboxActiveTextColor:#ffffff;
$checkboxFocusBgColor:$inputBgColor;
$checkboxFocusTextColor:$textSecondaryColor;
$checkboxFocusBorderColor:$primaryColor500;
$checkboxFocusShadow:none;
$checkboxTransition:background-color $transitionDuration, border-color $transitionDuration;

//radiobutton
$radioButtonWidth:20px;
$radioButtonHeight:20px;
$radioButtonActiveBorderColor:$primaryColor500;
$radioButtonActiveBgColor:$primaryColor500;
$radioButtonActiveHoverBgColor:$primaryColor400;
$radioButtonActiveTextColor:#ffffff;
$radioButtonFocusBgColor:$inputBgColor;
$radioButtonFocusTextColor:$textSecondaryColor;
$radioButtonFocusBorderColor:$primaryColor500;
$radioButtonFocusShadow:none;
$radioButtonTransition:background-color $transitionDuration, border-color $transitionDuration;

//togglebutton
$toggleButtonBgColor:#eaeaea;
$toggleButtonBorder:1px solid #eaeaea;
$toggleButtonTextColor:#333333;
$toggleButtonIconColor:#666666;
$toggleButtonHoverBgColor:#c8c8c8;
$toggleButtonHoverBorderColor:#c8c8c8;
$toggleButtonHoverTextColor:#333333;
$toggleButtonHoverIconColor:#666666;
$toggleButtonActiveBgColor:$highlightBgColor;
$toggleButtonActiveBorderColor:$highlightBgColor;
$toggleButtonActiveTextColor:$highlightColorText;
$toggleButtonActiveIconColor:$highlightColorText;
$toggleButtonActiveHoverBgColor:$highlightBgColorDark;
$toggleButtonActiveHoverBorderColor:$highlightBgColorDark;
$toggleButtonActiveHoverTextColor:$highlightColorText;
$toggleButtonActiveHoverIconColor:$highlightColorText;
$toggleButtonFocusOutline:0 none;
$toggleButtonFocusBgColor:#eaeaea;
$toggleButtonFocusBorderColor:$inputFocusBorderColor;;
$toggleButtonFocusTextColor:#333333;
$toggleButtonFocusIconColor:#666666;

//inplace
$inplacePadding:.429em;
$inplaceHoverBgColor:#f4f4f4;
$inplaceHoverTextColor:$textColor;
$inplaceTransition:background-color $transitionDuration;

//rating
$ratingTransition:color $transitionDuration;
$ratingCancelIconColor:#f3b9b9;
$ratingCancelHoverIconColor:#d66161;
$ratingIconWidth:1.429em;
$ratingIconHeight:1.429em;
$ratingIconFontSize:1.429em;
$ratingStarIconColor:$textColor;
$ratingStarIconHoverColor:$primaryColor600;
$ratingStarActiveIconColor:$primaryColor500;

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

//calendar
$calendarWidth:18.571em;
$calendarNavIconColor:$textSecondaryColor;
$calendarNavIconHoverColor:$textColor;
$calendarNavIconTransition:color $transitionDuration;
$calendarTitlePadding:0 .857em;
$calendarTitleBgColor:inherit;
$calendarTitleTextColor:$textColor;
$calendarTableMargin:.857em 0 0 0;
$calendarCellPadding:.286em;
$calendarCellDatePadding:.286em;
$calendarCellDateAnchorPadding:.286em;
$calendarCellDateBorder:1px solid transparent;
$calendarCellDateHoverBgColor:#f4f4f4;
$calendarCellDateHoverBorder:1px solid #a6a6a6;
$calendarCellDateBorderRadius:$borderRadius;
$calendarCellDateSelectedBgColor:$primaryColor;
$calendarCellDateSelectedTextColor:#ffffff;
$calendarCellDateSelectedBorder:1px solid $primaryColor300;
$calendarCellDateTodayBgColor:$primaryColor100;
$calendarCellDateTodayTextColor:$primaryColor600;
$calendarCellDateTodayBorder:1px solid $primaryColor200;
$calendarOverlayBorder:0 none;
$calendarTimePickerMargin:.857em 0;
$calendarTimePickerLabelPadding:0;
$calendarTimePickerInputPadding:.429em 0;
$calendarTimePickerInputMargin:0 .714em .714em 40%;

//spinner
$spinnerButtonWidth:1.429em;
$spinnerButtonBorder:$buttonBorder;
$spinnerButtonBgColor:$buttonBgColor;
$spinnerButtonTextColor:$buttonTextColor;
$spinnerButtonHoverBorder:0 none;
$spinnerButtonHoverBgColor:$buttonHoverBgColor;
$spinnerButtonHoverTextColor:$buttonHoverTextColor;
$spinnerButtonActiveBorder:0 none;
$spinnerButtonActiveBgColor:$buttonActiveBgColor;
$spinnerButtonActiveTextColor:$buttonActiveTextColor;
$spinnerButtonFocusBorder:0 none;
$spinnerButtonFocusBgColor:$buttonHoverBgColor;
$spinnerButtonFocusTextColor:$buttonHoverTextColor;

//keyboard
$keyboardButtonPadding:.429em;
$keyboardButtonMargin:2px;
$keyboardButtonBorder:$inputBorder;
$keyboardButtonBgColor:$inputBgColor;
$keyboardButtonTextColor:$textColor;
$keyboardButtonHoverBorder:1px solid $inputHoverBorderColor;
$keyboardButtonHoverBgColor:$inputBgColor;
$keyboardButtonHoverTextColor:$textColor;
$keyboardButtonActiveBorder:1px solid $buttonActiveBorderColor;
$keyboardButtonActiveBgColor:$buttonActiveBgColor;
$keyboardButtonActiveTextColor:#ffffff;
$keyboardSpecialButtonBorder:$buttonBorder;
$keyboardSpecialButtonBgColor:$buttonBgColor;
$keyboardSpecialButtonTextColor:$buttonTextColor;
$keyboardSpecialButtonHoverBorder:1px solid $buttonHoverBorderColor;
$keyboardSpecialButtonHoverBgColor:$buttonHoverBgColor;
$keyboardSpecialButtonHoverTextColor:$buttonHoverTextColor;

//chips
$chipBgColor:$highlightBgColor;
$chipTextColor:$highlightColorText;
$chipBorder:1px solid $highlightBgColorDark;
$chipItemMargin:0 .286em 0 0;

//panel common
$panelHeaderBorder:1px solid $primaryColor200;
$panelHeaderBgColor:$primaryColor100;
$panelHeaderTextColor:$primaryColor600;
$panelHeaderIconColor:$textColor;
$panelHeaderIconHoverColor:$primaryColor500;
$panelHeaderIconTransition:color $transitionDuration;
$panelHeaderFontWeight:400;
$panelHeaderPadding:.857em 1em;
$panelContentBorder:1px solid #dadada;
$panelContentBgColor:#ffffff;
$panelContentTextColor:$textColor;
$panelContentPadding:.571em 1em;
$panelContentLineHeight:1.5;
$panelFooterBorder:1px solid #dadada;
$panelFooterBgColor:#ffffff;
$panelFooterTextColor:$textColor;
$panelFooterPadding:.571em 1em;
$panelHeaderHoverBgColor:#f4f4f4;
$panelHeaderHoverBorder:1px solid #c8c8c8;
$panelHeaderHoverTextColor:$textColor;
$panelHeaderHoverIconColor:$textColor;
$panelHeaderActiveBgColor:$highlightBgColor;
$panelHeaderActiveBorder:1px solid #dadada;
$panelHeaderActiveTextColor:$highlightColorText;
$panelHeaderActiveIconColor:$highlightColorText;
$panelHeaderActiveHoverBgColor:$highlightBgColorDark;
$panelHeaderActiveHoverBorder:1px solid $highlightBgColorDark;
$panelHeaderActiveHoverTextColor:$highlightColorText;
$panelHeaderActiveHoverIconColor:$highlightColorText;
$panelHeaderTransition:background-color $transitionDuration;

//accordion
$accordionHeaderMargin:2px;

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

//scrollpanel
$scrollPanelHandleBgColor:#dadada;
$scrollPanelTrackBorder:0 none;
$scrollPanelTrackBgColor:#f8f8f8;

//paginator
$paginatorBgColor:#ffffff;
$paginatorBorder:1px solid #ebebeb;
$paginatorIconColor:$textColor;
$paginatorPadding:.25em 0;
$paginatorElementWidth:2.286em;
$paginatorElementHeight:2.286em;
$paginatorElementHoverBgColor:#f4f4f4;
$paginatorElementHoverIconColor:$textColor;
$paginatorElementMargin:0 .125em;
$paginatorElementBorder:1px solid transparent;
$paginatorElementHoverBorder:1px solid #a6a6a6;
$paginatorElementBorderRadius:$borderRadius;

//datatable
$datatableHeaderCellPadding:.500em 1.214em;
$datatableHeaderCellBgColor:#ffffff;
$datatableHeaderCellTextColor:$textColor;
$datatableHeaderCellFontWeight:700;
$datatableHeaderCellBorder:1px solid #ebebeb;
$datatableHeaderCellHoverBgColor:#eaeaea;
$datatableHeaderCellHoverTextColor:$textColor;
$datatableBodyRowBgColor:#ffffff;
$datatableBodyRowTextColor:$textColor;
$datatableBodyRowBorder:1px solid #ebebeb;
$datatableBodyRowEvenBgColor:#f8f8f8;
$datatableBodyRowHoverBgColor:#eaeaea;
$datatableBodyRowHoverTextColor:#333333;
$datatableBodyCellPadding:.500em 1.214em;
$datatableFooterCellPadding:.500em 1.214em;
$datatableFooterCellBgColor:#ffffff;
$datatableFooterCellTextColor:$textColor;
$datatableFooterCellFontWeight:500;
$datatableFooterCellBorder:1px solid #ebebeb;
$datatableResizerHelperBgColor:$primaryColor;
$datatableDataIconColor:$textSecondaryColor;

//schedule
$scheduleEventBgColor:$highlightBgColor;
$scheduleEventBorder:1px solid $highlightBgColorDark;
$scheduleEventTextColor:$highlightColorText;

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

//treetable
$treeTableEditingCellPaddingLeft:1.214em;;

//messages
$messagesMargin:1em 0;
$messagesPadding:1em;
$messagesIconFontSize:1.714em;
$infoMessageBgColor:#93decc;
$infoMessageBorder:1px solid #93decc;
$infoMessageTextColor:#212121;
$infoMessageIconColor:#212121;
$warnMessageBgColor:#ffe277;
$warnMessageBorder:1px solid #ffe277;
$warnMessageTextColor:#212121;
$warnMessageIconColor:#212121;
$errorMessageBgColor:#ff8b8b;
$errorMessageBorder:1px solid #ff8b8b;
$errorMessageTextColor:#212121;
$errorMessageIconColor:#212121;
$fatalMessageBgColor:#c8c8c8;
$fatalMessageBorder:1px solid #c8c8c8;
$fatalMessageTextColor:#212121;
$fatalMessageIconColor:#212121;
$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:1px solid #f1f1f1;
$overlayContainerShadow:0 0 6px 0 rgba(0, 0, 0, 0.16);

//overlay panel
$overlayPanelCloseIconBgColor:$primaryColor200;
$overlayPanelCloseIconColor:$primaryColor600;
$overlayPanelCloseIconHoverBgColor:$primaryColor300;
$overlayPanelCloseIconHoverColor:$primaryColor600;

//tooltip
$tooltipBgColor:$highlightBgColor;
$tooltipTextColor:$highlightColorText;

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

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

//menu
$menuitemSubMenuPadding:0;
$menuBgColor:#ffffff;
$menuBorder:1px solid #c8c8c8;
$menuPadding:0;
$menuTextColor:$textColor;
$menuitemPadding:.571em .857em;
$menuitemTextColor:$textColor;
$menuitemIconColor:$textColor;
$menuitemHoverTextColor:$textColor;
$menuitemHoverIconColor:$textColor;
$menuitemHoverBgColor:#eaeaea;
$toggleableMenuHeaderMargin:1px;
$overlayMenuBorder:0 none;
$overlayMenuShadow:0 0 6px 0 rgba(0, 0, 0, 0.16);

//upload
$fileItemPadding:0.429em 0.857em;

//misc
$maskBgColor:rgba(0, 0, 0, 0.4);
$inlineSpacing:.429em;
$dataIconColor:$textSecondaryColor;
$dataIconHoverColor:$textColor;

//general
$disabledOpacity:.5;

In addition to layout options, menu can be styled as "light" or "dark", default mode is light and in order to enable dark mode, add "layout-menu-dark" to the "layout-wrapper" div which is the outmost container of the template. Similarly as the layout mode, using a helper bean like GuestPreferences, the choice can be left to the user as in the demo.

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

TopBar Colors

Olympia provides 10 built-in color alternatives for the topbar, default is the light mode where adding a style class to the "layout-wrapper" element such as "layout-topbar-dark" enables the dark option.

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

The full list of alternative are;

layout-topbar-light
layout-topbar-dark
layout-topbar-bluegrey
layout-topbar-purple
layout-topbar-cyan
layout-topbar-pink
layout-topbar-teal
layout-topbar-yellow
layout-topbar-lime
layout-topbar-green

Icons

Olympia 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>

Grid CSS

Olympia uses new PrimeFaces Grid CSS (ui-g-*) throughout the samples however you may also use other Grid Utilities as well including the standard CSS Grid.

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 olympia, 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 them 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.

2.0.0 to 2.0.1

Update layout.js and layout css files
Replace theme jar with new jar

1.0.1 to 2.0.0

Update OlympiaMenu*.java file
Replace theme jar with new jar

1.0.0 to 1.0.1

Update layout.js, layout css and OlympiaMenu*.java files
Replace theme jar with new jar