addmixin skins Jahia 7.3

How to create a custom skin

Question

Skins are very useful to embed any content with HTML. 

Answer

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.

addSapace.png


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

addmixin.png

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
</div>

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_addSpace.addSpaceSize=Size
jmix_addSpace.addSpaceSize.large=Large
jmix_addSpace.addSpaceSize.medium=Medium
jmix_addSpace.addSpaceSize.small=Small
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="http://www.jahia.org/tags/jcr" prefix="jcr" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="template" uri="http://www.jahia.org/tags/templateLib" %>
<template:addResources type="css" resources="addSpace.css"/>

<c:set var="addSpaceSize" value=" ${currentNode.properties.addSpaceSize.string}"/>

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

And you will also need to create the properties file jmix_skinnable/html/skinnable.skins.addSpace.properties 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.

type=skin
addMixin=jmix:addSpace

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 https://github.com/pvollenweider/addspaceskin