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.
- Click the radio button beside the desired layout
- Click Save to see your changes
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 is the color that will appear directly behind each callout block
To make a change
- Click the color preview icon (circle) beside the option
- Use the color picker OR enter a HEX or RGB color code in the field provided
- Click Save to see your changes
Border
The border settings allow you to configure the appearance of a border around each block within the callout, 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 - enter a numerical value for the thickness of the border
- The higher the number, the thicker the border
- Radius - enter a numerical value for 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 - select the style of border from the select list
- Position - click the option that best suits where the border should appear
- 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.
- Enter a numerical value into the appropriate fields to increase or decrease the margins and padding.
- 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.
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
- 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.
- Select the Hide images option to force callout images to be hidden
- 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.
- Enable on description, when checked will enable this feature
- Excerpt description length, enter the number of characters to be displayed in the description, once exceeded, the Read More link will appear
- Enable on links, when checked will enable this feature for additonal links
- Number of links to show, enter the number of additional links to display, once exceeded the Read More link will appear
- Click Save to see your changes