Docs Developer Site
Enonic XPCMSCustom styles

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.

/resources/site/styles.xml 
<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.

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

Contents