Docs Developer Site
Enonic XP
arrow-down
    1. Widgets
    1. ID providers
    2. System ID provider
    3. Users and groups
    4. Roles
    1. Projects
    2. Layers
        1. AttachmentUploader
        2. Checkbox
        3. Combobox
        4. ContentSelector
        5. ContentTypeFilter
        6. CustomSelector
        7. Date
        8. DateTime
        9. Double
        10. GeoPoint
        11. HtmlArea
        12. ImageSelector
        13. Long
        14. MediaSelector
        15. Radiobutton
        16. Tag
        17. TextArea
        18. TextLine
        19. Time
      2. Field set
      3. Item set
      4. Option set
      5. Mixins
      6. Localization
    4. Content Types
    5. X-data
    6. Macros
    7. Custom styles
    8. Sites
      1. Regions
      2. Part component
      3. Layout component
      4. Text component
      5. Fragments
      6. Filtering
      7. Component indexing
      8. Visual editor
    10. Page templates
  4. Applications
    1. Sandboxes
    2. Code
    3. Building
    4. Configuration
    5. TypeScript
      1. Controllers
      2. Globals
      3. HTTP
      4. Events
      5. Error handler
      6. Filters
      7. ID provider
      8. Tasks
      9. Templating
      10. Localization
      11. Websocket
      12. Mappings
      13. Components
      14. Processors
      15. Contributions
      16. Main controller
      17. Java bridge
      1. Admin API
      2. Application API
      3. Auditlog API
      4. Authentication API
      5. Cluster API
      6. Common API
      7. Content API
      8. Context API
      9. Event API
      10. Export API
      11. Grid API
      12. I18N API
      13. IO API
      14. Mail API
      15. Node API
      16. Portal API
      17. Project API
      18. Repo API
      19. Scheduler API
      20. Schema API
      21. Tasks API
      22. Value API
      23. VHost API
      24. Websocket API
      1. Webapp Engine
        1. Image service
        2. Component service
      3. Admin Engine
      4. Asset service
      5. HTTP service
      6. IDprovider service
    2. Task engine
    3. Management Endpoint
    4. Statistics Endpoint
    1. Nodes and repos
    2. Properties
    3. Indexing
    4. Branches
    5. Queries (NoQL)
    6. Queries (DSL)
    7. Filters
    8. Aggregations
    9. Highlighting
    10. Editors
    1. Strategies
    2. Distributions
    3. Docker image
    4. Vhosts
    5. Configuration
    6. Backup & restore
    7. Systemd
    8. Clustering
  9. Audit Logs
    1. Upgrade Notes
    2. Upgrading Apps
Developer Docs Xp Stable Cms Styles

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:

/src/main/resources/site/styles.xml 
<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.
As of now, aspect-ratio and filter are the only options available for server-side image processing.

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.

/src/main/resources/assets/styles/styles.css 
.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.

Contents

Contents