Skin customization with eXo Platform 5.0

eXo Platform Blog

Defining a skin and creating a graphical chart of a site is an important phase in any project. eXo Platform 5.0 comes with two predefined skins (Default and Enterprise) you can draw inspiration from or use with some minor changes. To define a new skin, follow the steps described in the documentation site (direct link).

To customize one of the predefined eXo Platform skins, you can redefine an existing skin or customize some CSS classes.

1- Redefine an existing skin

If you’d like to change a generic CSS behavior defined in a less variable, you could create a new Maven module based on this sample project and add your customizations:

2- Customize some CSS classes

To redefine predefined CSS classes, use this maven project example and add your customizations:

If you want to apply those customizations to the Enterprise skin, you will have to change this parameter from “Default” to “Enterprise”.

To make the new custom style file loaded at the end of Pages DOM (with the top CSS priority), rename the skin module to start with “customModule” (this is an improvement made on eXo Platform 5.0.1+).

Related Posts
Comments
Leave a Reply

Your email address will not be published.

I have read and accept terms of the privacy Policy. Learn More

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">