Version:

    Using the style preview

    Use the Style preview to see what your style looks like while you are creating it. The Style preview opens by default when creating and editing Base styles and Custom styles.

    The Style preview uses a WYSIWYG editor so that you can see what your style looks like in context with other content.

    Refreshing the preview to show updates to your style

    To refresh the preview:

    1. Click on the refresh icon in the top right of the preview. It will spin around to show that it's refreshed
    2. To auto refresh the preview, click the check box next to the refresh icon. The preview will now auto refresh every second.

    Default content within the style preview

    The Style preview includes default content for the style you are creating. This content has a preview class (.coh-preview) applied to it. Site Studio requires this class to show a preview of the style. If you accidentally remove the default content and need to add it back, you will need to add the coh-preview class back to the element you are styling.

    To add the preview class to the preview content:

    1. Click the Source button in the WYSIWYG editor controls
    2. Within the opening html tag of the element you are styling, add  class="coh-preview" . For example, <h2 class="coh-preview">Heading 2 default content.</h2>
    3. Click the Source button again to return to the preview window.

    Adding content to the style preview

    You can add additional content to the Style preview through the WYSIWYG editor and see how your style appears alongside other styles.

    Previewing your styles at different breakpoints

    To preview your style at different breakpoints:

    1. Click the Breakpoint menu 
    2. Click on a Device icon
    3. The WYSIWYG content area will resize to the width of the breakpoint selected.

    Previewing your style against a different background color

    To change the background color of the preview:

    1. Click the Color button and select a color from your Color palette.
    2. Click Select
    3. The background color will change. This setting will be saved with your style configuration.

    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.