Style Editor for Callouts

The Style Editor is an administrator tool that is used to configure various design elements of your Stacks site directly from the homepage. This provides administrators with the ability to adjust the appearance of your pages, content, and individual theme elements without changing the overarching theme iteself. 

Style editor settings for callouts allow you to configure the appearance of these blocks, including:

• Layout
• Colors (font, links, background)
• Borders appearance
• Margins and padding
• Image display
• Read more settings

Accessing the Style Editor

The style editor is accessed from the "front-end" of your Stacks site, by navigating to any landing page on your site.

To access the style editor to change the appearance of your callouts

1. Navigate to any landing page with a callout
2. Click the Paintbrush icon in the bottom right corner of the page
3. Scroll to the Featured Layout section, then click Callout to expand the section
4. Click the sub-options to expand each section and access the settings (described below)

Layout

There are 3 layout options, with example images allowing you to choose the most appropriate option. 

1. Click the radio button beside the desired layout
2. Click Save to see your changes

Colors

To ensure you are able to match your branding you can adjust the color for

• Font - the text color inside callouts
• Link - the title text for links included in a callout, as well as read more link and any additional links that may be apart of the callout
• Background - this is the color that will appear directly behind each callout block

To change colors

1. Click the color preview icon (circle) beside the option
2. Use the color picker OR enter a HEX or RGB color code in the field provided
3. Click Save to see your changes
   1. Note: color changes may be seen in real-time, prior to clicking save, however changes are not implemented until you click the save button

Border

If desired, you can add a border that will appear in the desired position (top, bottom, left, right, or all around) for all blocks within the callout.

1. Border color - the color of the border
   1. Click the color preview icon to select a color, this can include entering the HEX or RGB color code if you have
2. Thickness - enter a numerical value for the thickness of the border
   1. The higher the number, the thicker the border
3. Radius - enter a numerical value for the roundness of the border corners
   1. By default these are sharp 90 degree corners, the higher the number the more softer and rounder the corners will appear
4. Style - select the style of border from the select list
5. Position - click the option that best suits where the border should appear
6. Click Save to see your changes

Margin and Padding

This setting allows you to configure the Top/Bottom/Left/Right margins and padding around the callout blocks. This can be advantageous for adding some space between blocks if they appear squished together.

1. Enter a numerical value into the appropriate fields to increase or decrease the margins and padding.
2. Click Save to see your changes. 

Mobile Horizontal Scroll

By default, Stacks’ responsive design will automatically resize and rearrange callout blocks to fit the display size of a given device; this will cause callout blocks to be arranged vertically on smaller screens like mobile phones.

If you would rather the blocks be displayed horizontally, allowing the user to scroll left-right to veiw the blocks, this option can be enabled. . 

1. Click the Enable option to set callouts to use this format
2. Click Save to save your changes

Image Display

You can hide or show the images that are part of your callouts from the image display section.

1. Select the Hide images option to force callout images to be hidden
2. Click Save to see your changes

Read More Settings

The Read more option allows you to manage how much text appears in the body of your callout blocks, as well you can configure this setting to restrict the number of additional links displayed. If there is a large amount of text that you’d like partially hidden to maintain a clean appearance on your site, you can use the Read more option to expand the body text as needed.

1. Enable on description, when checked will enable this feature
2. Excerpt description length, enter the number of characters to be displayed in the description, once exceeded, the Read More link will appear
3. Enable on links, when checked will enable this feature for additonal links
4. Number of links to show, enter the number of additional links to display, once exceeded the Read More link will appear 
5. Click Save to see your changes

If there are additional visual changes you wish to make but are unable to through the settings described, through the CSS override section of the style editor, you can add your own CSS code to implement additional visual changes.