Creating custom styles
DX8 allows you to create CSS classes called Custom styles and easily apply them to Layout elements.
When a Custom styles is applied to an element, for example a Paragraph element, it will inherit all the CSS properties from the base style for that element. When creating Custom styles for elements where a Base style exists, you only need to add the properties you want to override or extend.
To create a Custom style:
- Navigate to DX8 > Styles > Custom styles > Add custom style
- In the list of Custom style types, click on the Custom style you want to create
- On the next screen, enter a name in the Name field for your Custom style. This will be used to generate the class name. It will be prefixed with .coh-style-(your name) to prevent it from clashing with any classes you may have created manually
- Add CSS Properties to your Custom style using the Style builder. For more, see Using the style builder
- Click Save and continue
Making your custom style available in your WYSIWYG
You can make your Custom style available in your WYSIWYG editor as both an element style and an inline span. For more, see Editing content with the WYSIWYG.
To make your style available to the WYSIWYG,
- Navigate to DX8 > Styles > Custom styles
- Click on a Custom style to make available in the WYSIWYG
- At the bottom of the screen, click on the checkbox labelled Make available in WYSIWYG editor
Applying custom styles to layout builder elements
When you create a Custom style it becomes available to Elements in the Layout builder.
To apply a Custom style to an element:
- Create a Custom style for a specific element type. For example, a Blockquote custom style
- Navigate to a page or template which includes the Layout canvas
- Add an element to the Layout canvas that matches the Custom style type you've created. For example, add a Blockquote element. For more, see Using the layout builder
- Double click on the Element to edit it's settings
- Within the Custom style area, click on the Drop-down and select your Custom style. If there isn't a Custom style drop-down shown, click on the Properties button and then click Settings > Custom style to add this option to your form. Then Select your Custom style
- Click Apply at the bottom of the Element settings form
- Click Save
- The Custom style will be applied to the element