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 .less files.
In particular, the Core.less file imports the .less files,
then Maven Less Plugin or Winless compiles the Core.less file into Core.css.
Two key .less files are varibales.less and 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 varibales.less and mixin.less or create these 2 files into custom-extension/src/main/webapp/skin/less.
Portlet skin
The general structure of portlet skin is as below:
Less folder: /webapp/skin/less/YourUIPortletName, for example /webapp/skin/less/UIBannerPortlet.
Images folder: /webapp/skin/images/, for example /webapp/skin/images/.
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.