Skip to main content

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
Tip! It's important to note that these settings are global and are applied to all callouts added anywhere on your Stacks site. 

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 Screenshot 2025-06-06 at 4.50.28 PM.png near 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 (described in the sections below) to expand each section and access the settings

Layout

This section allows you to change the content layout within the callout's blocks. To select a new layout: 

  1. Click the radio button beside the desired layout
  2. Click Save at the bottom of the style editor to see your changes

Colors

Through the colors section, you can select the color scheme for various callout elements to ensure you match your organization's branding. Element colors that can be modified include:

  • Font - this applies to the callout's description, if any has been added
  • Link - this is the color of links, including additional links (if added) and the read more link (if enabled)
  • Background - this color is applied behind each of the callout's blocks

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, a border can be applied to the callout blocks, additional configuration options include the ability to set the border color, thickness, radius, style, and position.

  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

The margin and padding section 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 you'd like a little more separation in appearance.

  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; as such, callout blocks to be arranged vertically on smaller screens like mobile phones.

The mobile horizontal scroll setting will override the vertical display of callout blocks on mobile devices and allow users to scroll left-right to veiw the blocks.

  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' setting allows you to manage how much of the body text will initially appear in the callout blocks. This can be an advantageous setting to ensure consistency in block sizing when the body text can vary greatly from one block to the next. 

Additional configuration options also allow you to set how many 'Additional Links' are displayed initially as well. In both cases, users will see and can click the 'Read more' link to view the full body text and see all additional links, when these settings are enabled. 

  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

 

Was this article helpful?
0 out of 0 found this helpful
Return to top