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