Version:

    Creating custom styles

    You can create Custom styles using the Style builder.

    Important information about custom styles:

    • Custom styles are CSS classes
    • They are prefixed with .coh-style- to prevent them from conflicting with other CSS classes
    • They are grouped into categories that correspond with the types of element they can be applied to.

    Create a custom style

    To create a Custom style:

    1. Navigate to Site Studio > Styles > Custom styles 
    2. Click Add custom style



       
    3. In the list of Custom style types, click on the Custom style type you want to create



       
    4. On the next screen, enter a name in the Title field for your Custom style. This will be used to generate the class name. It will be prefixed with .coh-style- to prevent it from conflicting with other classes



       
    5. Add CSS Properties to your Custom style using the Style builder. For more, see Using the style builder
    6. 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,

    1. Navigate to Site Studio > Styles > Custom styles
    2. Click on a Custom style to make available in the WYSIWYG
    3. At the bottom of the screen, click on the checkbox labelled Make available in WYSIWYG editor

    Applying custom styles to elements on the Layout canvas

    When you create a Custom style, it's made available to Elements on the Layout canvas.

    To apply a Custom style to an element:

    1. Navigate to a component or template to access the Layout canvas
    2. Add an element to the Layout canvas that matches the Custom style type you've created. For example, add the Link element.
    3. Double click on the Element to edit it's settings
    4. Within the Custom style area, click on the Drop-down and select your Custom style. 
    5.  Click Apply at the bottom of the Element settings

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.