Creating a new skin add-on

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/exodev/platform-ui.git), do as follows:

  1. Modify the /platform-ui/pom.xml file 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}.


    Do not change the values in <dependencyManagement>.

  2. Search 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

  3. Replace all values as Default in /platform-ui/platform-ui-skin/src/main/webapp/WEB-INF/gatein-resources.xml with {YOUR-SKIN-ADDON}. For example, <skin-name>Default</skin-name> now becomes <skin-name>{YOUR-SKIN-ADDON}</skin-name>.

  4. 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

  5. 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...
    @images-path: "/{YOUR-SKIN-ADDON}/skin/images/themes/blue";
    @contentBackground: url("@{images-path}/ShareImages/Background/texture-gray.jpg") repeat left top;

    In which:

    • @baseColor, @baseBackground, @primaryColor and @primaryBackground - The main color variables that define color for majority of component. See here for more details.

    • @images-path - When you install a new theme, the default eXo theme is not removed. So, the default eXo icons can still be reached if you do not modify @images-path. Here, the default value of "/eXoSkin/skin/images/themes/default" is now changed into "/{YOUR-SKIN-ADDON}/skin/images/themes/blue" that means your icons of the "blue" collection will be used. It is recommended you define a new set of icons in a new dedicated folder, then just modify @images-path as follows:

      @images-path: "/{YOUR-SKIN-ADDON}/skin/images/themes/{YOUR_ICONS_FOLDER}";

      Also, you should open /platform-ui/platform-ui-skin/pom.xml and find <packagingExcludes> that defines icon collections excluded from the {YOUR-SKIN-ADDON} package. To use the "blue" icons collection instead of the "default" one, in


      remove skin/images/themes/blue/ from the list of excluded icon collections and add skin/images/themes/default/ to the list:



      With the use of "blue" icons collection, icons will turn into blue when being hovered.

    • @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;. Remember to have the new content background image placed exactly, that is platform-ui/platform-ui-skin/src/main/webapp/skin/images/themes/blue/ShareImages/Background in this context.

  6. Build platform-ui with the command: mvn clean install.

  7. Go to /platform-ui/packaging/target/ to check if {YOUR-SKIN-ADDON}.zip is generated.

Deploying locally and testing your created skin add-on

  1. Create a local.json in $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}.zip is stored.

  2. Install your add-on with the command: addon install {YOUR-SKIN-ADDON-ID} --snapshots

  3. Apply the new theme to eXo Platform.

    • i. Start eXo Platform package, and log in with the admin account.

    • ii. Go to AdministrationPortalSites, 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 Save.

  4. Refresh the page and enjoy the new theme.

    • The current homepage:

    • The homepage with your applied skin add-on:

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus