To achieve the consistent look and feel, you have to collect the common features of all gadgets as much as possible and put in a place where it can be shared for all gadgets. You will use exo-gadget-resources for this purpose. It is a .war file that contains commonly used static resources (stylesheets, images, JavaScript libraries, and more) available for all gadgets in eXo Platform at runtime:

/exo-gadget-resources
 |__skin
 |   |__exo-gadget
 |   |   |__images
 |   |   |__gadget-common.css
 |   |__...(3rd-party components' CSS)
 |__script
    |__jquery
    |  |__3.2.1
    |  |__...(other jQuery versions)
    |  |__plugins
    |__utils

The resources are divided into 2 categories: skin and script.

Skin

This is the place for the shared stylesheets of the gadgets (exo-gadget/gadget-common.css) and other third-party components styles adapted to the eXo Platform skin (jqPlot, Flexigrid, and more). This is a copy of the component's original CSS with some modifications to match the eXo Platform's skin. You can find this original file at the component's folder under exo-gadget-resources/script then link to it or make your own copy (put it in your gadget's folder and refer to it in gadget's .xml file) to suit your need.

The gadget-common.css file is the main place for the global stylesheets. When the eXo Platformskin is changed, updating stylesheets in this file will affect all gadgets skins accordingly. In this file, you will define stylesheets applied for all gadgets, such as gadget title, gadget body, fonts, colors, tables, and some commonly used icons, such as drop-down arrow, list bullet, setting button, and more.

Script

This is the place for commonly used third-party JavaScript libraries (e.g: jQuery and its plugins) and a library of useful utility scripts (the utils folder).

jQuery and plugins:

The utilities scripts: