Here is a simple example of creating your skin add-on that contains some basic modifications regarding colors, icons and content background.
Creating your skin add-on
In the platform-ui project (by using the command: git clone https://github.com/exoplatform/platform-ui.git), do as follows:
Modify the
/platform-ui/pom.xmlfile by changing the values of <groupId>org.exoplatform.platform-ui</groupId> and <platform-ui-skin-final-name>eXoSkin</platform-ui-skin-final-name> to {YOUR-SKIN-ADDON}.Note
Do not change the values in <dependencyManagement>.
Search for values as org.exoplatform.platform-ui and eXoSkin in the files below and replace with {YOUR-SKIN-ADDON}:
/platform-ui/platform-ui-skin/src/main/webapp/WEB-INF/web.xml/platform-ui/platform-ui-skin/pom.xml/platform-ui/packaging/pom.xml/platform-ui/config/pom.xml/platform-ui/config/src/main/resources/conf/configuration.xml
Replace all values as Default in
/platform-ui/platform-ui-skin/src/main/webapp/WEB-INF/gatein-resources.xmlwith {YOUR-SKIN-ADDON}. For example, <skin-name>Default</skin-name> now becomes <skin-name>{YOUR-SKIN-ADDON}</skin-name>.Go to platform-ui and run the following commands to set a new version, for example, 1.0.x-SNAPSHOT, for the skin add-on.
mvn versions:set -DnewVersion=1.0.x-SNAPSHOT
mvn versions:commit
Modify variables to your demand in
/platform-ui/platform-ui-skin/src/main/webapp/skin/less/variables.less, for example:@baseColor: #ffffff; // text color , border color, and other UI elements..
@baseBackground: #333333; // default background , background for content display....
@primaryColor: #0ab5f5; // primary button and link color...
@primaryBackground: #222222; // main background such as header popup background, tab items...
@colorIconDefault : #fff; // icon color
@images-path: "/{YOUR-SKIN-ADDON}/skin/images/themes/default";
@contentBackground: url("@{images-path}/ShareImages/Background/texture-gray.jpg") repeat left top;In which:
@baseColor,@baseBackground,@primaryColorand@primaryBackground- The main color variables that define color for majority of component. See here for more details.@colorIconDefault- Defines the default color of icons.Note
To change the hover status of icon, simply change value of
@colorIconPrimary.@images-path- The path to the folder containing background images of your skin addon.@contentBackground- The initial value of @baseBackground url("@{images-path}/ShareImages/Background/texture.png") repeat left top; is now changed into @baseBackground url("@{images-path}/ShareImages/Background/texture-gray.jpg") repeat left top;.
Build platform-ui with the command: mvn clean install.
Go to
/platform-ui/packaging/target/to check if{YOUR-SKIN-ADDON}.zipis generated.
Deploying locally and testing your created skin add-on
Create a
local.jsonin$PLATFORM_HOME/addons/with the below content:[
{
"id": "{YOUR-SKIN-ADDON-ID}",
"version": "1.0.x-SNAPSHOT",
"name": "{YOUR-SKIN-ADDON-NAME}",
"description": "Your Skin Add-on",
"downloadUrl": "file://D:/java/exo-working/platform-ui/packaging/target/{YOUR-SKIN-ADDON}.zip",
"vendor": "eXo platform",
"license": "LGPLv3",
"supportedDistributions": ["community","enterprise"],
"supportedApplicationServers": ["tomcat","jboss"]}
]
In which, the downloadUrl value is where the
{YOUR-SKIN-ADDON}.zipis stored.Install your add-on with the command: addon install {YOUR-SKIN-ADDON-ID} --snapshots
Apply the new theme to eXo Platform.
i. Start eXo Platform package, and log in with the admin account.
ii. Go to → → , then click Edit Site Configuration next to one site, for example, Intranet site.
iii. In the Skin drop-down list, select the new theme {YOUR-SKIN-ADDON-NAME} and click .
Refresh the page and enjoy the new theme.
The current homepage:
The homepage with your applied skin add-on:
