Skins

Jahia provides a skin feature, which allows editors to choose the look of lists easily and intuitively, while respecting the design imposed by the graphic designers.

In the example below, you can see that the decorations for a skin can vary greatly, ranging from a plan style to two color variations of a more obvious frame.

[image] [image] [image]

When the function is available, editors may select for list objects in the layout tab from a dropdown list of pre-defined skins setup by the designers.

[image]

Each skin in the listed using a name and an image, ideally a screenshot of the design mockup, or a symbolic representation that will give editors a clear idea of what the element will look like once the skin is applied.
A classic use of skins is a « breaking news », « alert » or « important information » that makes it easy to visually differentiate a content element.

A skin is nothing else than XHTML code and some CSS classes that will decorate the list on which it is applied.
Skin are declared in the skins module (deployed in jahia/modules/skins/) and are shared between the different template-sets. Jahia provides as example a number of ready-to-use skins. You may freely remove, modify or add the ones you need to fit your project needs. If you do not intend on offering the possibility of skinning to editors, you may also choose to simply un-deploy the skins module.

Tips:

A skin is always applied on a list. In certain cases editors might want to skin a single content object, as this might be required by the overall design. You may get around this by simply manual create a list around the content object and then move the content object into the list. The list may also be limited to a single element through it’s properties.
Columns built using the « row » component are also lists and therefore skinnable.