Custom styles
Contents
XP supports definition of custom styles for use in rich text content.
Introduction
Styles are used to add effects and styling to elements of the Rich Text Editor.
Custom styles typically map to a CSS class for client-side styling. Image styles additionally support instructions for the image service, enabling image crops and filters to be applied server-side.
| At the moment, custom styles are only supported for Images. |
Descriptor
The styles.xml file declares the custom styles for your app.
Example style definition:
<styles css="styles/styles.css" xmlns="urn:enonic:xp:model:1.0"> (1)
<image name="editor-image-cinema"> (2)
<display-name>Cinema</display-name>
<aspect-ratio>21:9</aspect-ratio>
</image>
<image name="editor-image-sepia">
<display-name>Old photo</display-name>
<filter>sepia(25)</filter>
</image>
</styles>| 1 | The optional css attribute references a file in your app’s /src/main/resources/assets/ folder. The CSS declared in this file will be loaded into Content Studio’s rich text editor to provide client-side styling. |
||
| 2 | Each <image> element declares a custom style that can be applied to images inserted in the rich text editor.
|
Client side styles
Below is an example CSS, declared within your application.
The file will be loaded into Content Studio and the rich text editor, and provide client-side styling.
.editor-image-sepia {
width: 100px;
height: 100px;
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
.editor-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); }
}When looking at the two styles defined, only editor-image-sepia is declared in the css, and thus makes use of both server-side processing and client-side styling in Content Studio.
Built-in styles
By default, XP comes with a built-in image style called Original (no image processing).
By applying this style to an image, the original image file will be served, without any processing.
