addmixin skins Jahia 7.3

How to create a custom skin


Skins are very useful to embed any content with HTML. 


Here is an example to create your own addSpace skin. To use skins, your module or your templateSet need to depend on the Jahia Skins module.


This skin will allow you to choose a value from small, medium or large.


The idea is to embed your existing current with a DIV with a dedicated CSS. So, depending on the chosen value, you will get this kind of content:

<div class="addSpace small">
   your content here

and the idea is to use a CSS css/addSpace.css file that will handle these values

.addSpace.small {
    padding:15px 0;
.addSpace.medium {
    padding:35px 0;
.addSpace.large {
    padding:60px 0;

Meaning that when the editor will choose this skin, we will add a mixin that will provide a new property.

First, in your definitions.cnd file, you need to add this definition:

[jmix:addSpace] > jmix:templateMixin mixin
  extends = jmix:droppableContent
  itemtype = layout
  - addSpaceSize (string,  choicelist[resourceBundle]) = 'medium' autocreated < 'small','medium', 'large'

And then, in your main resource bundle file, you can add the dedicated keys

jmix_addSpace=Add space
jmix_skinnable.j_skin.skins.addSpace=Add space

Then you can create the related view for the skin jmix_skinnable/html/skinnable.skins.addSpace.jsp that will look like this

<%@ taglib uri="" prefix="jcr" %>
<%@ taglib uri="" prefix="c" %>
<%@ taglib prefix="template" uri="" %>
<template:addResources type="css" resources="addSpace.css"/>

<c:set var="addSpaceSize" value=" ${}"/>

<div class="addSpace ${addSpaceSize}">

And you will also need to create the properties file jmix_skinnable/html/ with this content. The goal of this file is to add this new skin to the choice list of skins, and also to add the mixin jmix:addSpace when using this view.


Finally, you can add a picto in the /img directory with such name skins.addSpace.png to illustrate this skin.

You can test this example using