7.0.0 running on PrimeFaces 13.0.0
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 clean jetty:run
Navigate to http://localhost:8080/ultima to view the demos which is exactly same as the live version.
Ultima provides a main template.xhtml and additional topbar, menu and footer fragments for the base layout. These xhtml files must be placed under WEB-INF/layout 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.
Other required resources are the css, js and images that are located inside resources/layout folder, simply copy the layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/layout/. Please refer to demo app or maven project of the demo app as the reference.
rem units are utilized for scalability so in order to change the size of the overall UI, configure the font-size at the html root. Refer to the SASS Variables section for more information.
html {
font-size: $fontSize;
}
Ultima provides 34 PrimeFaces themes out of the box, setup of a theme simple as defining primefaces.THEME context parameter in web.xml such as "ultima-indigo". Full list of available themes are;
A custom theme can be developed by the following steps.
Here are the variables required to create a theme, you may need to change the last line according to the relative path of the sass folder in your application.
$primaryColor:#FFB300;
$primaryLightestColor: #FFF8E1;
$primaryDarkColor: #FF6F00;
$primaryTextColor:#212121;
$accentColor:#0745ff;
$accentTextColor:#ffffff;
@import '../layout/styles/theme/theme-light/_theme';
An example sass command to compile the css would be;
sass src/main/webapp/resources/primefaces-ultima-myown/theme.scss:src/main/webapp/resources/primefaces-ultima-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
Same can also be applied to layout itself;
Here are the variables required to create a layout, you may need to change the last line according to the relative path of the sass folder in your application.
//general
$fontSize:14px !default;
$fontFamily: 'Roboto' !default;
$borderRadius:5px !default;
$animationDuration:.2s !default;
$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;
$letterSpacing:normal !default;
$transitionDuration:.2s !default;
$mobileBreakpoint:991px !default;
:root {
--transition-duration:;
--layout-mobile-breakpoint:;
}
@use 'sass:math';
@import './styles/_mixins';
@import './styles/_typography';
@import './styles/_loader';
@import './styles/_animation';
@import './styles/_utils';
@import './styles/_rtl';
@import './styles/topbar/_topbar';
@import './styles/_rightmenu';
@import './styles/menu/_menu';
@import './styles/_megamenu';
@import './styles/_main';
@import './styles/_footer';
@import './styles/_config';
@import './styles/_breadcrumb';
_variables.scss under styles/layout/layout-light define the shared variables of the layout.
$bodyBgColor:#f7f7f7 !default;
$textColor:#212121 !default;
$textSecondaryColor:#616161 !default;
$contentBgColor:#ffffff !default;
$contentAltBgColor:#ECEFF1 !default;
$overlayContentBgColor:#ffffff !default;
$dividerColor:#E4E4E4 !default;
$hoverBgColor:rgba(0,0,0,.04);
$solidSurfaceTextColor: #ffffff !default;
$menuShadow: 2px 0 4px -1px rgba(0, 0, 0, 0.2), 4px 0 5px 0 rgba(0, 0, 0, 0.14), 1px 0 10px 0 rgba(0, 0, 0, 0.12);
$submenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
$menuTooltipBgColor:#1c202c !default;
$menuTooltipTextColor:#ffffff !default;
$pink: #E91E63 !default;
$indigo: #3F51B5 !default;
$yellow: #FFC107 !default;
$orange: #FF9800 !default;
$teal: #009688 !default;
$cyan: #00ACC1 !default;
$bluegrey: #546E7A !default;
$purple: #9C27B0 !default;
$deeppurple: #673AB7 !default;
$blue: #2196F3 !default;
$lightblue: #03A9F4 !default;
$green: #4CAF50 !default;
$lightgreen: #8BC34A !default;
$lime: #CDDC39 !default;
$deeporange: #FF5722 !default;
$brown: #795548 !default;
:root {
--body-bgcolor:;
--text-color:;
--text-secondary-color:;
--divider-color:;
--content-bgcolor:;
--content-alt-bgcolor:;
--hover-bgcolor:;
--pink:;
--indigo:;
--yellow:;
--orange:;
--teal:;
--cyan:;
--bluegrey:;
--purple:;
--deeppurple:;
--blue:;
--lightblue:;
--green:;
--lightgreen:;
--lime:;
--deeporange:;
--brown:;
--layout-mode: light;
}
@import '../layout-common/_variables';
Similarly styles/layout/theme/theme-light/_variables.scss files contains the shared variables of the PrimeFaces theme.
$colors: (
"blue": #2196F3,
"green": #689F38,
"yellow": #FBC02D,
"cyan": #00BCD4,
"pink": #E91E63,
"indigo": #4E5FBB,
"teal": #009688,
"orange": #FF9800,
"bluegray": #607D8B,
"purple": #9C27B0,
"red": #F44336,
"primary": $primaryColor
) !default;
$emphasis-high: rgba(0, 0, 0, .87);
$emphasis-medium: rgba(0, 0, 0, .60);
$emphasis-low: rgba(0, 0, 0, .38);
$emphasis-lower: rgba(0, 0, 0, .12);
$overlayColor: #000000;
//global
$fontFamily: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
$fontSize: 1rem;
$textColor: $emphasis-high;
$textSecondaryColor: $emphasis-medium;
$borderRadius: 4px;
$transitionDuration: .2s;
$transition: background-color $transitionDuration, border-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1) !default;
$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, opacity $transitionDuration ease-in-out !default;
$listItemTransition:none !default;
$animationDuration: .4s;
$animationTimingFunction: cubic-bezier(.05, .74, .2, .99);
$letterSpacing: normal;
$tabletBreakpoint: 991px;
$phoneBreakpoint: 576px;
$iconSize: 1rem;
$divider: 1px solid rgba(0, 0, 0, .12);
$inlineSpacing: .5rem;
$disabledOpacity: .38;
$maskBg: rgba(0, 0, 0, 0.32);
$errorColor: #B00020;
//selected state
$highlightBg: rgba($primaryColor, .12);
$highlightTextColor: $primaryColor;
//focus
$focusOutlineColor: transparent;
$focusOutline: 0 none;
$focusOutlineOffset: 0;
$focusShadow: none;
//action icons
$actionIconWidth: 2.5rem;
$actionIconHeight: 2.5rem;
$actionIconBg: transparent;
$actionIconBorder: 0 none;
$actionIconColor: $textSecondaryColor;
$actionIconHoverBg: rgba(0, 0, 0, .04);
$actionIconHoverBorderColor: transparent;
$actionIconHoverColor: $textSecondaryColor;
$actionIconBorderRadius: 50%;
//input field
$inputPadding: 1rem 1rem;
$inputTextFontSize: 1rem;
$inputBg: #ffffff;
$inputTextColor: $emphasis-high;
$inputIconColor: $emphasis-medium;
$inputBorder: 1px solid $emphasis-low;
$inputHoverBorderColor: $emphasis-high;
$inputFocusBorderColor: $primaryColor;
$inputErrorBorderColor: $errorColor;
$inputPlaceholderTextColor: $emphasis-medium;
$inputFocusShadow: none;
$inputFilledBg: #f5f5f5;
$inputFilledHoverBg: #ececec;
$inputFilledFocusBg: #dcdcdc;
//input groups
$inputGroupBorderColor: $emphasis-low;
$inputGroupBg: $inputBg;
$inputGroupTextColor: $emphasis-medium;
$inputGroupIconColor: $emphasis-medium;
$inputGroupAddonMinWidth: 2.357rem;
//input lists
$inputListMinWidth: 12rem;
$inputListBg: #ffffff;
$inputListBorder: 1px solid #e5e5e5;
$inputListPadding: 0;
$inputListItemPadding: 1rem 1rem;
$inputListItemBg: transparent;
$inputListItemTextColor: $textColor;
$inputListItemHoverBg: rgba(0, 0, 0, .04);
$inputListItemTextHoverColor: $textColor;
$inputListItemHighlightBg: $highlightBg;
$inputListItemHighlightTextColor: $highlightTextColor;
$inputListItemBorder: 0 none;
$inputListItemBorderRadius: 0;
$inputListItemMargin: 0;
$inputListItemFocusShadow:none !default;
$inputListHeaderPadding: 1rem 1rem;
$inputListHeaderBg: #ffffff;
$inputListHeaderTextColor: $textColor;
$inputListHeaderBorder: 1px solid rgba(0, 0, 0, .12);
//inputs with panels (password, keyboard)
$inputContentPanelPadding: 1rem;
$inputContentPanelBg: #ffffff;
$inputContentPanelTextColor: $textColor;
//inputs with overlays
$inputOverlayBorder: 0 none;
$inputOverlayShadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
//inputs with buttons
$inputButtonWidth: 3rem;
//button
$buttonTextOnlyPadding: 0.714rem 1rem;
$buttonWithLeftIconPadding: 0.714rem 1rem 0.714rem 2.5rem;
$buttonWithRightIconPadding: 0.714rem 2.5rem 0.714rem 1rem;
$buttonIconOnlyWidth: 3rem;
$buttonIconOnlyPadding: 0.714rem;
$buttonBg: $primaryColor;
$buttonTextColor: $primaryTextColor;
$buttonBorder: 0 none;
$buttonHoverBg: rgba($primaryColor, .92);
$buttonTextHoverColor: $primaryTextColor;
$buttonHoverBorderColor: transparent;
$buttonActiveBg: rgba($primaryColor, .68);
$buttonTextActiveColor: $primaryTextColor;
$buttonActiveBorderColor: transparent;
$buttonFocusOutline: 0 none;
$buttonFocusOutlineOffset: 0;
$buttonFocusShadow: none;
$raisedButtonShadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
$roundedButtonBorderRadius: 2rem;
$textButtonHoverBgOpacity: .04;
$textButtonActiveBgOpacity: .16;
$outlinedButtonBorder: 1px solid;
$plainButtonTextColor: $textSecondaryColor;
$plainButtonHoverBgColor: rgba(0, 0, 0, .04);
$plainButtonActiveBgColor: rgba(0, 0, 0, .16);
$secondaryButtonBg: $accentColor;
$secondaryButtonTextColor: $accentTextColor;
$secondaryButtonBorder: 0 none;
$secondaryButtonHoverBg: rgba($accentColor, .92);
$secondaryButtonTextHoverColor: $accentTextColor;
$secondaryButtonHoverBorderColor: transparent;
$secondaryButtonActiveBg: rgba($accentColor, .68);
$secondaryButtonTextActiveColor: $accentTextColor;
$secondaryButtonActiveBorderColor: transparent;
$secondaryButtonFocusShadow: none;
$infoButtonBg: #2196F3;
$infoButtonTextColor: #ffffff;
$infoButtonBorder: 0 none;
$infoButtonHoverBg: rgba(#2196F3, .92);
$infoButtonTextHoverColor: #ffffff;
$infoButtonHoverBorderColor: transparent;
$infoButtonActiveBg: rgba(#2196F3, .68);
$infoButtonTextActiveColor: #ffffff;
$infoButtonActiveBorderColor: transparent;
$infoButtonFocusShadow: none;
$successButtonBg: #689F38;
$successButtonTextColor: #ffffff;
$successButtonBorder: 0 none;
$successButtonHoverBg: rgba(#689F38, .92);
$successButtonTextHoverColor: #ffffff;
$successButtonHoverBorderColor: transparent;
$successButtonActiveBg: rgba(#689F38, .68);
$successButtonTextActiveColor: #ffffff;
$successButtonActiveBorderColor: transparent;
$successButtonFocusShadow: none;
$warningButtonBg: #FBC02D;
$warningButtonTextColor: #212529;
$warningButtonBorder: 0 none;
$warningButtonHoverBg: rgba(#FBC02D, .92);
$warningButtonTextHoverColor: #212529;
$warningButtonHoverBorderColor: transparent;
$warningButtonActiveBg: rgba(#FBC02D, .68);
$warningButtonTextActiveColor: #212529;
$warningButtonActiveBorderColor: transparent;
$warningButtonFocusShadow: none;
$helpButtonBg: #9C27B0;
$helpButtonTextColor: #ffffff;
$helpButtonBorder: 0 none;
$helpButtonHoverBg: rgba(#9C27B0, .92);
$helpButtonTextHoverColor: #ffffff;
$helpButtonHoverBorderColor: transparent;
$helpButtonActiveBg: rgba(#9C27B0, .68);
$helpButtonTextActiveColor: #ffffff;
$helpButtonActiveBorderColor: transparent;
$helpButtonFocusShadow: none;
$dangerButtonBg: #D32F2F;
$dangerButtonTextColor: #ffffff;
$dangerButtonBorder: 0 none;
$dangerButtonHoverBg: rgba(#D32F2F, .92);
$dangerButtonTextHoverColor: #ffffff;
$dangerButtonHoverBorderColor: transparent;
$dangerButtonActiveBg: rgba(#D32F2F, .68);
$dangerButtonTextActiveColor: #ffffff;
$dangerButtonActiveBorderColor: transparent;
$dangerButtonFocusShadow: none;
//checkbox
$checkboxBorderWidth: 2px;
$checkboxBorder: 2px solid #757575;
$checkboxWidth: 18px;
$checkboxHeight: 18px;
$checkboxActiveBorderColor: $primaryColor;
$checkboxActiveBg: $primaryColor;
$checkboxActiveHoverBg: $primaryColor;
$checkboxTextActiveColor: $primaryTextColor;
$checkboxFocusShadow: none;
//radiobutton
$radiobuttonBorderWidth: 2px;
$radiobuttonBorder: 2px solid #757575;
$radiobuttonWidth: 20px;
$radiobuttonHeight: 20px;
$radiobuttonIconSize: 10px;
$radiobuttonActiveBorderColor: $primaryColor;
$radiobuttonActiveBg: $primaryTextColor;
$radiobuttonActiveHoverBg: $primaryTextColor;
$radiobuttonTextActiveColor: $primaryColor;
$radiobuttonFocusShadow: none;
//togglebutton
$toggleButtonBg: #ffffff;
$toggleButtonBorder: 1px solid rgba(0, 0, 0, .12);
$toggleButtonTextColor: $textColor;
$toggleButtonIconColor: $textSecondaryColor;
$toggleButtonHoverBg: #f6f6f6;
$toggleButtonHoverBorderColor: rgba(0, 0, 0, .12);
$toggleButtonTextHoverColor: $textColor;
$toggleButtonHoverIconColor: $textSecondaryColor;
$toggleButtonActiveBg: #e0e0e1;
$toggleButtonActiveBorderColor: #e0e0e1;
$toggleButtonTextActiveColor: $textColor;
$toggleButtonActiveIconColor: $textSecondaryColor;
$toggleButtonActiveHoverBg: #d9d8d9;
$toggleButtonActiveHoverBorderColor: #d9d8d9;
$toggleButtonActiveTextHoverColor: $textColor;
$toggleButtonActiveHoverIconColor: $textSecondaryColor;
//inplace
$inplacePadding: $inputPadding;
$inplaceHoverBg: rgba(0, 0, 0, .04);
$inplaceTextHoverColor: $textColor;
//rating
$ratingIconFontSize: 1.143rem;
$ratingIconWidth: 1.25rem;
$ratingIconHeight: 1.25rem;
$ratingCancelIconColor: #B00020;
$ratingCancelHoverIconColor: #B00020;
$ratingStarIconColor: $primaryColor;
$ratingStarIconHoverColor: $primaryColor;
$ratingStarActiveIconColor: $primaryColor;
//slider
$sliderBg: #c1c1c1;
$sliderHeight: 2px;
$sliderWidth: 2px;
$sliderHandleWidth: 20px;
$sliderHandleHeight: 20px;
$sliderHandleBg: $primaryColor;
$sliderHandleBorder: 0 none;
$sliderHandleBorderRadius: 50%;
$sliderHandleHoverBorderColor: 0 none;
$sliderHandleHoverBg: $primaryColor;
$sliderRangeBg: $primaryColor;
//calendar
$calendarTableMargin: .5rem 0;
$calendarPadding: .5rem;
$calendarTitlePadding: .5rem;
$calendarTitleBg: #ffffff;
$calendarTitleTextColor: $textColor;
$calendarTitleBorder: 1px solid rgba(0, 0, 0, .12);
$calendarTitleBorderWidth: 1px;
$calendarCellPadding: .5rem;
$calendarCellDateTextColor: $textColor;
$calendarCellDateWidth: 2.5rem;
$calendarCellDateHeight: 2.5rem;
$calendarCellDateHoverBorderColor: transparent;
$calendarCellDateBorderRadius: 50%;
$calendarCellDateBorder: 1px solid transparent;
$calendarCellDateHoverBg: rgba(0, 0, 0, .04);
$calendarCellDateTodayBg: #ffffff;
$calendarCellDateTodayBorder: 1px solid rgba(0, 0, 0, 12);
$calendarCellDateTodayTextColor: $textColor;
$calendarCellDateSelectedBg: $highlightBg;
$calendarCellDateSelectedTextColor: $highlightTextColor;
$calendarCellDateSelectedBorder: 0 none;
$calendarButtonBarPadding: 1rem 0;
$calendarTimePickerMargin: 0;
$calendarTimePickerLabelPadding: .5rem;
$calendarTimePickerInputPadding: 0 .5rem;
$calendarTimePickerInputMargin: 0 .714em .714em 40%;
//keyboard
$keyboardButtonPadding: .5rem;
$keyboardButtonMargin: 2px;
$keyboardButtonBorder: 1px solid $emphasis-low;
$keyboardButtonBg: #ffffff;
$keyboardButtonTextColor: $textColor;
$keyboardButtonHoverBorderColor: $emphasis-high;
$keyboardButtonHoverBg: #ffffff;
$keyboardButtonTextHoverColor: $textColor;
$keyboardButtonActiveBorderColor: transparent;
$keyboardButtonActiveBg: rgba($primaryColor, .68);
$keyboardButtonTextActiveColor: $primaryTextColor;
//input switch
$inputSwitchOffBg: rgba(0, 0, 0, .38) !default;
$inputSwitchHandleOffBg: #ffffff !default;
$inputSwitchHandleOffTextColor: $textColor !default;
$inputSwitchHandleOffBorder: none !default;
$inputSwitchOnBg: rgba($primaryColor, .5) !default;
$inputSwitchHandleOnBg: $primaryColor !default;
$inputSwitchHandleOnTextColor: $primaryTextColor !default;
$inputSwitchHandleOnBorderColor: none !default;
$inputSwitchHandleBorderRadius: 50% !default;
$inputSwitchHandleShadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px !default;
$inputSwitchBorder:solid transparent !default;
$inputSwitchBorderWidth:2px !default;
$inputSwitchBorderRadius: .5rem !default;
//panel
$panelHeaderBorder: 1px solid #e0e0e0;
$panelHeaderBg: #ffffff;
$panelHeaderTextColor: $textColor;
$panelHeaderFontWeight: 500;
$panelHeaderPadding: 1rem;
$panelHeaderHoverBg: rgba(0, 0, 0, .04);
$panelHeaderHoverBorderColor: #e0e0e0;
$panelHeaderTextHoverColor: $textColor;
$panelHeaderHoverIconColor: $textColor;
$panelContentBorder: 1px solid #e0e0e0;
$panelContentBg: #ffffff;
$panelContentTextColor: $textColor;
$panelContentPadding: 1rem;
$panelFooterBorder: 1px solid #e0e0e0;
$panelFooterBg: #ffffff;
$panelFooterTextColor: $textColor;
$panelFooterPadding: 1rem 1rem;
//accordion
$accordionSpacing: 0;
$accordionHeaderBorder: 0 none;
$accordionHeaderBg: #ffffff;
$accordionHeaderTextColor: $textColor;
$accordionHeaderFontWeight: 400;
$accordionHeaderPadding: 1.5rem;
$accordionHeaderHoverBg: #f6f6f6;
$accordionHeaderHoverBorderColor: transparent;
$accordionHeaderTextHoverColor: $textColor;
$accordionHeaderActiveBg: #ffffff;
$accordionHeaderActiveBorderColor: transparent;
$accordionHeaderTextActiveColor: $textColor;
$accordionHeaderActiveHoverBg: #ffffff;
$accordionHeaderActiveHoverBorderColor: transparent;
$accordionHeaderActiveTextHoverColor: $textColor;
$accordionContentBorder: 0 none;
$accordionContentBg: #ffffff;
$accordionContentTextColor: $textColor;
$accordionContentPadding: 1rem 1.5rem;
//tabview
$tabsHeaderSpacing: 0;
$tabsNavBorderWidth: 2px;
$tabsNavBorder: $tabsNavBorderWidth solid rgba(0, 0, 0, .12);
$tabsNavBg: #ffffff;
$tabsHeaderBg: #ffffff;
$tabsHeaderTextColor: $textSecondaryColor;
$tabsHeaderFontWeight: 500;
$tabsHeaderPadding: 1rem 1.5rem;
$tabsHeaderHoverBg: rgba($primaryColor, .04);
$tabsHeaderHoverBorderColor: transparent;
$tabsHeaderTextHoverColor: $textSecondaryColor;
$tabsHeaderActiveBg: #ffffff;
$tabsHeaderActiveBorderColor: $primaryColor;
$tabsHeaderTextActiveColor: $primaryColor;
$tabsContentBorder: 0 none;
$tabsContentBg: #ffffff;
$tabsContentTextColor: $textColor;
$tabsContentPadding: $panelContentPadding;
//action icon
$tabsScrollerButtonBg: transparent;
$tabsScrollerButtonIconColor: $textSecondaryColor;
$tabsScrollerButtonHoverBg: rgba(0, 0, 0, .04);
$tabsScrollerButtonIconHoverColor: $textSecondaryColor;
//scrollpanel
$scrollPanelHandleBg: $primaryColor;
$scrollPanelTrackBorder: 0 none;
$scrollPanelTrackBg: rgba(0, 0, 0, .12);
//paginator
$paginatorBg: #ffffff;
$paginatorBorder: solid #e4e4e4;
$paginatorBorderWidth: 0;
$paginatorIconColor: $textSecondaryColor;
$paginatorPadding: .5rem 1rem;
$paginatorElementWidth: $buttonIconOnlyWidth;
$paginatorElementHeight: $buttonIconOnlyWidth;
$paginatorElementHoverBg: rgba(0, 0, 0, .04);
$paginatorElementHoverIconColor: $textSecondaryColor;
$paginatorElementMargin: .143rem;
$paginatorElementBorder: 0 none;
$paginatorElementHoverBorderColor: transparent;
$paginatorElementBorderRadius: 50%;
//datatable
$datatableHeaderBorder: 1px solid #e4e4e4;
$datatableHeaderBorderWidth: 0 0 1px 0;
$datatableHeaderBg: #ffffff;
$datatableHeaderTextColor: $textColor;
$datatableHeaderFontWeight: 500;
$datatableHeaderPadding: 1rem 1rem;
$datatableHeaderCellPadding: 1rem 1rem;
$datatableHeaderCellBg: #ffffff;
$datatableHeaderCellTextColor: $textColor;
$datatableHeaderCellIconColor: $textSecondaryColor;
$datatableHeaderCellFontWeight: 500;
$datatableHeaderCellBorder: 1px solid #e4e4e4;
$datatableHeaderCellBorderWidth: 0 0 1px 0;
$datatableHeaderCellHoverBg: rgba(0, 0, 0, .04);
$datatableHeaderCellTextHoverColor: $textColor;
$datatableHeaderCellHighlightBg: #ffffff;
$datatableHeaderCellHighlightTextColor: $textColor;
$datatableHeaderCellHighlightHoverBg: rgba(0, 0, 0, .04);
$datatableHeaderCellHighlightTextHoverColor: $textColor;
$datatableSortableColumnBadgeSize: 1.143rem;
$datatableBodyRowBg: #ffffff;
$datatableBodyRowTextColor: $textColor;
$datatableBodyRowOddBg: rgba(0, 0, 0, .02);
$datatableBodyRowHoverBg: rgba(0, 0, 0, .04);
$datatableBodyRowTextHoverColor: $textColor;
$datatableBodyRowBorder: 1px solid #e4e4e4;
$datatableBodyCellBorderWidth: 0 0 1px 0;
$datatableBodyCellPadding: 1rem 1rem;
$datatableFooterBorderWidth: 0 0 1px 0;
$datatableFooterCellPadding: 1rem 1rem;
$datatableFooterCellBg: #ffffff;
$datatableFooterCellTextColor: $textColor;
$datatableFooterCellFontWeight: 500;
$datatableFooterCellBorder: 1px solid #e4e4e4;
$datatableFooterCellBorderWidth: 0 0 1px 0;
$datatableResizerHelperBg: $primaryColor;
$datatableFooterBorder: 1px solid #e4e4e4;
$datatableFooterBorderWidth: 0 0 1px 0;
$datatableFooterBg: #ffffff;
$datatableFooterTextColor: $textColor;
$datatableFooterFontWeight: 500;
$datatableFooterPadding: 1rem 1rem;
$datatableTopPaginatorBorderWidth: 0 0 1px 0;
$datatableBottomPaginatorBorderWidth: 0 0 1px 0;
$datatableScaleSm: 0.5;
$datatableScaleLg: 1.25;
//dataview
$dataViewContentPadding: 1rem 0;
$dataViewContentBorder: 0 none;
$dataViewListItemBorder: solid rgba(0, 0, 0, .12);
$dataViewListItemBorderWidth: 0 0 1px 0;
//orderlist, picklist
$orderListDropPlaceholderBg:scale-color($highlightBg, $lightness: -20%);
$pickListDropPlaceholderBg:scale-color($highlightBg, $lightness: -20%);
//schedule
$scheduleCellBorderColor: $panelContentBorder;
$scheduleTodayBg: lighten($highlightBg, 10%);
$scheduleEventBg: $highlightBg;
$scheduleEventBorder: 1px solid $highlightBg;
$scheduleEventTextColor: $highlightTextColor;
//tree
$treeNodePadding: .25rem;
$treeNodeLabelPadding: .25rem;
//messages
$messagesMargin: 1rem 0;
$messagesPadding: 1.25rem 1.5rem;
$messagesIconFontSize: 1.5rem;
$messagesBorderWidth: 0 0 0 0;
$messagesFontWeight: 500;
$infoMessageBg: #B3E5FC;
$infoMessageBorder: solid transparent;
$infoMessageTextColor: #01579B;
$infoMessageIconColor: #01579B;
$warnMessageBg: #FFECB3;
$warnMessageBorder: solid transparent;
$warnMessageTextColor: #7f6003;
$warnMessageIconColor: #7f6003;
$errorMessageBg: #FFCDD2;
$errorMessageBorder: solid transparent;
$errorMessageTextColor: #B71C1C;
$errorMessageIconColor: #B71C1C;
$growlIconFontSize: 2rem;
$growlMargin: 0 0 1rem 0;
$growlPadding: 1rem;
$messageBorderWidth: 0 0 0 3px;
//overlays
$overlayContentBorder: 0 none;
$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
//dialog
$dialogHeaderBg: #ffffff;
$dialogHeaderBorder: 0 none;
$dialogHeaderTextColor: $textColor;
$dialogHeaderFontWeight: 500;
$dialogHeaderFontSize: 1.25rem;
$dialogHeaderPadding: 1.5rem;
$dialogContentBorder: 0 none;
$dialogContentBg: #ffffff;
$dialogContentTextColor: $textColor;
$dialogContentPadding: 0.2rem 1.5rem 1.5rem 1.5rem;
$dialogFooterBorder: 0 none;
$dialogFooterBg: #ffffff;
$dialogFooterTextColor: $textColor;
$dialogFooterPadding: 1rem 1.5rem;
$confirmDialogContentPadding: 0.2rem 1.5rem 1.5rem 1.5rem;
$confirmDialogIconFontSize: 2rem;
//overlay panel
$overlayPanelCloseIconBg: $primaryColor;
$overlayPanelCloseIconColor: $primaryTextColor;
$overlayPanelCloseIconHoverBg: rgba($primaryColor, .92);
$overlayPanelCloseIconHoverColor: $primaryTextColor;
//tooltip
$tooltipBg: rgba(97, 97, 97, .9);
$tooltipTextColor: #ffffff;
//steps
$stepsItemTextColor: $textColor;
$stepsItemNumberBorder: 1px solid transparent;
$stepsItemNumberColor: $textColor;
$stepsItemNumberBg: transparent;
$stepsItemNumberFontSize: 1.143rem;
$stepsItemNumberWidth: 2rem;
$stepsItemNumberHeight: 2rem;
$stepsItemNumberBorderRadius: 50%;
//progressbar
$progressBarHeight: 4px;
$progressBarBorder: 0 none;
$progressBarBg: rgba($primaryColor, .32);
$progressBarValueBg: $primaryColor;
//menu
$menuBg: #ffffff;
$menuBorder: 1px solid #e5e5e5;
$menuitemTextColor: $textColor;
$menuitemIconColor: $textSecondaryColor;
$menuitemHoverBg: rgba(0, 0, 0, .04);
$menuitemTextHoverColor: $textColor;
$menuitemHoverIconColor: $textSecondaryColor;
$menuitemPadding: 1rem 1rem;
$menuitemMargin: 0;
$menuitemBorderRadius: 0;
$menuSeparatorMargin: .5rem 0;
$breadcrumbPadding: 1rem;
$breadcrumbBg: #ffffff;
$breadcrumbBorder: 1px solid #e5e5e5;
$breadcrumbItemTextColor: $textColor;
$breadcrumbItemIconColor: $textSecondaryColor;
$breadcrumbLastItemTextColor: $textColor;
$breadcrumbLastItemIconColor: $textSecondaryColor;
$breadcrumbSeparatorColor: $textSecondaryColor;
$submenuHeaderMargin: 0;
$submenuHeaderPadding: 1rem;
$submenuHeaderBg: #ffffff;
$submenuHeaderBorder: 0 none;
$submenuHeaderTextColor: $textSecondaryColor;
$submenuHeaderFontWeight: 400;
$submenuHeaderFontSize: 1rem;
$verticalMenuPadding: .5rem 0;
$horizontalMenuPadding: 1rem;
$horizontalMenuBg: transparent;
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
//upload
$fileItemPadding: 1rem;
//badge and tag
$badgeBg: $primaryColor;
$badgeTextColor: $primaryTextColor;
$badgeMinWidth: 1.5rem;
$badgeHeight: 1.5rem;
$badgeFontWeight: 700;
$badgeFontSize: .75rem;
$tagPadding: .25rem .4rem;
//card
$cardBodyPadding: 1rem;
$cardTitleFontSize: 1.5rem;
$cardTitleFontWeight: 700;
$cardSubTitleFontWeight: 400;
$cardSubTitleColor: $textSecondaryColor;
$cardContentPadding: 1rem 0;
$cardFooterPadding: 1rem 0 0 0;
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
//editor
$editorToolbarBg:$panelHeaderBg !default;
$editorToolbarBorder:$panelHeaderBorder !default;
$editorToolbarPadding:$panelHeaderPadding !default;
$editorToolbarIconColor:$textSecondaryColor !default;
$editorToolbarIconHoverColor:$textColor !default;
$editorIconActiveColor:$primaryColor !default;
$editorContentBorder:$panelContentBorder !default;
$editorContentBg:$panelContentBg !default;
//editor
$editorToolbarBg:$panelHeaderBg !default;
$editorToolbarBorder:$panelHeaderBorder !default;
$editorToolbarPadding:$panelHeaderPadding !default;
$editorToolbarIconColor:$textSecondaryColor !default;
$editorToolbarIconHoverColor:$textColor !default;
$editorIconActiveColor:$primaryColor !default;
$editorContentBorder:$panelContentBorder !default;
$editorContentBg:$panelContentBg !default;
//divider
$dividerHorizontalMargin: 1.25rem 0;
$dividerHorizontalPadding: 0 1.25rem;
$dividerVerticalMargin: 0 1.25rem;
$dividerVerticalPadding: 1.25rem 0;
$dividerSize: 1px;
$dividerColor: rgba(0, 0, 0, .12);
//avatar
$avatarBg: rgba(0, 0, 0, .12);
$avatarTextColor: $textColor;
//chip
$chipBg:$highlightBg !default;
$chipTextColor:$highlightTextColor !default;
$chipBorderRadius: 16px;
//scrollTop
$scrollTopBg: $accentColor;
$scrollTopHoverBg: rgba($accentColor, .92);
$scrollTopWidth: 3rem;
$scrollTopHeight: 3rem;
$scrollTopBorderRadius: 50%;
$scrollTopFontSize: 1.5rem;
$scrollTopTextColor: $accentTextColor;
//skeleton
$skeletonBg: rgba(0, 0, 0, .08);
$skeletonAnimationBg: rgba(255, 255, 255, 0.4);
//splitter
$splitterGutterBg: rgba(0, 0, 0, .04);
$splitterGutterHandleBg: rgba(0, 0, 0, .12);
//chronoline
$chronolineVerticalEventContentPadding: 0 1rem;
$chronolineHorizontalEventContentPadding: 1rem 0;
$chronolineEventMarkerWidth: 1rem;
$chronolineEventMarkerHeight: 1rem;
$chronolineEventMarkerBorderRadius: 50%;
$chronolineEventMarkerBorder: 0 none;
$chronolineEventMarkerBackground: #bdbdbd;
$chronolineEventConnectorSize: 2px;
$chronolineEventColor: #bdbdbd;
//confirmpopup
$confirmPopupContentPadding: 1.5rem;
$confirmPopupFooterPadding: 0 1.5rem 1rem 1.5rem;
//speeddial
$speedDialButtonWidth: 4rem !default;
$speedDialButtonHeight: 4rem !default;
$speedDialButtonIconFontSize: 2rem !default;
$speedDialActionWidth: 3rem !default;
$speedDialActionHeight: 3rem !default;
$speedDialActionBg: $accentColor !default;
$speedDialActionHoverBg: rgba($accentColor, .92) !default;
$speedDialActionTextColor: #fff !default;
$speedDialActionTextHoverColor: #fff !default;
//carousel
$carouselIndicatorsPadding:1rem !default;
$carouselIndicatorBg:#dcdcdc !default;
$carouselIndicatorHoverBg:#ececec !default;
$carouselIndicatorBorderRadius:0 !default;
$carouselIndicatorWidth:2rem !default;
$carouselIndicatorHeight:.5rem !default;
//galleria
$galleriaMaskBg:rgba(0,0,0,0.9) !default;
$galleriaCloseIconMargin:.5rem !default;
$galleriaCloseIconFontSize:2rem !default;
$galleriaCloseIconBg:transparent !default;
$galleriaCloseIconColor:rgba(255,255,255,.87) !default;
$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
$galleriaCloseIconHoverColor:rgba(255,255,255,.87) !default;
$galleriaCloseIconWidth:4rem !default;
$galleriaCloseIconHeight:4rem !default;
$galleriaCloseIconBorderRadius:50% !default;
$galleriaItemNavigatorBg:transparent !default;
$galleriaItemNavigatorColor:#f6f6f6 !default;
$galleriaItemNavigatorMargin:0 .5rem !default;
$galleriaItemNavigatorFontSize:2rem !default;
$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
$galleriaItemNavigatorHoverColor:rgba(255,255,255,.87) !default;
$galleriaItemNavigatorWidth:4rem !default;
$galleriaItemNavigatorHeight:4rem !default;
$galleriaItemNavigatorBorderRadius:50% !default;
$galleriaCaptionBg:rgba(0,0,0,.5) !default;
$galleriaCaptionTextColor:rgba(255,255,255,.87) !default;
$galleriaCaptionPadding:1rem !default;
$galleriaIndicatorsPadding:1rem !default;
$galleriaIndicatorBg:#dcdcdc !default;
$galleriaIndicatorHoverBg:#ececec !default;
$galleriaIndicatorBorderRadius:50% !default;
$galleriaIndicatorWidth:1.25rem !default;
$galleriaIndicatorHeight:1.25rem !default;
$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
$galleriaThumbnailContainerPadding:.8rem .25rem !default;
$galleriaThumbnailContentMargin:.2rem !default;
$galleriaThumbnailNavigatorBg:transparent !default;
$galleriaThumbnailNavigatorColor:rgba(255,255,255,.87) !default;
$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
$galleriaThumbnailNavigatorHoverColor:rgba(255,255,255,.87) !default;
$galleriaThumbnailNavigatorBorderRadius:50% !default;
$galleriaThumbnailNavigatorWidth:2rem !default;
$galleriaThumbnailNavigatorHeight:2rem !default;
:root {
--surface-a:#ffffff;
--surface-b:#fafafa;
--surface-c:rgba(0,0,0,.04);
--surface-d:rgba(0,0,0,.12);
--surface-e:#ffffff;
--surface-f:#ffffff;
--text-color:;
--text-color-secondary:;
--primary-color:;
--primary-dark-color:;
--primary-lightest-color:;
--primary-color-text:;
--font-family:;
--surface-0: #ffffff;
--surface-50: #FAFAFA;
--surface-100: #F5F5F5;
--surface-200: #EEEEEE;
--surface-300: #E0E0E0;
--surface-400: #BDBDBD;
--surface-500: #9E9E9E;
--surface-600: #757575;
--surface-700: #616161;
--surface-800: #424242;
--surface-900: #212121;
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #EEEEEE;
--gray-300: #E0E0E0;
--gray-400: #BDBDBD;
--gray-500: #9E9E9E;
--gray-600: #757575;
--gray-700: #616161;
--gray-800: #424242;
--gray-900: #212121;
--content-padding:;
--inline-spacing:;
--border-radius:;
--surface-ground:#fafafa;
--surface-section:#ffffff;
--surface-card:#ffffff;
--surface-overlay:#ffffff;
--surface-border:rgba(0,0,0,.12);
--surface-hover:rgba(0,0,0,.04);
--maskbg: ;
--focus-ring: ;
color-scheme: light;
}
Similarly styles/layout/theme/theme-common/_compact.scss files contains the shared variables of the PrimeFaces compact themes.
$actionIconWidth: 2rem;
$actionIconHeight: 2rem;
$inputPadding: .75rem .75rem;
$inputListItemPadding: .75rem .75rem;
$inputListHeaderPadding: .75rem .75rem;
$inputGroupAddonMinWidth: 2.75rem;
$inputButtonWidth: 2.75rem;
$inputContentPanelPadding: .75rem;
$buttonTextOnlyPadding: 0.643rem .75rem;
$buttonWithLeftIconPadding: 0.643rem .75rem 0.643rem 2.5rem;
$buttonWithRightIconPadding: 0.643rem 2.5rem 0.643rem .75rem;
$buttonIconOnlyWidth: 2.75rem;
$buttonIconOnlyPadding: 0.643rem;
$ratingIconFontSize: 1rem;
$calendarCellDateWidth: 2.25rem;
$calendarCellDateHeight: 2.25rem;
$calendarButtonBarPadding: .75rem 0;
$panelHeaderPadding: .75rem;
$panelContentPadding: .75rem;
$panelFooterPadding: .75rem .75rem;
$accordionHeaderPadding: 1.25rem;
$accordionContentPadding: .75rem 1.25rem;
$tabsHeaderPadding: .75rem 1.25rem;
$tabsContentPadding: .75rem;
$cardBodyPadding: .75rem;
$cardContentPadding: .75rem 0;
$cardFooterPadding: .75rem 0 0 0;
$paginatorPadding: .375rem .75rem;
$datatableHeaderPadding: .75rem .75rem;
$datatableHeaderCellPadding: .75rem .75rem;
$datatableBodyCellPadding: .75rem .75rem;
$datatableFooterCellPadding: .75rem .75rem;
$datatableFooterPadding: .75rem .75rem;
$dataViewContentPadding: .75rem 0;
$messagesMargin: .75rem 0;
$messagesPadding: 1rem 1.25rem;
$messagesIconFontSize: 1.5rem;
$growlPadding: 1.25rem;
$growlIconFontSize: 2rem;
$dialogHeaderPadding: 1.25rem;
$dialogContentPadding: 0.2rem 1.25rem 1.25rem 1.25rem;
$dialogFooterPadding: .75rem 1.25rem;
$confirmDialogContentPadding: 0.2rem 1.25rem 1.25rem 1.25rem;
$overlayPanelCloseIconWidth: 2.25rem;
$overlayPanelCloseIconHeight: 2.25rem;
$menuitemPadding: .75rem .75rem;
$submenuHeaderPadding: .75rem;
$breadcrumbPadding: .75rem;
$horizontalMenuPadding: .75rem;
$sliderHandleWidth: 14px;
$sliderHandleHeight: 14px;
$confirmPopupContentPadding: .75rem;
$confirmPopupFooterPadding: .75rem .75rem;
Menu is a regular JSF component that supports PrimeFaces MenuModel API allowing both declarative and programmatic approaches. State is saved via a storage and to remove it define a widgetVar to the menu and call PF('yourwidgetvar').clearState(). To use the menu add java/org/primefaces/layout and import the http://primefaces.org/ultima namespace.
<xmlns:pu="http://primefaces.org/ultima">
<pu:menu>
</pu:menu>
Menu has 4 modes, static, overlay, horizontal and slim. Layout wrapper element in template.xhtml is used to define which mode to use by adding specific classes. List below indicates the style classes for each mode.
For example to create a horizontal menu, the div element should be in following form;
<div class="layout-wrapper layout-menu-horizontal">
<ui:include src="./topbar.xhtml" />
<ui:include src="./menu.xhtml" />
<div class="layout-main">
<ui:insert name="content"/>
<ui:include src="./footer.xhtml" />
</div>
</div>
It is also possible to leave the choice to the user by keeping the preference at a bean and usign an EL expression to bind it so that user can switch between modes. Sample application has an example implementation of such use case.
<div class="layout-wrapper #{app.layoutClass}">
</div>
To add badge to submenu items;
<p:submenu id="themes" label="Themes" badgde="2" icon="pi pi-cog">
<p:menuitem id="m_dashboardsales" value="Dashboard Sales" icon="pi pi-fw pi-home" badge="4" badgeStyleClass="ui-badge-info" />
...
</p:submenu>
It is a separate component defined in inlinemenu.xhtml file. This menu can be fully customized according to the application's needs and it is created according to its location within the element with the layout-menu-container class. There are special classes in the inline menu to provide some interactions.
Various elements display a ripple element on mousedown event, if you prefer to remove this effect, simply remove the ripple.js and ripple.css files from template.xhtml.
Ultima Layout uses PrimeIcons v6.0.1+ for layout which is included in the resources and no configuration is required.
Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying ui-input-filled to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
<div class="ui-input-filled">
<p:inputText type="text" />
</div>
Many of the layout sections like a topbar may require interactivity for opening or hiding a submenu. A handy script called layout.js looks for elements with data-pb-styleclass attribute to bring interactivity easily. The directive adds a click event to its host and manages the enter/leave animation of a target. The script file is located at resources/layout/js/layout.js, copy this file to a location like a folder such as resources/layout/js/layout.js and include it via script tag.
<h:outputScript name="js/layout.js" library="layout" />
The best practice when adding your own extensions is using the scss files under the resources/layout/styles/{layout|theme}-{light|dark}/overrides folder. _variables file allow overriding the default variables whereas _theme.scss and _layout.scss files can be used to include additional styling. This approach allows seamless updates so your changes are not overriden with the maintenance updates from PrimeTek.
Every change is included in CHANGELOG.md file at the root folder of the distribution along with the instructions to update.