Custom styles
Contents
XP supports implementation of custom styles that can be applied to page elements for more advanced rendering capabilities.
Styles are defined inside an application and can be applied to page elements using Rich Text Editor in Content Studio.
As of now custom styles are supported only for <img> elements. |
Declaration
Server-side processing
Define a file called styles.xml
in the site
folder of your app.
Each image
field inside the root element declares a custom style for an <img>
element, with corresponding name
and style properties inside.
<styles css="styles/styles.css" xmlns="urn:enonic:xp:model:1.0">
<image name="editor-image-cinema">
<display-name>Cinema</display-name>
<aspect-ratio>21:9</aspect-ratio>
</image>
<image name="editor-style-image-sepia">
<display-name>Old photo</display-name>
<filter>sepia(25)</filter>
</image>
</styles>
Client-side processing
Option attribute css
on the root styles
element allows mapping styles declares in this file with client-side CSS styles. In other words, you can have styles with only server-side processing, or only client-side processing, or combine both under the same style name.
Define a file called styles.css
inside resources/assets
folder. It has to match the path in the css
attribute of styles
element in styles.xml
. So, in case of css="styles/styles.css"
the file has to be located at resources/assets/styles/styles.css
.
.editor-style-image-sepia {
width: 100px;
height: 100px;
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
.editor-style-image-sepia img {
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
All custom styles (no matter if they define server-side processing or client-side processing or combine both) must be defined in styles.xml . |
If you want to use client-side processing only, define a CSS file and add reference to it from styles.xml via css attribute (as described above). Don’t include any additional properties inside <image> elements but make sure that class name in the CSS file matches image.name (like editor-style-image-sepia in styles.xml and .editor-style-image-sepia in styles.css from the example above). |
Image styles
By default, XP comes with one built-in image style called “Original (no image processing)”. By applying this style to the image, you’ll make sure that the image won’t undergo any processing on the server and will be rendered “as is”.
The example above represents two styles - editor-image-cinema
and editor-style-image-sepia
- that apply server-side image processing. One of them, editor-style-image-sepia
, will also apply client-side styling to the image processed on the server.
As of now, only aspect-ratio and filter are supported for server-side image processing. |