Deep look at the new Skin Module feature in Platform 4.2

Last week, we announced the release of eXo Platform 4.2 Milestone 1 and told you about the new feature it would include. Today, it’s time to take a deeper look at one of them: the Skin Module.

Some of you stated that it takes too much time to modify the default skin of eXo Platform, and we heard you.

We understood that even if the default skin is really nice, you need to be able to easily create your own theme.

You need to be able to create a custom theme that can represent your company, your brand, and your community. Or perhaps you just don’t like that shade of blue, and you prefer a strong pink color!

As usual, we listened to our community:

During the past few months, our UI team has worked hard to harmonize, factorize, and optimize the look and feel of eXo Platform. We have reached our first milestone: it is now ridiculously simple to customize the skin of eXo Platform 4.2.

The Skin Module feature lets you modify the entire eXo Platform skin by updating only a few variables in a unique Less file.

For instance, we can create your own add-on. Then by modifying only six variables in the variable.less file, you can include a new grey background image like below:

@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: "/eXoSkin/skin/images/themes/blue";

@contentBackground: url("@{images-path}/ShareImages/Background/texture-gray.jpg") repeat left top;

We can completely modify the default skin of eXo Platform to produce a new dark theme:

This Dark Skin Add-on is already available, and you can install it in one command line using the add-on manager:

$ ./addon install exo-dark-skin --snapshots

You want to go back to the default eXo skin; just uninstall the add-on:

$ ./addon uninstall exo-dark-skin

Exciting? I’m sure now you want to create your own skin add-on. Let’s start by forking the platform-ui project and follow the Readme file. Then let’s share your nice skin add-on with the community by registering it on the community website.

As with any new feature in eXo Platform, a complete documentation will follow soon. Keep an eye on this blog to read our documentation updates.

We are eager to hear your feedback on this feature. Please let us know on eXo Tribe and do not hesitate to share screenshots of your creations!

May the force be with you ! 🙂

Join the eXo tribe by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!

Make the most out of eXo Platform 4

Register to the next weekly live demo session and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.