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
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 | |__1.6.2 | |__...(other jQuery versions) | |__plugins |__utils
The resources are divided into 2 categories: skin and script.
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
, 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.
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.
jQuery and plugins:
Here you should keep the latest and several versions of jQuery because some plugins may not work with the latest version. Several versions of a plugin are also kept.
The utilities scripts:
utils/pretty.date.js: Calculate the difference from a point of time in
the past to the present and display "4 months 3 weeks ago", for example.