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
- Navigate to any landing page with a callout
- Click the Paintbrush icon in the bottom right corner of the page
- Scroll to the Featured Layout section, then click Callout to expand the section
- 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.
- Click the radio button beside the desired layout
- 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
- 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
- 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.
-
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.
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. .
- 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
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.