The Style Editor is an administrator tool used to configure the design elements of your Stacks site directly from the homepage. This provides administrators with the ability to see their changes in real time and tweak the design as needed.
As it pertains to Callouts, you have the ability to adjust a few different settings, including:
- Layout
- Colors (font, links, background)
- Image display
- Read more settings
Access the Style Editor by logging into your Stacks site, then click the paint brush icon in the bottom right.
Scroll to the Featured Layout section, then click Callouts to expand the options that can be configured. Click on each option and adjust the settings as needed.
Layout
Choose from one of 5 available callout layouts that best suit your site’s design choices by clicking the radio button beside the desired layout.
Colors
To help match your branding and theme, 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 will appear directly behind each callout block)
For each option you wish to set a color for, click the color preview icon to select a color, this can include entering the HEX or RGB color code if you have.
Border
The border settings allow you to configure the appearance of a border around each callout block, options here include:
- Border color - the color of the border
- Click the color preview icon to select a color, this can include entering the HEX or RGB color code if you have
- Thickness - the thickness of the border
- The higher the number, the thicker the border
- Radius - this is the roundness of the border corners
- By default these are sharp 90 degree corners, the higher the number the more softer and rounder the corners will appear
- Style - choose they style of border from the select list
- Position - click the option that best suits where the border should appear
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.
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.
Stacks 4.0 allows callout blocks to use a horizontal scroll that works similarly to a resource flow or slider by displaying each block in a carouse format. Click the Enable option to set callouts to use this format.
Image Display
You can hide or show the images that are part of your callouts from the image display section. Select the Hide images option to force callout images to be hidden.
Read More Settings
The Read more option allows you to manage how much text appears in the body of your callout blocks. 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.
To enable the read more link, Select the Enable on description option and set the Excerpt description length by entering the number of characters you’d like the callout blocks description to be restricted by.
The Additional Links option works in the same manner. If you would like to display additional links that were added to your callout blocks, select the Enable on links option and enter a value for the number of links to show under each callout block.