The skin folder structure must be prepared once you start the design. To ease the integration of your design in eXo Platform, it is recommended you follow certain conventions.
The look and feel of eXo Platform is conducted on the bootstrap framework and Less. Therefore, to make best practices when customizing the eXo Platform look and feel, you need to have certain knowledge of bootstrap framework and Less.
All components, portal, and portlet themes are defined in the
Core.css file which is generated from
In particular, the
Core.less file imports the
then Maven Less Plugin or Winless compiles the
Core.less file into
.less files are
mixin.less. See Default skin for more details.
When variables of
varibales.less or functions of
mixin.less are changed, the eXo Platform skin will be accordingly changed.
Thus, when you want to customize the eXo Platform skin or create a new skin, you only need to modify them right in
mixin.less or create these 2 files into
The general structure of portlet skin is as below:
/webapp/skin/less/YourUIPortletName, for example
/webapp/skin/images/, for example
The id and class names are defined after the WebUI components name and portlets name with the 'ui' as prefix. For example, the UI portlet will be named as uiFooterPortlet, or uiBannerPortlet and the UI component will be named as uiToolbarContainer, or uiVerticalTab.
Also, the look and feel of eXo Platform is complied with a set of rules that you need to learn about. See eXo UX Guidelines for more details.